[生活娱乐] 律动歌词 - 跟着旋律呼吸的动态歌词播放器（Demo 作品帖）

TRAE AI 创造力大赛 【大赛初赛专区】
1

1. Demo 简介

作品名称： 律动歌词 —— 跟着旋律呼吸的动态歌词播放器

是什么： 一个基于 Web Audio API 的沉浸式音乐播放器，通过实时音频分析驱动歌词动态变换，让歌词跟着旋律"呼吸"。支持多源逐字歌词同步、词组级动态特效、海报级视觉设计。

面向谁： 喜欢在听歌时享受沉浸式视觉体验的音乐爱好者、短视频创作者、KTV 用户。

核心功能：

  1. 多源逐字歌词引擎 — 聚合网易云 YRC、酷狗 KRC、LRCLIB 三源，首创 LRC-YRC 时间轴智能对齐算法，16首推荐歌曲 100% 逐字歌词覆盖。

  2. 跟着旋律呼吸的动态歌词 — 实时分析音频频谱能量，歌词随旋律动态发光、缩放、变色。词组级特效（非呆板卡拉OK逐字），歌曲段落自动切换主题色（intro→蓝紫, chorus→红金, climax→橙红）。

  3. 海报级动态视觉 — 动态渐变光球随音频能量漂浮缩放，电影感暗角 + 胶片噪点纹理，每帧都像海报一样漂亮。

image
image1920×869 155 KB

2. Demo 创作思路

灵感来源： 在使用主流音乐 App 时发现三个痛点：① 歌词是静态的，和旋律没有视觉关联；② 逐字歌词效果要么没有，要么像卡拉OK一样呆板；③ 视觉效果千篇一律，缺乏沉浸感。

想解决的问题：

  • 静态歌词与音乐的视觉割裂：歌词只是文字显示，不能跟旋律"动"起来
  • 逐字歌词覆盖率低：网易云仅约6%的歌曲有YRC逐字歌词
  • 歌词不同步：不同平台歌词时间轴不一致
  • 卡拉OK效果生硬：逐字高亮过于机械，缺乏艺术感
  • 短视频创作门槛高：制作歌词MV需要专业软件

为什么做这个方向： 报名贴中提出的核心理念是"AI 实时音频分析 → 动态歌词变换"，让歌词跟着旋律呼吸。通过多源歌词聚合 + 实时频谱分析 + 词组级动画，可以让每一句歌词都像在跟着音乐"呼吸"，同时解决歌词覆盖率和视觉体验问题。

image
image1649×869 73.3 KB

3. Demo 体验地址

在线体验： http://music.apps.samblade.top/

本地部署： http://localhost:8080

部署方式：

music-player.zip (67.2 KB)

cd music-player
node server.js
# 浏览器打开 http://localhost:8080

使用方法：

  1. 点击「推荐歌单」浏览精选歌曲
  2. 点击任意歌曲开始播放
  3. 享受逐字歌词同步 + 动态视觉效果
  4. 可搜索其他歌曲（支持网易云曲库）

4. TRAE 实践过程

4.1 项目架构设计

使用 TRAE 进行完整的架构设计和开发规划：

  • 技术栈选型：Node.js 后端 + 原生 HTML/CSS/JS 前端（无框架依赖）
  • 核心模块：音频引擎、歌词引擎（多源聚合）、粒子系统、UI 交互层
  • 方案设计
    image
    image1920×1020 247 KB

4.2 关键开发步骤

步骤一：多源逐字歌词聚合引擎

通过 TRAE 调研了网易云 YRC、酷狗 KRC、QQ音乐 QRC、酷我 LRCX 四个平台的逐字歌词API。最终集成网易云 YRC + 酷狗 KRC + LRCLIB 三源，覆盖率从6%提升到100%。

酷狗 KRC 解密流程（三步）：base64解码 → 去除4字节 → XOR异或解密（固定密钥）→ zlib解压

步骤二：LRC-YRC 时间轴智能对齐

发现 LRC（网易云，与音频同源）和 KRC（酷狗，不同版本）时间轴不一致。通过文本归一化匹配前5句歌词，计算中位数偏移量进行全局校正。实测「起风了」偏差从-2.72s校正到+0.08s。

步骤三：跟着旋律呼吸的动态歌词

将逐字歌词按时间间隙（>150ms）自动分组为「节奏段」，整组字共享一个特效状态（singing/sung/pre-sing）。实时分析音频频谱，歌词随能量动态发光、变色，效果像歌词MV而非卡拉OK。

image
image1448×815 73.8 KB

步骤四：海报级视觉重构

三层视觉体系：动态渐变光球背景（随音频能量漂浮）+ 电影暗角 + 胶片噪点纹理。歌词使用渐变文字（白→淡紫→暖金→淡粉），歌曲段落自动切换主题色。

步骤五：歌词同步优化

修复三个叠加的同步问题：①逐行插值导致时间轴错乱 ②double-offset双重偏移 ③380ms动画延迟。优化后歌词切换延迟从380ms降至130ms，轮询间隔从100ms降至50ms。

image
image1448×815 72.9 KB

image
image1448×815 40.8 KB

image
image1658×815 223 KB

4.3 关键技术突破

技术点 解决方案 效果
逐字歌词覆盖率 多源聚合（YRC+KRC+LRCLIB） 6% → 100%
歌词时间偏差 LRC-YRC智能对齐算法 偏差 -2.72s → +0.08s
卡拉OK效果生硬 词组级分组动画 + 实时频谱驱动 跟着旋律呼吸
歌词滞后 动画延迟优化 + 轮询优化 480ms → 180ms
视觉单调 海报级动态视觉体系 每帧都像海报

4.4 Session ID

以下为 TRAE 开发过程中的 Session ID（双击 TRAE 对话复制）：

Session 1: 6a504e50a7c13363c75d6a6b 方案设计
Session 2: 6a4bbd1cf92e5ce2bf3abe7f 代码迭代实现
Session 3: cb391a64eefc43938712cb5be9642612 片头优化
Session 4: 6a564fa4025357c264b9c4f0 项目部署

报名贴链接

TRAE AI 创造力大赛报名贴

技术栈

  • 前端： 原生 HTML/CSS/JavaScript（无框架，单文件 3000+ 行）
  • 后端： Node.js（Express-style HTTP server）
  • 音频： Web Audio API + AnalyserNode 频谱分析
  • 可视化： Canvas 2D 粒子系统
  • 歌词源： 网易云音乐 API + 酷狗音乐 API + LRCLIB