将 HTML 文本同步并突出显示到音频

Question

如有必要，我可以更详细地解释，但本质上我需要做的是将CSS更改与音轨同步到HTML文本 - 即突出显示与音频播放同步的单词/短语。我还需要通过单击文本来控制音频播放。我有很好的HTML/CSS排骨，但我对原始js没有那么强，所以我希望有一个jQuery方法。我希望有人能引导我朝着最好的方向前进。

提前非常感谢，

SVS

Answer 1

为了便于使用，我建议将jQuery和Popcorn结合使用.js用于任何想要将媒体与HTML集成的地方，反之亦然。有关示例，请参阅此jsfiddle帖子。

为了记录，如果jsfiddle消失了，这是代码：

.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();
});​