【免费下载链接】desktop
✨ Liner is a desktop player for Windows and Linux that lets you pull your music and playlists from other platforms into one clean app. No ads and bloated features, just synced lyrics and your tracks without anything getting in the way.
Liner 是一款面向 Windows 和 Linux 的开源桌面音乐播放器，它的核心亮点之一就是词级同步歌词（Word-Level Synced Lyrics）：歌词不仅逐行高亮，还会逐词点亮，呈现类似 KTV 的卡拉OK式动画。本文带你完整看懂 Liner 的 3 种歌词展示模式、动画背后的平滑填充原理，以及手动校准歌词偏移的小技巧。
一、歌词同步级别：Liner 如何判断"能同步到什么程度"
Liner 会从多个来源拉取歌词，并按 src/shared/contracts/lyrics.ts 中定义的标准对每一份候选歌词打分分级：
line_level：整行有时间戳，可以逐行高亮word_level：每个词都有起止时间，可以逐词点亮syllable_level：精确到音节，动画最细腻
支持解析的格式包括 plain（纯文本）、lrc（标准逐行时间戳）、ttml、qrc（逐词时间戳）和 richsync（JSON 词级数据），解析入口在 src/features/lyrics/engine/lyricsParser.ts。简单说：歌词源越精确，你看到的动画就越接近 KTV 逐字滚动。
二、3 种展示模式逐一拆解
模式 1：全屏播放器里的 Braccato 同步歌词
进入全屏播放页后，右侧是完整的同步歌词面板，由 src/features/player/ui/FullscreenPlayer.tsx 驱动，核心特性：
- 跟随滚动：当前行自动居中，播放推进时歌词平滑滚动
- 手动翻阅：滚轮或触摸划动即可自由翻歌词，约 6 秒无操作后自动回到跟随模式
- 点击跳转：点击任意一行直接 seek 到对应时间点
- 纯音乐提示：没有歌词时会显示
[INSTRUMENTAL]占位，而不是空白
模式 2：macOS Touch Bar 的卡拉OK词级滚动条
这是 Liner 最"炫"的模式。在 src/features/touchbar/hooks/useTouchBarSync.ts 中，当前歌词行会被拆成带 timeMs/endMs 的词序列，再交给 Touch Bar 渲染一个居中滚动条：
- 音节分组：算法检查相邻音节之间是否有空格，把同一单词的音节拼回完整词（参考 src/features/lyrics/WORD_LEVEL_LYRICS_REFERENCE.md）
- 活跃词追踪：实时比对播放进度，找到"正在唱"的那个词
- 居中转场：每到一个新词，滚动条以
cubic-bezier(0.16, 1, 0.3, 1)缓动曲线把该词移到正中央，当前词纯白、其余词 30% 透明度
效果就是 KTV 里那种"当前词居中、其余词变暗"的经典卡拉OK体验。
模式 3：全屏播放器内的逐词渐变填充动画
即使不看 Touch Bar，全屏页面本身也有词级动画。它由 src/features/lyrics/hooks/useLyricsAnimator.ts 实现，原理很巧妙：
- 用
requestAnimationFrame每帧估算音频位置（播放中用锚点外推，避免音频回调延迟导致跳帧） - 对当前行里的每个词，计算
progress = (当前时间 - 词起点) / 词时长，得到 0~100% 的完成度 - 用一条从左到右的
linear-gradient背景 + 文字裁剪，让词从左到右一点点被"点亮"，就像荧光笔跟着人声涂色
这就是"卡拉OK式动画"的核心：不是整词闪白，而是词内连续渐变，视觉上丝滑无跳动。
三、歌词来源切换与偏移校准
全屏页顶部悬浮着一个"歌词小岛"控制条，由 src/features/lyrics/ui/LyricsProviderIsland.tsx 实现：
| 操作 | 说明 |
|---|---|
| ⬅️ ➡️ 箭头 | 在多个歌词来源之间循环切换，显示 1/N 序号 |
- / + 按钮 | 每次调整 ±0.1 秒偏移，快速肉眼校准 |
| 点击时间徽标 | 展开偏移面板：支持 ms/s 单位输入、↑↓ 键微调、±0.1s~±1s 快捷按钮 |
| 重置按钮 | 一键把偏移归零 |
偏移会按歌曲分别记忆（保存在 src/features/lyrics/store/lyricsStore.ts 的 trackOffsets 中），下次播放同一首歌自动生效——不同版本歌曲的音轨时长差异问题也就解决了。🎯
四、快速上手建议
- 打开任意歌曲的全屏播放页，确认右侧歌词是否逐行高亮
- 若歌词整体偏快/偏慢，用顶部小岛的
-+微调，偏差 0.1s 以内体感最自然 - 多个来源时优先选带词级时间戳（
qrc/richsync）的版本，动画才最细腻 - macOS 用户可留意 Touch Bar 上的居中卡拉OK滚动条，那是词级同步的最佳展示位
五、相关源码速查
- 同步级别与歌词格式定义：src/shared/contracts/lyrics.ts
- 歌词解析与词级时间戳提取：src/features/lyrics/engine/lyricsParser.ts
- 逐词渐变填充动画引擎：src/features/lyrics/hooks/useLyricsAnimator.ts
- 全屏歌词面板与跟随滚动：src/features/player/ui/FullscreenPlayer.tsx
- Touch Bar 词级滚动同步：src/features/touchbar/hooks/useTouchBarSync.ts
- 居中卡拉OK滚动参考文档：src/features/lyrics/WORD_LEVEL_LYRICS_REFERENCE.md
至此，Liner 的词级同步歌词体系——从数据分级、三种展示模式到卡拉OK式动画与偏移校准——就全部讲完了。打开一首你喜欢的歌，体验一下"歌词追着人声跑"的感觉吧。🎵
【免费下载链接】desktop
✨ Liner is a desktop player for Windows and Linux that lets you pull your music and playlists from other platforms into one clean app. No ads and bloated features, just synced lyrics and your tracks without anything getting in the way.
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
