![a152cd5a748a020f90e3cae8cf640c1f.png](https://i-blog.csdnimg.cn/blog_migrate/8b8d8694ddc8af7f938103967b3e8d20.jpeg)
1.思路和效果图
先说一下大体思路:
json解析出来的lyrics歌词(字符串形式:[00:18.26]毕竟我们深爱过[00:21.74]有你陪的日子里)中每句和每句之间有,所以我们利用这个换行符标识来分割字符串,放在list中,这样,我们得到的每一个字符串都是时间戳+歌词的形式,接下来,我们再继续解析单个字符串,用Qmap来保存,时间作为键值,歌词作为值,这样就构成了时间对应歌词的形式,然后通过QMediaPlayer类中positionChanged(qint64 duration)信号调用槽函数onDurationChanged(qint64 duration)来显示歌词,positionChanged信号会返回当前歌曲的进度,这个进度是毫秒级别的,将返回的时间与map的键值做对比,从而在适当的时间显示对应的歌词,歌词用Label显示。大体思路就是这样,然后具体实现的时候,还是有许多细节需要注意的,遇到再说,还有就是上面提到的函数等等,在前面的文章中已经建立,下面的代码是直接写实现,如果不知道在哪里写,可查看前面几篇文章。
![0233e006284b573854ab9ff011eae1bd.gif](https://i-blog.csdnimg.cn/blog_migrate/e373e11a88143fde85f5ed7cffb91fcd.gif)
2.歌词的解析与存储
mainwindow.h
//类成员QMap lrcMap;
mianwindow.cpp
if (valuedataObject.contains("lyrics")) //lrc{QJsonValue play_url_value = valuedataObject.take("lyrics");if (play_url_value.isString()){QString play_lrcStr = play_url_value.toString();if (play_urlStr != ""){if (play_lrcStr != ""){//将整个歌词给sQString s = play_lrcStr;// s1 用列表的形式保存每一句歌词QStringList s1 = s.split("");for (int i = 3; i < s1.size() - 1; i++){QString ss1 = s1.at(i);//歌词中开头有一些是无意义的字符,用正则表达式判断,只保存包含有时间戳的字符串。QRegExp ipRegExp = QRegExp("[ddSddSdd]");//若包含则返回flasebool match = ipRegExp.indexIn(ss1);if (match == false){//时间解析格式(分*60+秒)*100+厘秒int s_1 = ss1.mid(1, 2).toInt(); //分int s_2 = ss1.mid(4, 2).toInt(); //秒int s_3 = ss1.mid(7, 2).toInt(); //厘秒int s_count = (s_1 * 60 + s_2) * 100 + s_3; //规定写法int lrctime = s_count;QString lrcstr = ss1.mid(10);//用Qmap来保存lrcMap.insert(lrctime, lrcstr);}}}else{//没有歌词;}}}}
由于json返回的歌词里面的时间表示是[02:12.85](.后面的数字表示85/100秒)这种形式,而positionChanged返回的是以毫秒的形式,为了能够做对比,我们规定一种通用的表示方法:
时间解析格式(分*60+秒)*100+厘秒,这个厘秒就是小数点后面的数。
3.onDurationChanged()
void MainWindow::onPositionChanged(qint64 position){ //时间标签得法 //(分*60+秒)*100+厘秒 int pos = position/10; QMap::iterator iter = lrcMap.begin(); while (iter != lrcMap.end()) { if(pos-50<=iter.key()&& pos+50>=iter.key()) { int j=0; if(iter != lrcMap.begin()) { iter--; ui->label_20->setText(iter.value()); j++; } if(iter != lrcMap.begin()) { iter--; ui->label_19->setText(iter.value()); j++; } if(iter != lrcMap.begin()) { iter--; ui->label_6->setText(iter.value()); j++; } for(;j>0;j--) { iter++; } //中间 ui->label_21->setText(iter.value()); iter++; if(iter != lrcMap.end()) { ui->label_22->setText(iter.value()); } else { ui->label_22->setText(""); return; } iter++; if(iter != lrcMap.end()) { ui->label_23->setText(iter.value()); } else { ui->label_23->setText(""); return; } iter++; if(iter != lrcMap.end()) { ui->label_24->setText(iter.value()); } else { ui->label_24->setText(""); return; } iter++; if(iter != lrcMap.end()) { ui->label_25->setText(iter.value()); } else { ui->label_25->setText(""); return; } iter++; if(iter != lrcMap.end()) { ui->label_26->setText(iter.value()); } else { ui->label_26->setText(""); return; } iter++; if(iter != lrcMap.end()) { ui->label_27->setText(iter.value()); } else { ui->label_27->setText(""); return; } } iter++; }}
label_21等10标签用于显示歌词,label_21匹配当前时间显示的歌词,并且把该歌词前面的歌词和后面的歌词分别发送给其他对应的标签。这样就实现了动态效果。
4.总结
虽然代码很少,但是完成这个还是用了很长时间实现,反复修改,反复崩溃,没实现前,觉得这个功能,要是能实现多好,实现了后又觉得自己写的太简单了,而且效果有一点僵硬,并没有人家QQ 酷狗啊什么,歌词是慢慢往上滑,我这个是直接显示,后面会研究研究怎么滑动显示,让人看见更加平滑。学习就是这样,来回不断重复,对待问题的看法,逻辑的推理,思维的跳跃,从不会到实现,再到不满足再实现。可执行文件不是你的财富,修改过程中的经验才是,我是花狗,一名苟且偷生的大专生,我们下篇见。
整个项目源码获取后台私信小编 01