CODEWITHSUNDEEP
jqueryhtml
Madhan
Madhan

Reputation: 1321

Audio and word level highlighting in HTML 5

How to synchronize the audio and respective text highlight in HTML5? Will jquery/Javascript do the audio and text synchronization? If yes, please share your ideas...

Thanks in advance...

Madhan

Upvotes: 0

Views: 348

Answers (1)

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83596

You need to preprocess the audio file on the server side so you can create a JSON list of word indexes and wall-clock times when the corresponding word is spoken.

Then on the client side, load this JSON. Start audio playback and use MediaElement timeupdate event hook to follow the progress of the audio.

Then highlight the words by wrapping them in <span> and changing their CSS class when timeupdate reported time passes the corresponding word index.

Upvotes: 2

Related Questions