sincronizzare ed evidenziare il testo HTML all'audio

Question

Se necessario, posso spiegarlo in modo più dettagliato, ma essenzialmente ciò che devo fare è modificare le modifiche CSS al testo HTML in sincronia con una traccia audio, ovvero evidenziare parole/frasi in sincronia con l'audio la riproduzione. Devo anche controllare la riproduzione audio facendo clic sul testo. Ho delle buone costolette HTML/CSS, ma non sono così forte con raw js, quindi spero che ci sia un approccio jQuery. Spero che qualcuno possa guidarmi nella direzione migliore.

Molte grazie in anticipo,

SVS

Answer 1

Per facilità d'uso, vi consiglio una combinazione di jQuery e Popcorn.js per tutto ciò in cui si desidera integrare i media con l'HTML, e viceversa. Vedi questo jsfiddle post per un esempio.

Per la cronaca, dovrebbe jsfiddle mai scomparire, ecco il codice:

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