0

3秒のオーディオサンプルを含むhtml5オーディオプレーヤーがあります。このオーディオプレーヤーからタイマー/カウンターを使用することは可能ですか？個々の秒にテキストや画像を追加したいからです。

私はJavascriptで（動作しない例）を作成しました。しかし、.append関数を使用できるように、jQueryを使用する方が良いと思います。

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イベントはあなたにとって興味深いものに聞こえます！）。

また、は1秒サイクルで発火しないcurrentTimeため、丸める必要があります。onTimeUpdate

Math.floor(this.currentTime) == 1

この実用的な例を見てください：

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

于 2012-04-14T12:25:47.197 に答える