如何在网页上突出显示文本 - 严格定时 - 一个没有 Flash 的卡拉 OK。啥技术选择？

Posted 2023-03-05

【中文标题】如何在网页上突出显示文本 - 严格定时 - 一个没有 Flash 的卡拉 OK。啥技术选择？

【英文标题】：How can I highlight text - strictly timed - a la Karaoke without Flash on a web page. What technology choice?如何在网页上突出显示文本 - 严格定时 - 一个没有 Flash 的卡拉 OK。什么技术选择？

【发布时间】：2012-01-03 13:04:23

【问题描述】：

我想显示一首诗的整个文本，然后根据预先确定的时间顺序突出显示文本。像卡拉OK，但没有任何音轨。然后，用户将能够以完全“正确”的速度阅读它。

我想我可以使用计时数据生成一个字幕轨道（例如，使用 Aegisum 之类的东西 - 尽管这在我的 Mac 上不断崩溃）。一行一行的东西，比如：

1 00:00:18,067 --> 00:00:20,067 一闪一闪的小星星

2 00:00:20,467 --> 00:00:22,467 我好想知道你是什么人

... 或者更好的是，一次一个单词或一个音节。

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

我的确切问题是我有点天真：最好使用什么技术？我不需要一个确切的解决方案，只需要一些关于我应该集中精力的指针。 html5（TTML）中的定时文本有什么我可以使用的吗？还是微笑？

【参考方案1】：

您可以使用 javascript 和 CSS 来完成您想要的。您可以将每个单词包装在一个跨度中，然后以适当的时间间隔将样式应用于跨度元素。如果您可以存储有关何时突出显示相应单词的时间信息，则可以使用 setInterval 在适当的时间添加样式。如果您想使用 HTML5 功能，您可能会考虑使用 Canvas 或 SVG 来启用更高级的动画。

【参考方案2】：

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

【参考方案3】：

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

这里有教程http://net.tutsplus.com/articles/news/a-look-at-popcorn/

这是一个演示http://danharper.me/demo/a-look-at-popcorn/

第二个链接底部有很多指向相关信息的链接。

【讨论】：

在查看演示之前，请务必阅读教程；否则这看起来像垃圾邮件:-)