0

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

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

JsFiddle在这里

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 语句添加到各个秒？先感谢您

4

1 回答 1

3

您可能想查看 HTML5 媒体元素事件： http ://dev.w3.org/html5/spec/media-elements.html#mediaevents （该ontimeupdate事件听起来对您来说很有趣！）。

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

Math.floor(this.currentTime) == 1

看看这个工作示例：

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

于 2012-04-14T12:25:47.197 回答