同步並將HTML文本高亮顯示爲音頻

Question

如果需要，我可以更詳細地解釋，但實質上，我需要做的是將CSS更改與音頻軌道同步，即將HTML文本更改爲HTML文本 - 即突出顯示與音頻同步的文字/短語回放。我還需要通過單擊文本來控制音頻播放。我有很好的HTML/CSS排版，但我對原生js不太瞭解，所以我希望有一個jQuery方法。我希望有人能引導我走向最佳方向。

提前許多感謝，

SVS

Answer 1

爲了方便使用，我建議和jQuery的組合Popcorn.js任何東西要與媒體整合HTML，反之亦然。一個例子見jsfiddle post。

對於記錄，應該的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(); 
});​