基于Qt的网络音乐播放器（五）实现歌词滚动显示

2020博客之星年度总评选进行中：请为74号的狗子投上宝贵的一票！
我的投票地址：点击为我投票

---

---

网络播放器系列：

• qt 布局和样式表
• 基于Qt的网络音乐播放器（一）添加音频文件，播放音乐，更新进度条
• 基于Qt的网络音乐播放器（二）切换歌曲，调节音量，调节语速，暂停
• 基于Qt的网络音乐播放器（三）通过酷狗音乐的api接口，返回json格式歌曲信息（播放地址，歌词，图片）
• 基于Qt的网络音乐播放器（四）酷狗API接口获取歌曲的搜索列表和歌曲的播放
• 项目已上传GitHub（更新中），点击获取

---

1.思路和效果图

先说一下大体思路：
json解析出来的lyrics歌词（字符串形式：[00:18.26]毕竟我们深爱过\r\n[00:21.74]有你陪的日子里）中每句和每句之间有\n，所以我们利用这个换行符标识来分割字符串，放在list中，这样，我们得到的每一个字符串都是时间戳+歌词的形式，接下来，我们再继续解析单个字符串，用Qmap<int,QString>来保存，时间作为键值，歌词作为值，这样就构成了时间对应歌词的形式，然后通过QMediaPlayer类中positionChanged(qint64 duration)信号调用槽函数onDurationChanged(qint64 duration)来显示歌词，positionChanged信号会返回当前歌曲的进度，这个进度是毫秒级别的，将返回的时间与map的键值做对比，从而在适当的时间显示对应的歌词,歌词用Label显示。大体思路就是这样，然后具体实现的时候，还是有许多细节需要注意的，遇到再说，还有就是上面提到的函数等等，在前面的文章中已经建立，下面的代码是直接写实现，如果不知道在哪里写，可查看前面几篇文章。

---

2.歌词的解析与存储

mainwindow.h

//类成员
QMap<int,QString> 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 != "")
				{	//将整个歌词给s
					QString s = play_lrcStr;
					// s1 用列表的形式保存每一句歌词
					QStringList s1 = s.split("\n");
					for (int i = 3; i < s1.size() - 1; i++)
					{
						QString ss1 = s1.at(i);
						//歌词中开头有一些是无意义的字符，用正则表达式判断，只保存包含有时间戳的字符串。
						QRegExp ipRegExp = QRegExp("\\[\\d\\d\\S\\d\\d\\S\\d\\d\\]");
						//若包含则返回flase
						bool 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<int, QString>::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 酷狗啊什么，歌词是慢慢往上滑，我这个是直接显示，后面会研究研究怎么滑动显示，让人看见更加平滑。学习就是这样，来回不断重复，对待问题的看法，逻辑的推理，思维的跳跃，从不会到实现，再到不满足再实现。可执行文件不是你的财富，修改过程中的经验才是，我是花狗，一名苟且偷生的大专生，我们下篇见。

---