如何在网页上突出显示文本 - 严格时间 - 没有Flash的拉卡拉OK。什么技术选择? [英] How can I highlight text - strictly timed - a la Karaoke without Flash on a web page. What technology choice?
问题描述
我想显示一首诗的全文,然后根据预先建立的时间顺序突出显示文字。像卡拉OK,但没有任何声轨。用户然后将能够以完全正确的速度读取它。
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.
我想我可以用定时数据生成一个字幕轨道(例如,像Aegisum这样的东西,虽然这会在我的Mac上崩溃)。一行一行,例如:
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
1 00:00:18,067 --> 00:00:20,067 Twinkle twinkle little star
2
00:00:20,467 - > 00:00:22,467
我不知道你是什么
2 00:00:20,467 --> 00:00:22,467 How I wonder what you are
...或更好,一个字或sylable一次。
... or better still, a word or sylable at a time.
我不想因为iPad / iPhone而使用Flash。
I don't want to use Flash for iPad/iPhone reasons.
我的确切问题是这是因为我有点幼稚:什么是最好的技术使用?我不需要一个确切的解决方案,只是一些指针在我应该集中我的努力。 HTML5中的定时文本(TTML)有什么我可以使用吗?或SMIL?
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?
推荐答案
您可以使用来自Mozilla的javascript库名为popcorn.js实现卡拉OK效果您可以从 http://mozillapopcorn.org/
You can achieve a karaoke effect using a javascript library from Mozilla called popcorn.js You can download it from http://mozillapopcorn.org/
这里是一个教程 http://net.tutsplus.com/articles/news/a-look-at -popcorn /
这是一个演示 http://danharper.me/demo/a-look-at-popcorn/
许多指向相关信息的链接第二个链接的底部。
Lots of links to related info at the bottom of the second link.
这篇关于如何在网页上突出显示文本 - 严格时间 - 没有Flash的拉卡拉OK。什么技术选择?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!