将HTML文本同步并突出显示到音频
如果有必要,我可以更详细地解释,但本质上我需要做的是使CSS更改与音频曲目同步到HTML文本-即,突出显示与音频播放同步的单词/短语。我还需要通过点击文本来控制音频播放。我有很好的HTML/CSS排版,但我对原始js没有那么强,所以我希望有一种jQuery方法。我希望有人能把我引向最好的方向 多谢各位将HTML文本同步并突出显示到音频,html,html5-audio,Html,Html5 Audio,如果有必要,我可以更详细地解释,但本质上我需要做的是使CSS更改与音频曲目同步到HTML文本-即,突出显示与音频播放同步的单词/短语。我还需要通过点击文本来控制音频播放。我有很好的HTML/CSS排版,但我对原始js没有那么强,所以我希望有一种jQuery方法。我希望有人能把我引向最好的方向 多谢各位 svs为了便于使用,我建议将jQuery与HTML相结合,用于任何需要将媒体与HTML集成的地方,反之亦然。看看这个例子 作为记录,如果JSFIDLE曾经消失,下面是代码: HTML JS 超级-
svs为了便于使用,我建议将jQuery与HTML相结合,用于任何需要将媒体与HTML集成的地方,反之亦然。看看这个例子 作为记录,如果JSFIDLE曾经消失,下面是代码: HTML JS
超级-非常感谢!我会全力以赴地玩这个。。。如果我需要跟进,希望你能原谅我。干杯p、 您在JSFIDLE演示中使用了什么来生成声音?在我的Mac上,我运行了
说“你好,欢迎使用堆栈溢出。谢谢您提出的问题。”-o greeting.ogg
再次使用Thx!我不知道系统的语音选项@你有没有试着把声音文件放进你的电脑里?
<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>
.word {
color: red;
}
.word:hover, .word.selected {
color: blue;
cursor: pointer;
}
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();
});