synchroniser et de mettre en évidence le HTML du texte en audio

Si nécessaire, je peux expliquer plus en détail, mais en gros ce que j'ai à faire est effet CSS modifications de texte HTML dans une synchronisation avec une piste audio, c'est à dire, en mettant en évidence des mots/phrases en synchronisation avec la lecture audio. J'ai aussi besoin de contrôler la lecture audio en cliquant sur le texte. J'ai de bonnes HTML/CSS des côtelettes de porc, mais je ne suis pas aussi forte avec raw js, donc je suis en espérant que il y a un jQuery approche. J'espère que quelqu'un peut m'orienter dans la meilleure direction.

Merci beaucoup à l'avance,

svs

OriginalL'auteur shecky | 2012-05-24

  1. 18

    Pour la facilité d'utilisation, je recommande une combinaison de jQuery et Popcorn.js pour quoi que ce soit où vous souhaitez intégrer les médias avec HTML, et vice-versa. Voir ce jsfiddle post pour un exemple.

    Pour l'enregistrement, doit jsfiddle jamais disparaître, voici le code:

    HTML

    <audio id="greeting" src="https://dl.dropboxusercontent.com/u/17154625/greeting.ogg" controls></audio>

<div id="text">
   <span id="w1" class="word" data-start="1.0">Hello</span>,
   and <span id="w2" class="word" data-start="2.0">welcome</span>
   to Stack <span id="w3" class="word" data-start="3.0">Overflow</span>.
   Thank you for asking your question.
</div>​

    CSS

    .word {
   color: red;
}
.word:hover, .word.selected {
    color: blue;
    cursor: pointer;
}​

    JS

    var pop = Popcorn("#greeting");

var wordTimes = {
    "w1": { start: 1, end: 1.5 },
    "w2": { start: 1.9, end: 2.5 },
    "w3": { start: 3, end: 4 }
};

$.each(wordTimes, function(id, time) {
     pop.footnote({
        start: time.start,
        end: time.end,
        text: '',
        target: id,
        effect: "applyclass",
        applyclass: "selected"
    });
});

pop.play();

$('.word').click(function() {
    var audio = $('#greeting');
    audio[0].currentTime = parseFloat($(this).data('start'), 10);
    audio[0].play();
});​
    Super merci beaucoup! Je vais avoir les mains pleines de jouer avec cette ... j'espère que vous allez vous adonner moi si j'ai besoin de faire un suivi. Cheers!
    p.s. qu'avez-vous utilisé pour générer la voix dans le jsfiddle démo?
    Sur mon Mac, j'ai couru say "Hello, and welcome to Stack Overflow. Thank you for asking your question." -o greeting.ogg
    Avez-vous essayé de mettre le fichier audio dans votre dossier public?
    Pour cet exemple, je l'ai mis manuellement.

    OriginalL'auteur thisgeek