Surbrillance du texte avec synchronisation audio dans Jquery

Question

J'ai besoin de synchroniser le texte et l'audio sur de nombreuses pages Web.

Pendant la lecture de l'audio, le texte doit être mis en surbrillance phrase par phrase (pas par mot ou par caractère, donc la synchronisation est nécessaire uniquement pour le début de la phrase). Je voudrais ne pas utiliser une solution flash seulement et je préfère utiliser quelque chose de plus convivial pour le HTML.

Je pensais que d'utiliser une combinaison de deux plug-ins:

• JPlayer pour l'audio
• Jquery highligheter pour mettre en évidence le texte

Je pourrais alors écrire un script jquery pour faire défiler sur les différents phrases. Le premier problème est que JPlayer n'a que des événements joués en pourcentages et pas des événements précis, donc je devrais diviser l'audio complet du texte parlé en plus petits fichiers audio pour chaque phrase (long travail d'édition et gestion de précharge nécessaire).

Existe-t-il une meilleure solution pour cela? Devrais-je revenir à la solution SWF complète plus facile?

Answer 1

Ce que vous pouvez faire est de scripter le scénario en javascript. Lorsque l'audio commence à être lu, vous définissez des délais d'attente pour chaque action sur la ligne temporelle. Cela nécessitera votre audio à jouer sans aucun retard, bien sûr.

Il ressemblerait à quelque chose comme ceci:

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