We created a popcorn plugin for transcripts. That does the highlighting for you (which is the hardest bit).
https://raw.github.com/maboa/hyperaudiopad/master/js/popcorn.transcript.js
| for (var i=0, max=spans.length; i < max; i++) { | |
| pop.transcript({ | |
| time: spans[i].getAttribute('m')/1000, | |
| futureClass: "transcript-grey", | |
| target: spans[i] | |
| }); | |
| spans[i].onclick = function(e) { | |
| pop.currentTime( this.getAttribute('m') / 1000 ); | |
| return false; | |
| } | |
| } |
Try using the Transcript Plugin