jquery - HTML5和jQuery:使用音频播放器作为if语句的计时器吗？

Question

我有一个带有3秒音频样本的html5音频播放器。
是否可以从该音频播放器使用计时器/计数器？
因为我想在单个秒上添加文本或图像。

我用Java语言制作了一个(不起作用的示例)。但是我认为最好使用jQuery，这样我就可以使用.append函数。

JsFiddle here

HTML:

<audio id="audio_2" controls="controls">
<source src="http://www.pachd.com/sfx/metallic-clonks.wav">
</audio>

    <div id="div1"></div>

    <div id="div2"></div>

    <div id="div3"></div>     

JS:

document.getElementById('audio_2').addEventListener('addingthings', function() {
if (this.currentTime == 1) {
    document.getElementById('div1').innerHTML = 'second second';
}
if (this.currentTime == 2) {
    document.getElementById('div2').innerHTML = 'second second';
}
if (this.currentTime == 3) {
    document.getElementById('div3').innerHTML = 'third second';
}

});

CSS:

#audio_2
{
height: 20px;
width: 200px;
float: left;
}

#div1{
width: 80px;
height: 30px;
background: lightblue;  
color: blue;  
border-bottom: 5px solid blue;    
float: left;
margin-left: 5px;
}

#div2{
width: 80px;
height: 30px;
background: lightblue;  
color: blue;  
border-bottom: 5px solid blue;
float: left;
margin-left: 5px;    
}

#div3{
width: 80px;
height: 30px;
background: lightblue;  
color: blue;  
border-bottom: 5px solid blue;
float: left;
margin-left: 5px;   
}

我对您的问题是:是否可以使用HTML音频播放器的计时器/计数器？如果是，我如何使用jQuery在各个秒数中添加if语句？
先感谢您

Answer 1

您可能想看一下HTML5媒体元素事件:
http://dev.w3.org/html5/spec/media-elements.html#mediaevents(ontimeupdate事件听起来很有趣!)。

您还需要四舍五入currentTime，因为onTimeUpdate不会在1秒的周期内触发。

Math.floor(this.currentTime) == 1

看一下这个工作示例:

http://jsfiddle.net/t946k/1/