Synchronisieren und markieren Sie HTML-Text in Audio

Wenn nötig, kann ich dies detaillierter erläutern, aber im Wesentlichen muss ich CSS-Änderungen an HTML-Text synchron mit einer Audiospur bewirken - d. H. Wörter / Phrasen synchron mit der Audiowiedergabe markieren. Ich muss auch die Audiowiedergabe steuern, indem ich auf den Text klicke. Ich habe gute HTML / CSS-Chops, aber ich bin nicht so stark im Umgang mit Raw-Js, daher hoffe ich, dass es einen jQuery-Ansatz gibt. Ich hoffe, jemand kann mich in die beste Richtung lenken.

Vielen Dank im Voraus,

svs

Antworten auf die Frage(1)

Lösung für das Problem

ery undPopcorn.js für alles, wo Sie Medien mit HTML integrieren möchten und umgekehrt. Sieh dir das anGeigenpfosten zum Beispiel.

Für den Fall, dass jsfiddle jemals verschwindet, ist hier der 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();
});​
 shecky25. Mai 2012, 22:40
Danke nochmal! Die Sprachoptionen des Systems waren mir nicht bekannt!
 thisgeek24. Aug. 2012, 17:58
@bouncingHippo Haben Sie versucht, die Audiodatei in IhreÖffentlicher Ordner?
 akanevsky20. Okt. 2015, 00:10
@thisgeek danke.
 bouncingHippo26. Aug. 2012, 01:20
@thisgeek Danke, das Ablegen im öffentlichen Ordner hat funktioniert! :)
 thisgeek19. Okt. 2015, 22:11
Für dieses Beispiel habe ich es manuell eingegeben.
 shecky25. Mai 2012, 18:10
p.s. Womit haben Sie die Stimme in der jsfiddle-Demo erzeugt?
 shecky25. Mai 2012, 03:03
Super - vielen Dank! Ich werde meine Hände voll damit zu tun haben ... Ich hoffe, Sie werden mich verwöhnen, wenn ich nachfassen muss. Prost!
 thisgeek25. Mai 2012, 19:14
Auf meinem Mac lief ichsay "Hello, and welcome to Stack Overflow. Thank you for asking your question." -o greeting.ogg
 bouncingHippo23. Aug. 2012, 16:49
@thisgeek Ich habe versucht, meinen eigenen Dropbox-Link mit einer .mp3-Datei zu verwenden, aber es wird aus irgendeinem Grund nicht abgespielt. Irgendeine Idee, warum?
 akanevsky19. Okt. 2015, 22:10
Haben Sie wordTimes manuell eingegeben oder irgendwie generiert?

Ihre Antwort auf die Frage