Higlight text while playing mp3

Question

I want to know how they did this: http://al-quran.info/#1:1

When you play a verse, the second verse will play after it. It also highlights the text that is "playing". Is there an example I can work with or anything?

So what I want is to click on play at verse A and it automatically plays, highlights and scrolls B,C etc. after that.

How do I do this? I know this is done with Jplayer but I don't know much.

Thank you in advance.

Answer 1

Most of the HTML5 audio players are using HTML5 audio elements . From the javascript point of view you can access bunch of useful methods and properties defined in HTMLMediaElement Interface

just to give you a picture here is some example code with naive algorithm:

var audioElement;
audioElement = document.getElementById('audioElementID');
while(isPlaying()){
    if(audioElement.ended){ //Indicates whether the media element has ended playback.
        playAndHighlightNext();
    }
}