我怎样才能在网页上突出显示文本（严格定时），而不使用 Flash，就像卡拉 OK 一样。选择什么技术？
我想显示一首诗的全文，然后根据预先设定的时间顺序突出显示文本。类似于卡拉 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) 有什么我可以使用的吗？还是SMIL？
I would like to display the whole text of a poem, then have text highlighted according to a pre-established time sequence. Something like Karaoke, but without any sound track. A user would then be able to read it at exactly the "right" tempo.
I figure I can generate a subtitle track (for example, with something like Aegisum - although this keeps crashing on my Mac) with the timing data. Something line by line, such as:
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
... or better still, a word or sylable at a time.
I don't want to use Flash for iPad/iPhone reasons.
My exact question is this as I'm somewhat naive: What would be the best technology to use? I don't need an exact solution, just some pointers on where I should concentrate my efforts. Does Timed Text in HTML5 (TTML) have anything I could use on this? Or SMIL?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
有人发布了用 js 构建的卡拉 OK 显示引擎： https://github.com/sk89q/ricekaraoke
Someone posted a karaoke display engine build in js: https://github.com/sk89q/ricekaraoke
您可以使用 Javascript 和 CSS 来完成您想要的任务。您可以将每个单词包装在一个跨度中，然后以适当的时间间隔将样式应用到跨度元素。如果您可以存储有关何时突出显示相应单词的计时信息，则可以使用 setInterval 在适当的时间添加样式。如果您想使用 HTML5 功能，您可以考虑使用 Canvas 或 SVG 来启用更高级的动画。
You can use Javascript and CSS to accomplish what you want. You can wrap each word in a span, then apply styles to the span elements at the proper timing intervals. If you can store timing information about when you want corresponding words highlighted, you can use setInterval to add styles at the appropriate times. If you want to use HTML5 features, you might look into using Canvas or SVG to enable more advanced animations.
您可以使用 Mozilla 的名为 popcorn.js 的 javascript 库实现卡拉 OK 效果。您可以从 http://mozillapopcorn.org/< 下载它/a>
这是一个教程 http://net.tutsplus.com/articles/news/a-look-at-popcorn/
这是一个演示http://danharper.me/demo/a-look-at-popcorn/
第二个底部有很多相关信息的链接关联。
You can achieve a karaoke effect using a javascript library from Mozilla called popcorn.js You can download it from http://mozillapopcorn.org/
Here is a tutorial http://net.tutsplus.com/articles/news/a-look-at-popcorn/
Here is a demo http://danharper.me/demo/a-look-at-popcorn/
Lots of links to related info at the bottom of the second link.