Sync and highlight HTML text for audio

Question

If necessary, I can explain in more detail, but essentially, I need to make sure that the CSS changes in the HTML text are synchronized with the soundtrack, i.e. Highlighting words / phrases in sync with the sound. I also need to control the sound by clicking on the text. I have good HTML / CSS chops, but Im not so strong with raw js, so I hope this is a jQuery approach. I hope someone can guide me in a better direction.

Thank you very much in advance,

SVS

Answer 1

For ease of use, I recommend a combination of jQuery and Popcorn.js for anything, where you want to integrate media with HTML, and vice versa. See This jsfiddle post for an example.

To write if jsfiddle should ever fade, here is the code:

HTML

<audio id="greeting" src="https://dl.dropboxusercontent.com/u/17154625/greeting.ogg" controls></audio> <div id="text"> <span id="w1" class="word" data-start="1.0">Hello</span>, and <span id="w2" class="word" data-start="2.0">welcome</span> to Stack <span id="w3" class="word" data-start="3.0">Overflow</span>. Thank you for asking your question. </div>​ 

CSS

 .word { color: red; } .word:hover, .word.selected { color: blue; cursor: pointer; }​ 

Js

 var pop = Popcorn("#greeting"); var wordTimes = { "w1": { start: 1, end: 1.5 }, "w2": { start: 1.9, end: 2.5 }, "w3": { start: 3, end: 4 } }; $.each(wordTimes, function(id, time) { pop.footnote({ start: time.start, end: time.end, text: '', target: id, effect: "applyclass", applyclass: "selected" }); }); pop.play(); $('.word').click(function() { var audio = $('#greeting'); audio[0].currentTime = parseFloat($(this).data('start'), 10); audio[0].play(); });​