QT 音乐播放器【二】 歌词同步+滚动+特效

文章目录

      • 效果图
      • 概述
      • 代码
        • 解析歌词
        • 歌词同步
        • 歌词特效
      • 总结

效果图

在这里插入图片描述


概述

  • 先整体说明一下这个效果的实现,你所看到的歌词都是QGraphicsObject,在QGraphicsView上绘制(paint)出来的。也就是说每一句歌词都是一个图元(item)
  1. 为什么用QGraphicsView框架?

    • 在做歌词滚动效果时,我看网上实现这一效果基本上都是用QLabel,这样或许简单很多,但是效果单一,且不够灵活。使用图形视图这套,图形项可以自由地被移动、缩放、旋转和编辑。当然主要还是为了提升自己,可以更熟悉这套框架。
  2. 如何解析歌词?

    • 这里解析的是lrc文件为一般的歌词文件,格式如下:格式是固定的,那么就可以通过正则表达式来解析。然后存放在一个QMap中,key是时间,value是歌词。
    [02:08.496]乌蒙山连着山外山
    [02:11.138]月光洒下了响水滩
    [02:13.993]有没有人能告诉我
    [02:16.487]可是苍天对你在呼唤
    
  3. 如何同步歌词?

    • QMediaPlayer中有一个信号positionChanged,播放音乐时会时刻刻触发,可以获取当前播放时间。然后和前面我们存放在QMap中的时间进行对比,所以QMap存放的时间格式要按positionChanged发出的时间格式来解析。但我试验过很多次俩者的时间都是无法精确相等的。这里采取的方案是遍历QMap,找到第一个时间大于等于positionChanged发出的时间,然后获取这个时间对应的歌词,这便是当前的歌词。然后通过当前的key在获取前后几句的歌词。
  4. 歌词滚动以及那些特效如何实现的?

    • 同步歌词的时候会获取当前歌词以及前后几句歌词,提前存好对应歌词的特效,如下:这里面存了一个QMap,里面存放了每一句歌词的属性,包括字体大小,位置,透明度等等。
     m_textMapInfolst << QMap<QString, QString>{
    {"index", "1"},
    {"font", "12"},
    {"y", "-100"},
    {"x", "300"},
    {"opacity", "0.2"}};
    

    我这里有七句歌词,那么就存七个QMap在一个QList中,当歌词刷新的时候就去遍历,根据QMap中的属性来设置item歌词,这里的图元要自己实现,重写paint函数。


代码

解析歌词
  • 解析的时候把格式设置GB 2312,不然会是乱码。按行已经QMediaPlayer的时间格式读取数据,并全部存放到listLyricsMap中。
