同步并将HTML文本高亮显示为音频

问题描述

如果有必要，我可以更详细地解释，但基本上我需要做的是与音频轨道同步地对CSS文本进行CSS更改 - 即，突出显示与音频回放同步的单词/短语。我还需要通过单击文本来控制音频播放。我有很好的HTML / CSS排版，但我对原生js不太了解，所以我希望有一个jQuery方法。我希望有人能引导我走向最好的方向。

非常感谢您提前，

svs

解决方案

为了便于使用，我推荐将jQuery和适用于任何需要将媒体与HTML集成的地方，反之亦然。例如，请参阅此。

为了记录，如果jsfiddle永远消失，下面是代码：

HTML

 < audio id =greetingsrc =https://dl.dropboxusercontent.com/u/17154625/greeting.oggcontrols><< ; /音频> 
 
< div id =text> 
 和< span id =w2class =word数据开始= 2.0 >欢迎< /跨度> 
到Stack< span id =w3class =worddata-start =3.0>溢出< / span> ;. 
谢谢您提出您的问题。 
< / div> 
  

CSS

  .word {
颜色：红色; 
} 
 .word：悬停，.word.selected {
颜色：蓝色; 
光标：指针; 
} 
  

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} 
}; 
 $ b $ .each（wordTimes，function（id，time）{
 pop.footnote（{
 start：time.start，
 end：time.end， 
 text：''，
 target：id，
效果：applyclass，
 applyclass：selected
}）; 
}）; 
 
 pop.play（）; 
 $ b $（'。word'）。click（function（）{
 var audio = $（'＃greeting'）; 
 audio [0] .currentTime = parseFloat（ $（this）.data（'start'），10）; 
 audio [0] .play（）; 
}）; 
  

If necessary I can explain in more detail but essentially what I need to do is effect CSS changes to HTML text in sync with an audio track - i.e., highlighting words/phrases in sync with the audio playback. I also need to control the audio playback by clicking on the text. I have good HTML/CSS chops, but I’m not as strong with raw js, so I’m hoping there’s a jQuery approach. I’m hoping someone can steer me in the best direction.

Many thanks in advance,

svs

解决方案

For ease of use, I recommend a combination of jQuery and Popcorn.js for anything where you want to integrate media with HTML, and visa versa. See this jsfiddle post for an example.

For the record, should jsfiddle ever disappear, here's the 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();
});​

这篇关于同步并将HTML文本高亮显示为音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！