Audio sync text selection in jQuery

Question

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

During sound reproduction, the text should be highlighted with a phrase (phrase) (not word by word or symbol, therefore, synchronization is necessary only for the beginning of a phrase).

I would not want to use just a flash solution, and I would rather use something more friendly HTML.

I thought of using a combination of two plugins:

• JPlayer for audio
• Jquery highligheter for highlighting text

Then I could write a jquery script to loop through various phrases. The first problem is that JPlayer only has percentage events, not exact timeline events, so I need to split the full mp3 sound of the spoken text into smaller audio files for each phrase (it takes a lot of editing and preload control).

Is there a better solution for this? Should I go back to a simpler swf solution?

Answer 1

, script javascript. , - . , - , .

:

   <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>