bool Lyrics::readLyricsFile(QString lyricsPath)
{listLyricsMap.clear();QFile file(lyricsPath);if (!file.open(QIODevice::ReadOnly | QIODevice::Text)){listLyricsMap.clear();return false;}QTextStream in(&file);in.setCodec("GB 2312");QString line;while (!in.atEnd()){line = in.readLine();analysisLyricsFile(line);}return true;
}bool Lyrics::analysisLyricsFile(QString line)
{if (line == NULL || line.isEmpty()){return false;}QRegExp timeRegExp("\\[(\\d+):(\\d+\\.\\d+)\\]");if (timeRegExp.indexIn(line) != -1){qint64 totalTime = timeRegExp.cap(1).toInt() * 60000 + // 分钟timeRegExp.cap(2).toFloat() * 1000; // 秒QString lyricText = line.mid(timeRegExp.matchedLength());listLyricsMap.insert(totalTime, lyricText);}return true;
}
歌词同步
  • 绑定信号
    connect(player, SIGNAL(positionChanged(qint64)),this, SLOT(updateTextTime(qint64)));
  • 读取对应listLyricsMap中的歌词

void MainWindow::updateTextTime(qint64 position)
{auto lrcMap = lyric->getListLyricsMap();qint64 previousTime = 0;qint64 currentLyricTime = 0;QMapIterator<qint64, QString> i(lrcMap);while (i.hasNext()){i.next();if (position < i.key()){QString currentLyric = lrcMap.value(previousTime);currentLyricTime = previousTime;break;}previousTime = i.key();}QStringList displayLyrics; // 存储将要显示的歌词列表。// 获取将要显示的歌词QMap<qint64, QString>::iterator it = lrcMap.find(currentLyricTime);// 显示前三句,如果it不是开头,就向前移动迭代器for (int i = 0; i < 3 && it != lrcMap.begin(); i++){--it;displayLyrics.prepend(it.value());}// 重置迭代器it = lrcMap.find(currentLyricTime);QString currntStr = QString();// 显示当前句if (it != lrcMap.end()){currntStr = QString("<font color='red'>" + it.value() + "</font>");displayLyrics.append(it.value());}// 显示后三句for (int i = 0; i < 3 && it != lrcMap.end(); i++){++it;if (it != lrcMap.end()){displayLyrics.append(it.value());}}//更新显示imageViewWindow->textChanged(displayLyrics);
}
歌词特效
  • 同步于上述歌词的改动,清空场景遍历特效m_textMapInfolst,重新进行图元绘制
void ImageViewWindow::textChanged(QStringList &lsit)
{m_scene->clear();for (int index = 0; index < m_textMapInfolst.size(); index++){const auto textInfoMap = m_textMapInfolst[index];GraphicsText *item = new GraphicsText();item->setStr(lsit[index]);item->setStrFont(textInfoMap["font"].toInt());item->setItemOffset(QPointF(textInfoMap["x"].toInt() + image_xoffset, textInfoMap["y"].toInt() + image_yoffset));item->setZValue(textInfoMap["index"].toInt());item->setOpacity(textInfoMap["opacity"].toFloat());m_items << item;m_scene->addItem(item);}
}
  • 自绘图元
void GraphicsText::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{painter->setFont(m_font);if (m_font.pointSize() > 20){painter->setPen(QPen(Qt::red));}else{painter->setPen(QPen(Qt::blue));}painter->drawText(offset, str);
}

总结

  • 实现这个功能遇到的问题挺多的,比如绘制文本的时候只有一根线显示,是要view设置setViewportUpdateMode(QGraphicsView::FullViewportUpdate),类似的问题挺多,还不好找。
  • 歌词特效这块还可以再扩展,字体,入场效果等都可以设置。
  • 当然这个功能还有很多可以优化的地方,BUG或许也不少,实现标题的功能的逻辑就是如上,可以作为参考。

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

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

相关文章

1121 祖传好运

solution 好运数&#xff1a;去除任意位末尾数位 所得到的数都满足能够被当前数位整除 #include<iostream> #include<string> using namespace std; int main(){int k, flag;string s;cin >> k;while(k--){flag 1;cin >> s;for(int i 1; i < s.…

【Linux】进程(3):运行,阻塞,挂起

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解Linux进程&#xff08;3&#xff09;&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 &#xff08;A&#xff09; 运行&#xff08;R&#xff09;进程切…

在gitlab上发布npm二进制文件

❝ 允许奇迹发生 ❞ 大家好&#xff0c;我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。 前言 还记得之前我们讲过如何在 npm 上发布二进制文件&#xff1f;吗。我们通过npm将我们之前在Rust 赋能前端-开发一款属于你的前端脚手架中生成Rust二进制文…

生物制药企业选择谷歌云的理由有哪些?

AI发展的这一年&#xff0c;科学家也紧随其后&#xff0c;透过AI拓展更多微观层面的生物学奥义&#xff0c;包括蛋白质折叠等。生物制药公司也加大了在药物研发领域的投入&#xff0c;其中一方面就是搭载云平台。那么&#xff0c;生物制药公司选择谷歌云的原因有哪些呢&#xf…

Python | Leetcode Python题解之第128题最长连续序列

题目&#xff1a; 题解&#xff1a; class Solution:def longestConsecutive(self, nums: List[int]) -> int:longest_streak 0num_set set(nums)for num in num_set:if num - 1 not in num_set:current_num numcurrent_streak 1while current_num 1 in num_set:curre…

【杂记-TCP协议三次握手、四次挥手始末详解】

一、三次握手前&#xff1a; 使用TCP协议的原因 TCP协议的目的是为了保证数据能在两端准确、连续的传输。 传输中使用Socket数据结构 TCP协议可使一个设备能同时与多个设备交互信息&#xff0c;它必须要保证不同传输通道之间不会产生串联或相互影响&#xff0c;所以TCP使用Soc…

Flutter基础 -- Dart 语言 -- 进阶使用

目录 1. 泛型 generics 1.1 泛型使用 1.2 泛型函数 1.3 构造函数泛型 1.4 泛型限制 2. 异步 async 2.1 异步回调 then 2.2 异步等待 await 2.3 异步返回值 3. 生成器 generate &#xff08;了解&#xff09; 3.1 同步生成器 sync* 使用 sync* 的场景 总结 3.2 异…

【C语言】编译与链接:深入理解程序构建过程

&#x1f525;引言 本篇将深入理解程序构建过程&#xff0c;以便于我们在编写程序的过程同时&#xff0c;理解底层是如何从程序的创建到生成可执行程序的。 &#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专…

MongoDB全文检索: 助力快速精准的文本搜索

MongoDB 全文检索是一种强大的功能&#xff0c;允许用户在文档中进行高效的文本搜索。它提供了对文本数据的复杂查询和索引支持&#xff0c;使得在大规模数据库中进行搜索变得更加快速和精确。本文将详细介绍 MongoDB 全文检索的基本语法、命令、示例、应用场景、注意事项&…

软件设计师-知识点

系统总线 系统总线分为三部分&#xff1a; 数据总线地址总线控制总线 主要作用&#xff1a;用于CPU、主存和外设部件之间的连接 DMA控制器/中断控制器(CPU) DMA控制器和中断控制器(CPU)发出的数据地址&#xff1a;主存物理地址 释&#xff1a;和I/O设备相关的数据都是直接读…

【前端面试常见问题】如何实现一个元素的水平垂直居中

目录 1. 使用 Flexbox 代码示例&#xff1a; 2. 使用 Grid 代码示例&#xff1a; 3. 绝对定位与transform 代码示例&#xff1a; 4. 表格布局方法 代码示例&#xff1a; 5. margin: auto 方法 代码示例&#xff1a; 在网页设计中&#xff0c;将元素精准地置于容器的中…

c++与c

命名空间的设置&#xff1a; 避免冲突 命名空间&#xff1a; 如果将变量全部定义在全局可能不安全&#xff0c;都可以进行修改。 如果将变量定义在局部&#xff0c;当出了大括号就不能使用。 所以说在定义一个命名空间的时候 定义函数&#xff0c;变量&#xff0c;命名空间…

软件3班20240603

经典 报错 404 大概率 就是 这图 的 路径 写错i了 package com.yanyu;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import jav…

现货白银的交易时间有多连贯?

国际市场上的现货白银优势很多&#xff0c;它除了具备国内同类型品种所不具备的数十倍资金杠杆外&#xff0c;也基本上实现了全天24小时不间断的交易时间&#xff0c;所以投资者可以在全天候连贯的行情中&#xff0c;寻找属于自己的交易获利机会。 但对于内地的投资者来说&…

从 Lerna 到现代化:原生 Workspaces 和 Changesets 的高效协作

1. 背景 最近新接手的一些 monorepo 的库项目&#xff0c;项目是用 lerna 进行管理的&#xff0c;使用过程中有一些不丝滑的地方&#xff0c;包括&#xff1a; lerna 版本过旧&#xff0c;使用 4.0.0&#xff08;现版本 8.1.3&#xff09;&#xff0c;功能差异过大&#xff0…

C#面:解释什么是闭包

在C#中&#xff0c;闭包是指一个函数可以访问并操作其外部作用域中的变量&#xff0c;即使在函数被调用之后&#xff0c;这些变量仍然可以保持其状态。闭包是通过将函数与其相关的引用环境捆绑在一起实现的。 当一个函数内部引用了外部作用域中的变量时&#xff0c;编译器会创…

C++14新特性

深入了解C14新特性 C14作为C11的增量更新&#xff0c;包含了许多对语言和标准库的改进和修正。这些改进使得C编程更加简洁和高效。本文将详细介绍C14的新特性&#xff0c;并通过代码示例来展示这些特性的应用。 1. 泛型Lambda表达式 在C11中&#xff0c;lambda表达式需要明确…

antd 动态增减表单项默认呈现一组表单项

在Ant Design&#xff08;antd&#xff09;中&#xff0c;你可以使用Form.List组件来动态增减表单项。 import React from react; import { Form, Input, Button, List } from antd;const Demo () > {const onFinish (values) > {console.log(Received values of form…

前端JS必用工具【js-tool-big-box】学习,检测密码强度

js-tool-big-box 前端工具库&#xff0c;实用的公共方法越来越多了&#xff0c;这一小节&#xff0c;我们带来的是检测密码强度。 我们在日常开发中&#xff0c;为了便于测试&#xff0c;自己总是想一个简单的密码&#xff0c;赶紧输入。但到了正式环境&#xff0c;我们都应该…

Homebrew、RVM、ruby、cocoapods

安装Homebrewe 方式1:公司源安装 方式2:国内源安装 /bin/ssh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrev.sh)” 方式3:官网源安装(有可能443): ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)…