sincronizar y resaltar texto HTML para audio

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

Muchas gracias de antemano,

svs

Respuestas a la pregunta(1)

Solución de preguntas

Para facilitar su uso, recomiendo una combinación de jQuery yPopcorn.js para cualquier cosa donde desee integrar medios con HTML, y viceversa. Mira estojsfiddle post para un ejemplo.

Para el registro, si jsfiddle alguna vez desaparece, 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();
});​
 bouncingHippo26 ago. 2012 01:20
@thisgeek gracias, ¡ponerlo en la carpeta pública funcionó! :)
 akanevsky20 oct. 2015 00:10
@thisgeek gracias.
 thisgeek24 ago. 2012 17:58
@bouncingHippo ¿Intentaste poner el archivo de sonido en tucarpeta pública?
 shecky25 may. 2012 22:40
Gracias de nuevo! ¡No estaba al tanto de las opciones de voz del sistema!
 akanevsky19 oct. 2015 22:10
¿Pusiste WordTimes manualmente o los generaste de alguna manera?
 bouncingHippo23 ago. 2012 16:49
@thisgeek intenté usar mi propio enlace de Dropbox usando un archivo .mp3 pero no se está reproduciendo por alguna razón, ¿alguna idea de por qué?
 thisgeek25 may. 2012 19:14
En mi Mac, corrísay "Hello, and welcome to Stack Overflow. Thank you for asking your question." -o greeting.ogg
 shecky25 may. 2012 18:10
PD. ¿Qué usaste para generar la voz en la demostración de jsfiddle?
 shecky25 may. 2012 03:03
Super - muchas gracias! Tendré mis manos llenas jugando con esto ... Espero que me entreguen si necesito un seguimiento. ¡Aclamaciones!
 thisgeek19 oct. 2015 22:11
Para este ejemplo lo puse manualmente.

Su respuesta a la pregunta