HTML5＆jQuery：使用audioplayer作爲if語句的計時器？

Question

我有一個3秒音頻樣本的html5音頻播放器。 是否可以使用此音頻播放器中的定時器/計數器？ 因爲我想在單個秒鐘內添加文本或圖像。

我用Javascript做了一個（沒有工作的例子）。但我認爲使用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 audioplayer的定時器/計數器？如果是的話，我如何使用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/