web-dev-qa-db-ja.com

<audio>および<progress> HTML5要素のカスタムプログレスバー

タグとシンプルな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>

進行状況バーをリンクして、曲を再生すると進行状況が表示されるようにすることはできますか？

javascriptaudioprogress
17
Zach Boyd McTague

はい、オーディオタグの timeupdate イベントを使用して可能です。再生の位置が更新されるたびに、このイベントを受け取ります。次に、オーディオ要素のcurrentTimeおよびdurationプロパティを使用して、進行状況バーを更新できます。

これで実際の例を見ることができます fiddle

26
jbalsas

スムーズな進行状況バーが必要な場合は、そのように考えてみてください

HTML：

<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');
});

かなりラフですが、動作します

8
Vladislav Filonov

まず第一に、progress要素を使用しないでください。これは（今のところ）骨の折れる要素であり、スタイルを設定することは非常に困難です...まあ、退屈です（私が作成した小さなプロジェクトを見て、 それを見て （そしてそれはジャストwebkit/mozです））。

とにかく、あなたは [〜＃〜] mdn [〜＃〜] のドキュメントを読むべきです、それは非常に簡単で多くの例があります。あなたが探しているのはcurrentTime属性です、ここに小さなスニペットがあります：

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

したがって、クロス乗算を使用する必要があります（divはプログレスバーとして使用する要素です）：divをクリックした場所|知りたい時間
————————————————————————————————————————
全長div |ビデオ/オーディオの合計時間（audio.seekable.end()）

1
Calvein