音乐播放器歌词的逐字渲染效果

最新推荐文章于 2025-06-14 20:36:00 发布
最新推荐文章于 2025-06-14 20:36:00 发布
阅读量4k 收藏 17
点赞数 3
CC 4.0 BY-SA版权
分类专栏： View绘制 文章标签： android 播放器 歌词 逐字渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mwping1324/article/details/46551131
本文介绍如何在Android应用中实现音乐播放器歌词的逐字渲染效果，包括逐字染色、歌词居中和逐行上移的关键点。通过Canvas的clipRect方法实现染色效果，通过计算画布高度和字体高度使歌词居中，利用ValueAnimator动画实现歌词上移动画。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

受到Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器的启发，决定用这个来仿制大多数音乐播放器的逐字染色效果，效果图如下：

效果图

关键点剖析一：逐字染色效果

关键代码如下：

public boolean clipRect(int left, int top, int right, int bottom)

这是Canvas的clipRect方法，这个方法可以理解为要在整个画布上剪切一块矩形来绘制内容，此矩形以外的内容全部不绘制，也就是形成了上图的断层效果。其中left，top，right，bottom分别是左，上，右，下四个端点，right也就是效果图上的断层位置。

实现染色效果的思路是，用clipRect将一行文字剪切成两部分，前半部分用绿色，后边部分用黑色，根据进度的变化，改变这个剪切点的位置。

关键点剖析二：当前播放歌词的居中效果

这就是要找到画布的垂直方向上的居中位置。在View的onMeasure方法中获取整个画布的高度getMeasuredWidth()，

最低0.47元/天 解锁文章

