SuperAPI AI 工具集

word-timed-karaoke-lyrics

编程与开发

查看项目

更新于 10-17 16:17

技能介绍

本技能围绕“逐词时间戳卡拉OK歌词”的渲染实现展开,核心是:歌词数据中每个词只存储开始时间(startTimeMs),没有结束时间;渲染器需要自行推断词的结束时间(一般取下一个词的开始时间,最后一个词取行结束时间或推测时长)。在此模型之上,每个词独立动画其“擦除/高亮”进度,而动画由 wall-clock 的 Animatable 驱动,而非直接读取播放时钟的值。

主要陷阱与处理方式:

  • 直接读取播放时钟进度会导致阶梯式跳变;改用 Animatable 在采样分数上 snap 并 animateTo(1f),但需注意回退后 Animatable 的原始值可能仍接近 1f 导致提前点亮。解决方法是进度从离散状态推导,只在确定有答案的两个边界上向 Animatable 喂值。
  • 词时长需要下限和形状:短词动画至少钳制到 150ms,并由下一词的 isPast 追赶;长音需使用两个增长曲线(短于参考长度用立方,长于参考长度用平方根),避免长音变平。
  • 字符级效果不要在每个字符边界直接开关,应计算连续衰减,使亮度在相邻字符间平滑过渡。
  • 发光效果若需溢出字符框,不要用 alpha 修饰符(会裁剪),应保持文本常驻并动画发光自身的颜色 alpha。
  • 解析失败时回退到与邻居相同形状的列表项,只是关闭高亮,而非使用更小/不同样式的项。
  • 跨渲染器复用“当前行”布尔值时需谨慎:一个渲染器中“无同步数据时全部高亮”的便捷默认,在另一个渲染器里可能导致整页同时发光。
  • 先检查“尚无活动行”,再检查“是否为活动行”,避免前奏时首行看起来活跃。
  • 活动行锚定不要用固定行偏移,行折叠时需锚定活动项并回退一个行高像素,而非一个列表索引。
  • 按 Char 拆分驱动逐字符效果仅对纯拉丁歌词安全;含组合标记或基本多文种平面外字符时会错误。若不需要逐字符时序,可改用 text-brush-shimmer-sweep 直接在 TextStyle 上动画渐变。
  • 富同步行的原始字符串仍含内联时间戳标记,次级消费者(如罗马化、分享)需先调用共享助手 stripRichSyncTimestamps() 移除标记。

验证方式:在仓库根目录运行 grep 命令检查关键代码结构,然后手动测试:富同步行擦除无阶梯、向后 seek 无词提前点亮、无同步歌曲无“活跃”外观。

适用场景:Kotlin/Compose 歌词渲染、音乐播放器歌词视图、卡拉OK效果实现。限制:资料未提供其他平台或语言的实现细节;部分陷阱的具体代码需参考源仓库。