如何在网页上突出显示文本 - 严格时间 - 没有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屋！