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…

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笔记专…

软件设计师-知识点

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

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…

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

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

FullCalendar日历组件集成实战(8)

背景 有一些应用系统或应用功能&#xff0c;如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件&#xff0c;但功能比较简单&#xff0c;用来做数据展现勉强可用。但如果需要进行复杂的数据展示&#xff0c;以及互动操作如通过点击添加事件&#xff0…

【算法每日一练】新月轩就餐

思路&#xff1a; 其实很容易想到是双指针或者双端队列。 我们设置一个type表示当前区间已经有了多少种厨师&#xff0c;同时还需要记录区间中每个元素出现的次数&#xff0c;然后比较棘手的是移动问题了&#xff0c;什么时候移动呢&#xff1f; 我们可以发现当区间当队头元…

手眼标定学习笔记

目录 标定代码&#xff1a; 手眼标定原理学习 什么是手眼标定 手眼标定的目的 eye in hand eye to hand AXXB问题的求解 标定代码&#xff1a; GitHub - pumpkin-ws/HandEyeCalib 推荐博文&#xff1a; https://zhuanlan.zhihu.com/p/486592374 手眼标定原理学习 参…

国产操作系统上Vim的详解01--vim基础篇 _ 统信 _ 麒麟 _ 中科方德

原文链接&#xff1a;国产操作系统上Vim的详解01–vim基础篇 | 统信 | 麒麟 | 中科方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇在国产操作系统上使用Vim的详解文章。Vim是一款功能强大且高度可定制的文本编辑器&#xff0c;广泛应用于编程和日常文本编辑中。…

记一次cms代码审计

000&#xff1a;前言 记录一次小型cms代码审计 001&#xff1a;任意文件删除 由于代码繁杂&#xff0c;不再一一展示 /app/controller/kindeditor.class.php 关键漏洞代码 public function delete() {$path ROOT_PATH.$_GET[pic];unlink($path);$flash M("flash&qu…

Postgre数据库初探

一、PostgreSQL介绍 PostgreSQL是以加州大学伯克利分校计算机系开发的POSTGRES&#xff0c; 版本 4.2为基础的对象关系型数据库管理系统&#xff08;ORDBMS&#xff09;。POSTGRES 领先的许多概念在很久以后才出现在一些商业数据库系统中。 PostgreSQL是最初的伯克利代码的开…

vscode编译c/c++找不到jni.h文件

解决办法: 一、下载JDK 访问Oracle官网的Java下载页面&#xff1a;Java Downloads | Oracle 选择适合您操作系统的JDK版本&#xff1a; 对于Windows&#xff0c;选择“Windows x64”或“Windows x86”&#xff08;取决于您的系统是64位还是32位&#xff09;。对于Linux&#…