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

2020博客之星年度总评选进行中:请为74号的狗子投上宝贵的一票!
我的投票地址:点击为我投票
在这里插入图片描述


文章目录

  • 1.思路和效果图
  • 2.歌词的解析与存储
  • 3.onDurationChanged()
  • 4.总结


网络播放器系列:

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


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/43966.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么停更ROS2机器人课程-2023-

机器人工匠阿杰肺腑之言&#xff1a; 我放弃了ROS2课程 真正的危机不是同行竞争&#xff0c;比如教育从业者相互竞争不会催生ChatGPT…… 技术变革的突破式发展通常是新势力带来的而非传统行业的升级改革。 2013年也就是10年前在当时主流视频网站开启分享&#xff1a; 比如 …

chatgpt赋能Python-mac上的python

在Mac上使用Python编程的好处 作为一名有10年Python编程经验的工程师&#xff0c;我必须说Mac是一个出色的编程工作台。Mac操作系统本质上就是一个整合了各种开发工具的平台&#xff0c;为Python编程提供了很好的支持。这篇文章将介绍在Mac上使用Python编程的好处。 简单易用…

chatgpt赋能Python-python_bonjour

Python Bonjour&#xff1a; 通过Python实现Bonjour协议 介绍 Bonjour是苹果公司推出的一种新型、免配置的网络协议&#xff0c;它可以使局域网中的电脑、打印机、电话等各种设备自动发现及配置&#xff0c;从而促进了网络设备的普及。Python作为一种高效、简洁、易学的语言&…

chatgpt赋能Python-python_heic

Python处理HEIC文件-从未如此容易 如果你是摄影师或者只是经常在移动设备上拍照的人&#xff0c;你可能已经遇到过HEIC文件的问题。HEIC是苹果公司最新的图像格式&#xff0c;它在保存高质量图像的同时节省了存储空间。但是&#xff0c;许多人在处理HEIC文件时遇到了问题&…

chatgpt赋能Python-python_imessage

Python iMessage – 给你的消息通讯锦上添花 作为一款风靡全球的通讯工具&#xff0c;iMessage的使用率在近年来不断攀升。iMessage的简洁易用性以及其在安全性和隐私方面的优势&#xff0c;经常使得其成为个人和商业用户的首选。而Python iMessage&#xff0c;则为这项通讯工…

视频剪辑 图文教程

一米剪辑图文教程 AppStore 搜索&#xff1a;一米剪辑 可下载该APP&#xff0c;免费无广告。 一、提取视频 功能说明&#xff1a;提取视频是根据抖音视频链接地址提取无水印视频&#xff0c;能无痕提取抖音视频&#xff0c;并保存到自己的相册。 图文教程&#xff1a; 1、…

手把手教你批量剪辑视频

1、去蓝奏云获取CRVideoMate 2、双击软件安装 3、 主界面分为视频队列区、操作面板区、处理记录区与状态栏。 用户导入或拖视频至视频列表中&#xff0c;设置转换参数&#xff0c;点击[开始处理]&#xff0c;静待处理即可。 右下角为功能菜单&#xff0c;选项、背景、参数、帮…

分享三个视频剪辑软件APP给你

每次在社交平台上刷到好看的视频VLOG&#xff0c;相信大家应该和我的内心一样&#xff0c;开始蠢蠢欲动了&#xff0c;想要自己制作一段短视频&#xff0c;但是自己却不会视频剪辑&#xff0c;不知道怎么才能将视频更好的展示给大家看&#xff0c;其实我们可以借助一些好用的视…

使用HTML版制作个人简历制作,非常好看的模板!!!

代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,…

手机怎么制作简历?如何在线做简历?

当我们在找工作的时候&#xff0c;首先要准备一份优质的简历模板&#xff0c;将个人信息、求职意向、个人经历等等方面的信息&#xff0c;以精炼的语言尽可能的填充到简历中&#xff0c;方便hr更好的查看。 ​以前我们大多从电脑上下载简历模板来做简历&#xff0c;随着网络的快…

