Text highlight with audio sync in Jquery

Question

I need to sync text and audio on many web pages.

While the audio is played the text should be highlighted phrase by phrase (not word by word or by character so sync is necessary only for the start of the phrase).

I'd like not to use a flash only solution and I'd prefer to use something more HTML friendly.

I thought to use a combination of two plugins:

• JPlayer for the audio
• Jquery highligheter for highlighting the text

I could then write a jquery script to cycle on the various phrases. The first problem is that JPlayer has only percentage played events and not precise timeline events so I would need to split the full mp3 audio of the spoken text in smaller audio files for each phrase (long editing work and preload management needed).

Is there a better solution for this? Should I go back to the easier full swf solution?

Answer 1

What you could do is script the timeline in javascript. When the audio starts to play, you set timeouts for each action on the timeline. This will require your audio to play without any delays of course.

It would look something like this:

   <div>one</div>
   <div>two</div>
   <div>three</div>

<script>
// this is the timeline
var actions = [  { time : 1, action : function() { $('div:eq(0)').css('color','red') } },
                 { time : 1.5, action : function() { $('div:eq(1)').css('color','green') } },
                 { time : 2, action : function() { $('div:eq(2)').css('color','blue') } } ];

$(document).ready( function() {
        // execute the timeline
        for( var i in actions ) {
            setTimeout( actions[i].action, actions[i].time * 1000 );
        }
});

</script>