无法使javascript爆米花示例正常工作
我是网络编程的绝对高手,而且我似乎无法让下面的爆米花示例正常工作。我试图从这里的工作示例中实现它: 有人能指出我做错了什么吗?注意,在下面的代码中,单词不会随着音频及时突出显示,但在JFIDLE示例中确实如此 谢谢无法使javascript爆米花示例正常工作,javascript,jquery,audio,Javascript,Jquery,Audio,我是网络编程的绝对高手,而且我似乎无法让下面的爆米花示例正常工作。我试图从这里的工作示例中实现它: 有人能指出我做错了什么吗?注意,在下面的代码中,单词不会随着音频及时突出显示,但在JFIDLE示例中确实如此 谢谢 <html> <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
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();
});
</script>
<style>
.word {
color: red;
}
.word:hover, .word.selected {
color: blue;
cursor: pointer;
}
</style>
</head>
<body>
<audio id="greeting" src="http://dl.dropbox.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>
</body>
</html>
var pop=爆米花(“问候语”);
var字时间={
“w1”:{开始:1,结束:1.5},
“w2”:{开始:1.9,结束:2.5},
“w3”:{开始:3,结束:4}
};
$.each(字时间、函数(id、时间){
脚注({
开始:时间,开始,
结束:时间,结束,
文本:“”,
目标:id,
效果:“苹果树”,
applyclass:“已选择”
});
});
pop.play();
$('.word')。单击(函数(){
var audio=$(“#问候语”);
音频[0].currentTime=parseFloat($(this).data('start'),10);
音频[0]。播放();
});
.字{
颜色:红色;
}
.word:悬停,.word.selected{
颜色:蓝色;
光标:指针;
}
你好
欢迎光临
堆栈溢出。
谢谢你的提问。
将您自己的所有JavaScript代码包装在
$(document).ready(function() { /* your code here */ });
或者将其移动到
标记之后,使其等待运行,直到加载HTML正文之后
当您在左上角设置onLoad
下拉列表时,JSFIDLE会自动执行此操作