HTML5オーディオエレメントのローディングバーを作成するにはどうすればよいですか？

Question

HTML5オーディオ要素のローディングバー（読み込み/バッファされたパーセンテージを表示）を作成しようとしています。

video.buffered.end(0)/video.duration 

しかし、私は、これは、オーディオタグで動作するように取得することはできません：videoタグについて

それは、以下のものを使用して計算することが可能です。修正値を返します。

ありがとうございます！

Answer 1

返される固定値は何ですか？問題を示すために簡単なjsfiddleを作成できますか？

このhtml5 doctor tutorialは非常に最近作成されたもので、HTML5オーディオの現在の再生状態に関するいくつかの良い情報があります。それはあなたのケースで適切であるかもしれないようにページダウン、次の先端半分が見えます：

あなたは、いくつかの期間が 変更メディアのダウンロード中も、可能性としてdurationchangeイベントをチェックする必要があるかもしれません。また、メタデータが であるかどうかによって、オーディオが再生されてから まで再生するまで待つ必要があります。要するに、durationchangeイベント、 に注目し、期間がまだわからない場合はNaN値を注意してください。

Answer 2

あなたはHTML5 audio要素の進捗状況を取得し、<progress>要素に適用するには、次のコードを使用することができます：確認せずbufferedにendメソッドを呼び出す

var myAudio = document.getElementById('#myAudio'); 
var myProgressBar = document.getElementById('#myProgressBar'); 

myAudio.addEventListener('timeupdate', onLoadProgress); 

function onLoadProgress() { 
    var progress = parseInt(((myAudio.currentTime/myAudio.duration) * 100), 10); 
    myProgressBar.value = progress; 
} 

Answer 3

は信頼できないです。あなたは何もせずにメソッドを呼び出そうとしている可能性があります。このフィドルをチェックしてください：

document.querySelector('span').innerHTML = document.querySelector('audio').buffered.length;

<audio src="http://myst729.qiniudn.com/within-temptation_pale.mp3" controls autoplay></audio> 
 
<p>Buffered Length: <span></span></p>

参照してください？非常に最初の始めに、バッファされた長さは0です - 何もロードされていません。 startまたはendメソッドを呼び出す前に、バッファされた長さが0でないことを確認する必要があります。

---

いつもbufferedを読むと、実際には固定されています。したがって、視覚的に「ローディング」効果を得るには、何度も何度もそれを読む必要があります。ここで

私がロードされて再生割合ごとに50ミリ秒更新しよう：

var audio = document.querySelector('audio'); 
 
var percentages = document.querySelectorAll('span'); 
 

 
function loop() { 
 
    var buffered = audio.buffered; 
 
    var loaded; 
 
    var played; 
 

 
    if (buffered.length) { 
 
    loaded = 100 * buffered.end(0)/audio.duration; 
 
    played = 100 * audio.currentTime/audio.duration; 
 
    percentages[0].innerHTML = loaded.toFixed(2); 
 
    percentages[1].innerHTML = played.toFixed(2); 
 
    } 
 

 
    setTimeout(loop, 50); 
 
} 
 

 
loop();

<audio src="http://myst729.qiniudn.com/within-temptation_pale.mp3" controls autoplay></audio> 
 
<p>Loaded: <span></span>%</p> 
 
<p>Played: <span></span>%</p>

注：MP3ファイルは、あなたの場所にアクセスできないことを。その場合は、あなたの好意で別のソースを試してみてください。そうでなければ、非常に素敵な女性のボーカルが聞こえ、継続的にパーセント変化が見られ、最終的に100％になります。

Answer 4

私はあなたの問題をundestandするかどうかはわかりません。しかし、ここで私は明確にする

var audio = document.querySelector('audio'); 
 
var set; 
 
window.onload = function(){set=setInterval(buffer,1000);}; 
 
    function buffer() { 
 
    if(audio.buffered.length>0){ 
 
    var percent = (audio.buffered.end(0)/audio.duration) * 100; 
 
     document.querySelector('p').innerHTML = percent+'%'; 
 
    if(percent === 100){ 
 
      clearInterval(set); 
 
     } 
 
     } 
 
}

<audio src="http://customhtml5video.000webhostapp.com/audio.mp3" controls></audio> 
 
<p></p>