9 个免费的程序员在线简历制作工具

英文 | https://python.plainenglish.io/9-free-online-resume-builders-for-programmers-1235f014d3e1 翻译 | 杨小爱 当您创建自己的个人简历内容时&#xff0c;专业的简历模板设计很重要。在今天的内容中&#xff0c;我将分享 9 个免费的创建简历的工具网站&#xff0c;您可…

NLP(五十九)使用FastChat部署百川大模型

本文将会介绍如何使用FastChat来部署国产大模型——百川模型。 在此之前&#xff0c;我们先来了解两个概念——百川模型和FastChat. 百川模型 2023年6月15日&#xff0c;被称为「中国 ChatGPT 梦之队」的百川智能公司&#xff0c;推出了 70 亿参数量的中英文预训练大模型——b…

用Claude和Stable Diffusion绘制《武松打虎》

绘制四大名著的经典画面 现在最火爆的AI&#xff0c;分为两类&#xff0c;一个是文本生成&#xff0c;一个是图片生成。如果让这两种结合到一起来&#xff0c;会是什么样的效果的。 这样是不是可能帮我们绘制很多场景下的图片&#xff0c;比如四大名著&#xff0c;帮我们的四…

详解区块链技术,如何运作

区块链是数字加密货币比特币的核心技术。区块链是一个分布式数据库&#xff0c;包含参与方之间已执行和共享的所有交易或数字事件的记录。每一笔交易都经过系统大多数参与者的验证。它包含每笔交易的每一条记录。比特币是最流行的加密货币&#xff0c;也是区块链的一个例子。区…

style计算机词汇,法语词汇学习:计算机及网络词汇(3)

音频son n.m 视频vido n.f 动画animation n.f 运动图像专家组Motion Picture Experts Group (MPEG) 硬件matriel 主机箱unit centrale n.f 总线bus n.f 处理器processeur n.m 协处理器coprocesseur n.m 微处理器microprocesseur n.m 芯片puce n.f 存储器mmoire n.f 随机存取存储…

英:英语面试常用口语900句

英语面试常用口语900句 英语面试常用口语900句 2018年09月18日 12:13:11 Nathan_Sun 阅读数&#xff1a;9514 &#xff08;一&#xff09; 高频词汇&#xff1a; 可以拿来形容自己的形容词。除开我们都熟知的一些基本的词汇可以用来形容自己&#xff0c;比如honest, reliabl…

英语面试常用口语900句

&#xff08;一&#xff09; 高频词汇&#xff1a; 可以拿来形容自己的形容词。除开我们都熟知的一些基本的词汇可以用来形容自己&#xff0c;比如honest, reliable, trustworthy等&#xff0c;我们还可以运用一些“高级词汇”。 用形容词的形式来形容自己 1. committed 投入…

【托福】口语

【托福】口语 Task 1&#xff1a;DescriptionTask 2 &#xff1a;Personal ChoiceTask 3&#xff1a;Campus mattersTask 4&#xff1a;Academic CourseTask 5&#xff1a;Problem and SolutionTask 6&#xff1a;Academic summary 连读 辅音音素结尾 元音音素开头 “in Englan…

TOFEL Speaking 托福口语 —— 模板

【参考资料】 1.B站&#xff1a;【TOEFL119斯坦福学长】突破托福口语&#xff01;- 根据2019年8月改革更新突破托福口语&#xff01; 【阅前必读】 本文最重要的部分为 Overall & 各二级标签 (Task 1-4) 的第一部分&#xff08;作答模板&#xff09; Overall 对于托福口…

做前端有钱途?还是后端有钱途?

今天逛论坛&#xff0c;看到有个朋友在纠结做前端好还是做后端好&#xff0c;之前是做前端的&#xff0c;但看了他的话估计想跳槽或者想去做后端&#xff0c;我们先来看看他的原话。 就目前编程行业而言前端好还是后端好是一个被很多人所争议的问题&#xff0c;就目前形式而言…