カスタム進行状況バー<audio>と<progress> HTML5の要素

Question

タグと単純なJavaScriptを使用してオーディオプレーヤー用のカスタムシークバーを作成する方法を知りました。

現在のコード：

<script> 
    function play() { 
    document.getElementById('player').play(); 
    } 

    function pause() { 
    document.getElementById('player').pause(); 
    } 
</script> 


<audio src="sample.mp3" id="player"></audio> 
<button onClick="javascript:play()" >Play</button> 
<button onClick="javascript:pause()" >Pause</button> 
<progress id="seekbar"></progress> 

私は曲を再生するときの進行状況が表示されるように、プログレスバーをリンクすることは可能でしょうか？

Answer 1

はい、オーディオタグのtimeupdateイベントを使用することは可能です。このイベントは、再生の位置が更新されるたびに表示されます。次に、オーディオ要素のプロパティcurrentTimeとdurationを使用してプログレスバーを更新できます。

あなたがスムーズにプログレスバーをしたい場合は、その

HTMLのようなsomethinkを試してみてください。このfiddle

Answer 2

まず最初に、progress要素を使用しないでください。これはちょっとした要素です（今のところ）、スタイリングでは巨大な痛みです...ちょっと退屈です（私が作った小さなプロジェクトを見てください、look at itそれはjuste webkit/mozです））。

とにかく、MDNの文書を読む必要があります。非常に簡単で多くの例があります。あなたが探していることは、ここで少しスニペットcurrentTime属性れる：

var audio = document.querySelector('#player') 
audio.currentTime = 60 // will go to the 60th second 

だから、あなたが必要なもの（divあなたはプログレスバーとして使用要素である）、クロス乗算を使用することです：私がクリックした |私が知りたい時間
----------------------------------------
合計の長さはdivです。ビデオ/オーディオの合計時間（audio.seekable.end()）

Answer 3

での作業の例を見ることができます：

<div class="hp_slide"> 
    <div class="hp_range"></div> 
</div> 

はCSS：

.hp_slide{ 
    width:100%; 
    background:white; 
    height:25px; 
} 
.hp_range{ 
    width:0; 
    background:black; 
    height:25px; 
} 

JS：

var player = document.getElementById('player');  
player.addEventListener("timeupdate", function() { 
    var currentTime = player.currentTime; 
    var duration = player.duration; 
    $('.hp_range').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear'); 
}); 

かなり荒いが、HTML5は