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

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 基于Qt的网络音乐播放器(五)实现歌词滚动显示

@[TOC]


网络播放器系列:


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 酷狗啊什么,歌词是慢慢往上滑,我这个是直接显示,后面会研究研究怎么滑动显示,让人看见更加平滑。学习就是这样,来回不断重复,对待问题的看法,逻辑的推理,思维的跳跃,从不会到实现,再到不满足再实现。可执行文件不是你的财富,修改过程中的经验才是,我是花狗,一名苟且偷生的大专生,我们下篇见。


相关文章
|
7月前
|
C++
基于Qt的简易音乐播放器设计与实现
基于Qt的简易音乐播放器设计与实现
280 0
|
2月前
|
Linux 开发工具 Android开发
FFmpeg开发笔记(六十)使用国产的ijkplayer播放器观看网络视频
ijkplayer是由Bilibili基于FFmpeg3.4研发并开源的播放器,适用于Android和iOS,支持本地视频及网络流媒体播放。本文详细介绍如何在新版Android Studio中导入并使用ijkplayer库,包括Gradle版本及配置更新、导入编译好的so文件以及添加直播链接播放代码等步骤,帮助开发者顺利进行App调试与开发。更多FFmpeg开发知识可参考《FFmpeg开发实战:从零基础到短视频上线》。
126 2
FFmpeg开发笔记(六十)使用国产的ijkplayer播放器观看网络视频
|
5月前
|
网络协议
Qt中的网络编程(Tcp和Udp)运用详解以及简单示范案例
Tcp和Udp是我们学习网络编程中经常接触到的两个通讯协议,在Qt也被Qt封装成了自己的库供我们调用,对于需要进行网络交互的项目中无疑是很重要的,希望这篇文章可以帮助到大家。 是关于Qt中TCP和UDP的基本使用和特点:
716 7
|
4月前
|
C++
C++ Qt开发:QUdpSocket网络通信组件
QUdpSocket是Qt网络编程中一个非常有用的组件,它提供了在UDP协议下进行数据发送和接收的能力。通过简单的方法和信号,可以轻松实现基于UDP的网络通信。不过,需要注意的是,UDP协议本身不保证数据的可靠传输,因此在使用QUdpSocket时,可能需要在应用层实现一些机制来保证数据的完整性和顺序,或者选择在适用的场景下使用UDP协议。
172 2
Qt开发网络嗅探器02
Qt开发网络嗅探器02
|
4月前
|
存储 运维 监控
Qt开发网络嗅探器01
Qt开发网络嗅探器01
|
4月前
|
网络协议 容器
Qt开发网络嗅探器03
Qt开发网络嗅探器03
|
6月前
Qt绘图(线条、椭圆、矩形、图片滚动)
Qt绘图(线条、椭圆、矩形、图片滚动)
399 3
|
7月前
|
网络协议 算法 网络性能优化
Qt TCP网络上位机的设计(通过网络编程与下位机结合)
Qt TCP网络上位机的设计(通过网络编程与下位机结合)
Qt TCP网络上位机的设计(通过网络编程与下位机结合)
|
5月前
|
机器学习/深度学习 人工智能 计算机视觉
好的资源-----打卡机+Arm+Qt+OpenCV嵌入式项目-基于人脸识别的考勤系统-----B站神经网络与深度学习,商城
好的资源-----打卡机+Arm+Qt+OpenCV嵌入式项目-基于人脸识别的考勤系统-----B站神经网络与深度学习,商城