javascript - 动态地将歌词文本添加到正在播放的音频文件中

Question

尝试实现一些基本的音乐播放器。我有一个单词对象数组，每个对象代表一个单词并使用下一个结构构建：
{
  text: "Hello"
  time: 2.24
  duration: 0.32
}

试图弄清楚在音乐播放时在屏幕上显示当前单词的正确方法是什么。这意味着，当音频文件在播放 2.24 秒后会说出“你好”文本时，我想将其显示在屏幕上。之后的词也一样，等等。

• 将 setInterval 设置为 10ms 将对数组进行一些检查，这对于 JS 线程来说是一项超级繁重的任务。听起来不是个好主意。
  例如，考虑创建一些 Map 对象，当时间是关键时，尝试使用 setInterval 捕获 Map[time]。也许迭代单词数组并在浏览器中创建一个 VTT 文件以将其发送到标签? 甚至可以以这种方式正确显示字幕吗？

有任何想法吗？建议？？也许一些大方向？有点坚持。

谢谢！！

标签： javascriptreactjshtml5-audio

Answer 1

检查一下rabbit-lyrics，可能对你有帮助： https ://github.com/guoyunhe/rabbit-lyrics 。