200万优质内容无限畅学
[Angular实战网易云]——15、歌词渲染
虽菜但瘾
01-01 639
歌词 歌词初始化 播放面板左侧展示歌单歌曲，右侧展示当前歌曲歌词，并且实现和左侧相通的滚动条。因此要根据ID获取当前歌曲歌词。 song.service.ts // 根据ID获取歌曲歌词 getLyric (id: number): Observable<Lyric> { const params = new HttpParams().set('id', id.toString()); return this.http.get(this.uri
android 逐字歌词,Android实现文字逐字显示出来
weixin_32541333的博客
05-25 732
先上Android实现文字逐字显示出来效果图，供大家参考，具体内容如下可以采用自定义TextView的方式去实现，也可才用定时更新文字显示，思路是让TextView每隔一秒显示以一个字符串(并非每一秒多出来一个汉字)，那么就简单了，可以开启一个线程，那么线程主要方法如下：public static void startTv(final int n) {new Thread(new Runnable...
android 歌词逐渐高亮,Android--MediaPlayer音乐播放器歌词随时间高亮显示
weixin_29188759的博客
05-26 299
package com.mrzhu.hightlight;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.text.Spannable;impor...
Android 实现歌词文字逐渐高亮效果
qq_41740162的博客
06-04 813
Canvas是可以是有多层绘制效果组成的,我们可以现在底层绘制我们的基础文字效果,然后再上层绘制我们的高亮效果
开源免费的歌词下载神器，一键搞定逐字逐行！
2501_90568545的博客
06-14 478
如果对歌词满意，点击“保存歌词到目录”按钮，即可将歌词轻松保存到本地。在众多歌词下载软件中，很多已经失效，但 LDDC 始终保持着良好的可用性，堪称歌词下载的“常青树”。此外，LDDC 的歌词格式默认为“逐字”，如果需要“逐行”显示，用户也可以根据自己的喜好进行切换。这款软件支持某秋、某狗、某云等主流音乐平台的歌词下载，用户可以根据需要选择特定平台的下载接口，也可以通过聚合搜索功能，同时从多个平台获取歌词，极大地提高了搜索效率。值得注意的是这里的歌词格式，默认下是“逐字”的，想要“逐行”可以自己选择。
android shader线性渲染（类似与歌词逐字同步）
05-08
用android shader线性渲染实现类似与歌词逐字变色同步的效果
Android 歌词滚动效果（歌词逐个与逐渐变色）可换行
gaoqingliang521的专栏
04-14 2286
前言： 最近公司要求实现一个 讯飞语音阅读文字，文字根据阅读速度逐个变色的功能。先上个图看下效果。 （由于工作非常紧张，所以就把测试的图贴过来了，兄弟们将就看） 直接上代码： ColorTrackView.java(主要就是这个自定义控件) import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.gra..
酷狗音乐逐字匹配歌词是如何做到的
latun4212的博客
01-01 3514
想酷狗播放器那样逐字匹配歌词是如何做到的，碰到这个问题了，查了好长时间，都没什么资料，感觉很棘手啊，有会的大神们，请指导指导
Android视频滚动字幕逐字显示控件（类似K歌歌词逐字播放效果）
11-29
Android视频字幕滚动逐字显示效果控件，视频字幕逐字滚动显示效果,类似K歌歌词逐字播放效果，最近几年视频越来越火爆，大家对视频对字幕也要求比较高，很多需求类似K歌的歌词播放效果，也就是字幕逐字播放显示效果，字幕滚动效果。
高仿酷狗音乐歌词逐字播放
04-05
接下来，动画是实现逐字渲染效果的关键。在iOS上，我们可以使用Core Animation框架来创建动画效果。LYPlayLyric可能采用了CAAnimation或者UIView动画来实现歌词字幕的动态展示。这包括设置动画的持续时间、延迟、...
玩转前端-歌词滚动（html、js、css）
01-12
我们可以监听音乐播放器的`timeupdate`事件，根据当前播放时间计算出对应的歌词位置，然后用JavaScript修改容器的`transform`属性。这里可能需要用到`requestAnimationFrame`来实现平滑的滚动效果： ```javascript ...
android krc 歌词逐字同步显示
09-11
openkrc是android手机歌词同步显示应用 功能： 1.krc歌词解密、解压、解析 2.歌词逐字同步显示 demo使用说明： 1.将apk安装到手机 2.在sd卡新建openkrc文件夹，并将openkrc_下的文件拷贝到openkrc文件夹 3.运行app 代码说明 1.参考了openlrc,并结合csdn上某应用开发 2.代码内有详细说明 3.有任何问题或者建议或者优化，请email:sjz6578@163.com
Android实现歌词渐变色和进度的效果
01-20
要用TextView使用渐变色，那我们就必须要了解LinearGradient（线性渐变）的用法。 LinearGradient的参数解释 LinearGradient也称作线性渲染，LinearGradient的作用是实现某一区域内颜色的线性渐变效果，看源码你就知道他是shader的子类。 它有两个构造函数 public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile) public LinearGradient (float x0, f
不错的文字特效，逐字变色效果
10-30
不错的文字特效，逐字变色效果
android 音乐播放歌词高亮自动滚动，歌词换行等功能完美解决方案
09-14
歌词滚动项目完美解决方案 功能： 1、自动加载MP3文件和歌词文件，支持assets和SD卡加载文件， 2、准确读出MP3文件的总长时间； 3、播放MP3文件，歌词高亮，自动滚动歌词； 4、支持点击播放，点击某行歌词则播放该行MP3对于音频内容； 5、支持seekbar 拖动播放，则歌词文件自动跳转到对于节点； 6、支持文字歌词换行、歌词大小自定义、歌词颜色自定义； 7、定制滚动模式，逐行滚动或者逐页滚动；
Android实现文字逐字显示出来
08-30
主要为大家详细介绍了Android实现文字逐字显示出来效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android编程歌词显示,Android 音乐播放器实现歌词显示
weixin_29038537的博客
05-25 1487
Android 音乐播放器实现歌词显示LrcHandle.java：package com.example.welcome;import java.io.BufferedReader;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.IOExc...
html5音乐背景歌词滚动,html如何制作滚动歌词
weixin_39717598的博客
06-03 2066
html制作滚动歌词的方法：首先在标签里面写好编码格式，引入css样式和jQuery；然后放置播放器，代码为【】。本教程操作环境：windows7系统、html5版，DELL G3电脑。html制作滚动歌词的方法：首先我们创建一个html文件，名字随便取，比如：index.html,这个简单，不用多说。不着急开始写代码，我们在创建一个css文件，不妨就命名为musicplay.css，js的话我们...
OC-类似歌词字体颜色逐字变化的实现方法
lyz0925的博客
11-01 696
预期实效果图如下： 如上图所示，文字的颜色会根据时间的移动，逐字变成绿色。 实现方法： （1）调用方法： 　　用void UIRectFillUsingBlendMode(CGRect rect, CGBlendMode blendMode) 这个方法来实现 （2）实现逻辑: 　　自定义Label，通过label的drawRect：方法 获取Label的图...
如何使用QT在音乐播放器中实现歌词同步显示功能
最新发布
07-20
<think>我们参考引用内容，特别是引用[1][2][3]中关于歌词同步显示的方法。 根据引用[3]，歌词信息可能存储在MP3文件的ID3标签中（v2版本），也可能需要从网络API获取（如引用[1]中提到的酷狗API）。 引用[2]中提到了歌词同步、滚动和特效的实现方法，包括存储每句歌词的属性（字体大小、位置、透明度等）。 实现歌词同步显示功能的一般步骤： 1. 获取歌词：从本地文件（如MP3的ID3v2标签）或网络API解析歌词文件（如LRC格式）。 2. 解析歌词：将歌词文件解析为时间点和歌词文本的列表。LRC格式的歌词示例： [00:00.00]歌曲名 [00:01.00]第一句歌词 [00:05.00]第二句歌词 3. 同步显示：在播放音乐时，根据当前播放时间，找到对应的歌词行并高亮显示，同时控制歌词滚动。 4. 特效实现：可以通过改变字体大小、颜色、位置和透明度等属性来实现歌词的渐变效果（如卡拉OK效果）。 具体实现思路（参考引用[2]）： - 使用一个QMap或QList来存储每句歌词的信息，包括时间点、歌词文本以及用于显示效果的属性（如字体大小、位置、透明度等）。 - 在播放过程中，使用定时器不断更新当前歌词的位置和效果，实现滚动和渐变。 以下是基于QT的实现步骤： 步骤1：获取歌词 - 如果歌词存储在本地MP3文件的ID3v2标签中，可以使用taglib等库来提取（引用[3]）。 - 或者，从网络API获取歌词（如引用[1]中酷狗API返回的歌词信息），可能是LRC格式的字符串。 步骤2：解析歌词（以LRC格式为例） - 读取LRC文件或字符串，按行解析。 - 使用正则表达式匹配时间标签，例如：[分钟:秒.百分秒]。 - 将时间转换为毫秒，并存储每句歌词的时间点和文本。 步骤3：设计歌词显示控件 - 可以自定义一个QWidget或QGraphicsView来显示歌词，并实现滚动和特效。 - 在控件中，根据当前播放时间，确定当前应该高亮显示的歌词行，并调整前后歌词行的位置和样式。 步骤4：同步歌词 - 在播放器的播放进度改变时（例如通过QMediaPlayer的positionChanged信号），更新当前歌词。 - 根据当前时间，在存储的歌词列表中查找对应的行（如果当前时间在某个时间点范围内，则显示该行）。 步骤5：实现滚动和特效 - 引用[2]中提到，可以预先为每句歌词设置属性（如字体大小、位置、透明度等），形成一个QMap列表。 - 在绘制歌词时，根据当前时间与歌词行的时间差，计算并动态调整这些属性，实现渐变效果。 - 例如，当前歌词行字体最大，颜色最亮，位置居中；前一句和后一句则逐渐变小、变暗，位置向上和向下移动。 步骤6：绘制歌词 - 在自定义控件的paintEvent中，遍历歌词列表，根据计算出的属性（位置、字体、颜色、透明度）绘制每一句歌词。 下面是一个简化的代码框架，用于实现歌词同步显示： 1. 定义歌词行结构体： ```cpp struct LyricLine { qint64 time; // 时间点（毫秒） QString text; // 歌词文本 }; ``` 2. 解析歌词文件（示例函数）： ```cpp QList<LyricLine> parseLyrics(const QString &lyricContent) { QList<LyricLine> lyrics; QRegularExpression regex("\\[(\\d+):(\\d+).(\\d+)\\](.*)"); QTextStream stream(lyricContent.toUtf8()); while (!stream.atEnd()) { QString line = stream.readLine(); QRegularExpressionMatch match = regex.match(line); if (match.hasMatch()) { int min = match.captured(1).toInt(); int sec = match.captured(2).toInt(); int msec = match.captured(3).toInt() * 10; // 百分秒转毫秒（假设是两位数，如00表示0毫秒，50表示500毫秒） qint64 totalTime = min * 60000 + sec * 1000 + msec; lyrics.append({totalTime, match.captured(4)}); } } return lyrics; } ``` 3. 自定义歌词显示控件（简化版）： ```cpp class LyricWidget : public QWidget { Q_OBJECT public: LyricWidget(QWidget *parent = nullptr) : QWidget(parent) { // 设置背景透明 setAttribute(Qt::WA_TranslucentBackground); // 初始化字体 m_font.setFamily("Microsoft YaHei"); m_font.setPointSize(12); } void setLyrics(const QList<LyricLine> &lyrics) { m_lyrics = lyrics; update(); } void setCurrentPosition(qint64 position) { m_currentPosition = position; update(); } protected: void paintEvent(QPaintEvent *event) override { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // 如果没有歌词，显示提示 if (m_lyrics.isEmpty()) { painter.setFont(m_font); painter.drawText(rect(), Qt::AlignCenter, "暂无歌词"); return; } // 找到当前时间对应的歌词行索引 int currentIndex = -1; for (int i = 0; i < m_lyrics.size(); ++i) { if (m_lyrics[i].time <= m_currentPosition && (i == m_lyrics.size()-1 || m_lyrics[i+1].time > m_currentPosition)) { currentIndex = i; break; } } // 绘制歌词 int centerY = height() / 2; painter.setPen(Qt::white); for (int i = 0; i < m_lyrics.size(); ++i) { // 根据与当前行的距离设置不同的样式 int distance = qAbs(i - currentIndex); if (distance > 3) continue; // 只显示当前行附近的行 // 设置字体大小和透明度 QFont font = m_font; if (distance == 0) { font.setPointSize(16); // 当前行大一点 painter.setPen(QColor(255, 0, 0)); // 当前行红色 } else { font.setPointSize(12 - distance * 2); painter.setPen(QColor(255, 255, 255, 200 - distance * 50)); // 其他行逐渐变淡 } painter.setFont(font); // 计算y坐标：当前行在中间，其他行按距离偏移 int y = centerY + (i - currentIndex) * 40; painter.drawText(rect().adjusted(0, y, 0, y), Qt::AlignCenter, m_lyrics[i].text); } } private: QList<LyricLine> m_lyrics; qint64 m_currentPosition = 0; QFont m_font; }; ``` 4. 在主窗口中使用： - 将LyricWidget添加到界面上。 - 连接播放器的positionChanged信号到LyricWidget的setCurrentPosition槽。 - 在获取到歌词后，调用setLyrics设置歌词。 注意：以上代码只是一个简单示例，实际应用中可能需要更复杂的特效和滚动效果，以及处理歌词文件的各种格式（如多时间标签等）。 此外，引用[2]中提到了使用QMap存储每句歌词的属性，我们可以扩展LyricLine结构体来包含这些属性，并在解析后初始化，然后在绘制时使用。但上述示例中，我们动态计算了样式，也可以预先计算好每句歌词在不同时间点的属性。 对于更高级的卡拉OK效果（逐字变色），需要解析每个字的时间点，这需要支持逐字时间标签的歌词格式（如KRC），解析会更复杂，但原理类似：根据当前时间计算每个字的变色进度。 由于时间有限，以上实现的是逐行歌词同步和简单特效。如果需要逐字特效，则需要在LyricLine中存储每个字的时间点，并在绘制时拆分每个字，根据时间差绘制不同颜色。 希望这个回答对你有帮助。 §§相关问题§§ 1. 如何解析LRC格式的歌词文件？ 2. 如何实现歌词的逐字变色（卡拉OK效果）？ 3. 如何从MP3文件中提取嵌入的歌词信息？ 4. 如何优化歌词显示的性能？ 5. 如何处理网络歌词获取和本地歌词存储？</think>### QT音乐播放器歌词同步显示功能实现指南 在QT中实现歌词同步显示功能主要涉及歌词解析、时间同步和动态渲染三个核心环节。以下是详细实现步骤： #### 一、歌词获取与解析 1. **歌词来源**（参考引用[1][3]） - 从MP3文件的ID3v2标签中提取嵌入式歌词 - 通过酷狗等音乐API获取LRC格式歌词（JSON解析） - 加载本地LRC歌词文件 2. **LRC歌词解析**（关键代码） ```cpp QMap<qint64, QString> parseLrc(const QString& lrcPath) { QMap<qint64, QString> lyricMap; QFile file(lrcPath); if (file.open(QIODevice::ReadOnly)) { QTextStream stream(&file); while (!stream.atEnd()) { QString line = stream.readLine(); QRegularExpression regex("\\[(\\d+):(\\d+).(\\d+)\\](.*)"); QRegularExpressionMatch match = regex.match(line); if (match.hasMatch()) { int min = match.captured(1).toInt(); int sec = match.captured(2).toInt(); int msec = match.captured(3).toInt() * 10; qint64 time = min * 60000 + sec * 1000 + msec; lyricMap[time] = match.captured(4); } } } return lyricMap; } ``` #### 二、歌词同步与滚动 1. **时间同步机制** ```cpp // 连接播放器进度信号 connect(player, &QMediaPlayer::positionChanged, [&](qint64 position){ int currentIndex = -1; auto keys = lyricMap.keys(); for (int i = 0; i < keys.size(); ++i) { if (position >= keys[i] && (i == keys.size()-1 || position < keys[i+1])) { currentIndex = i; break; } } updateLyricDisplay(currentIndex); }); ``` 2. **歌词动态渲染**（参考引用[2]） ```cpp void LyricWidget::paintEvent(QPaintEvent*) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // 当前歌词特效（居中放大） painter.setFont(QFont("Microsoft YaHei", 16)); painter.setPen(QColor(0, 150, 255)); painter.drawText(rect().center() - QPoint(0,30), currentLyric); // 前后歌词渐变效果 for(int i = -3; i <= 3; ++i) { if(i == 0) continue; int alpha = 200 - abs(i)*50; // 透明度递减 painter.setPen(QColor(255, 255, 255, alpha)); painter.setFont(QFont("Microsoft YaHei", 14 - abs(i)*2)); painter.drawText(rect().center() - QPoint(0, 30 + i*40), getLyric(currentIndex + i)); } } ``` #### 三、高级特效实现 1. **卡拉OK逐字染色** ```cpp // 在歌词行内计算染色比例 QString highlighted = lyric.left(karaokePos); QString normal = lyric.mid(karaokePos); painter.setPen(highlightColor); painter.drawText(..., highlighted); painter.setPen(normalColor); painter.drawText(..., normal); ``` 2. **属性动画**（参考引用[2]） ```cpp QPropertyAnimation* anim = new QPropertyAnimation(this, "opacity"); anim->setDuration(500); anim->setStartValue(0.2); anim->setEndValue(1.0); anim->start(); ``` #### 四、性能优化 1. 预渲染歌词文本 2. 使用QGraphicsView实现硬件加速 3. 歌词分帧加载（大数据量时） > **注意事项**： > 1. 处理网络歌词时需异步加载（QNetworkAccessManager） > 2. 支持多种歌词格式转换（LRC/KRC） > 3. 添加歌词缓存机制减少IO操作 > 4. 考虑高DPI屏幕的适配问题 完整实现可参考GitHub项目： [基于Qt的网络音乐播放器](https://github.com/xxx)[^1]
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值