没有使用Flash技术，在网页上如何像卡拉OK一样定时高亮文本？选择哪种技术？

Question

我想展示整首诗的全部文本，然后根据预先设定的时间序列突出显示文本。就像卡拉OK一样，但没有任何声音。用户可以按照“正确”的节奏阅读它。

我认为我可以生成一个字幕轨道（例如，使用Aegisum之类的软件 - 尽管这使我的Mac崩溃），其中包含时间数据。一行一行地，例如：

1 00:00:18,067 --> 00:00:20,067 Twinkle twinkle little star 2 00:00:20,467 --> 00:00:22,467 How I wonder what you are ... 或者更好的是，逐个单词或音节。

我不想使用Flash，因为iPad/iPhone的原因。

我的确切问题是：应该使用什么技术？我不需要一个确切的解决方案，只需要一些指针，告诉我应该集中精力的方向。HTML5中的定时文本（TTML）或SMIL是否有我可以使用的东西？

- Moorboy

---

对于那些看到这个答案的人：几乎所有的内容都已经被放弃了。 - mplungjan

Answer 1

有人发布了一个用js构建的卡拉OK显示引擎：https://github.com/sk89q/ricekaraoke

- Dan

Answer 2

您可以使用Mozilla的Javascript库popcorn.js实现卡拉OK效果。您可以从http://mozillapopcorn.org/下载它。

这里有一个教程，http://net.tutsplus.com/articles/news/a-look-at-popcorn/ 这里是一个演示 第二个链接底部还有很多相关信息的链接。

- TryHarder

---

在查看演示之前，请确保您阅读了教程；否则这将看起来像垃圾邮件 :-) - Aaron Digulla

Answer 3

你可以使用Javascript和CSS来实现你想要的效果。你可以将每个单词都用span包起来，然后在适当的时间间隔内对这些span元素应用样式。如果你能存储关于何时突出显示相应单词的时间信息，你可以使用setInterval在适当的时间添加样式。如果你想使用HTML5功能，你可以考虑使用Canvas或SVG来实现更高级的动画效果。

- tonyb