How can I highlight text - strictly timed - a la Karaoke without Flash on a web page. What technology choice?

Question

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?

Answer 1

Someone posted a karaoke display engine build in js: https://github.com/sk89q/ricekaraoke

Answer 2

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.