Question

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

我用Javascript做了一个（不是工作的例子）。但我认为使用jQuery会更好，所以我可以使用.append函数。

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/

HTML5＆amp; jQuery：使用audioplayer作为if语句的计时器？

1 个答案: