CODEWITHSUNDEEP
htmlsynchronizationhtml5-audio
eozzy
eozzy

Reputation: 68720

Questions about HTML5 audio

<audio src="http://upload.wikimedia.org/wikipedia/commons/8/82/Riddle_song.ogg"></audio>

<ul id="lyrics">
    <li>line 1</li>
    <li>line 2</li>
    <li>line 3</li>
    <li>and so on...</li>
</ul><!-- end #lyrics -->

So I want to:

  1. Highlight (change color or background) of the line that is being played.
  2. Save current time to a cookie and resume on next visit.

I'm not sure if either of these are possible in HTML5, but even in Flash or other technology, I'd like to know if and how it is possible. I understand #2 is asking too much, but #1 is really important.

So almost similar to this: http://randallagordon.com/jaraoke/ but all the lines are visible, just the current line is highlighted.

Many thanks for your help.

Upvotes: 1

Views: 297

Answers (1)

robertc
robertc

Reputation: 75747

I think #2 is probably quite straightforward, just grab currentTime at an appropriate moment and store it in a cookie.

If you know the time offsets in the audio that each line occurs then you can just poll currentTime inside a setTimeout and update the highlighted line as appropriate. You might also be interested in the under development WebSRT spec.

Upvotes: 1

Related Questions