sincronizar y resaltar texto HTML a audio

Question

Si es necesario, puedo explicarlo con más detalle, pero esencialmente lo que necesito hacer es realizar cambios CSS en texto HTML sincronizados con una pista de audio, es decir, resaltar palabras/frases sincronizadas con el audio reproducción. También necesito controlar la reproducción de audio haciendo clic en el texto. Tengo buenos chuletas HTML/CSS, pero no soy tan fuerte con js sin formato, así que espero que haya un enfoque jQuery. Espero que alguien pueda guiarme en la mejor dirección.

Muchas gracias de antemano,

SVS

Answer 1

Para facilitar su uso, recomiendo una combinación de jQuery y Popcorn.js para cualquier cosa en la que desea integrar los medios con HTML, y viceversa. Vea esto jsfiddle post para un ejemplo.

Para el registro, debe jsFiddle desaparecerán, aquí está el código:

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(); 
});​