How do I make a loading bar for an HTML5 audio element?

Question

I'm trying to make a loading bar (showing percentage loaded/buffered) for an HTML5 audio element.

For the video tag it's possible to calculate using the following:

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

But I can't get this to work with the audio tag. It just returns a fix value.

Any idea?

Thanks!

Answer 1

Calling end method on buffered without checking is unreliable. It's possible you're trying to call the method on nothing. Check this fiddle:

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>

See? At the very first beginning, buffered length is 0 - nothing has loaded. You need to be sure that buffered length is not 0 before calling start or end method.

---

Everytime you read buffered, it is fixed indeed. So, to achive a visually "loading" effect, you need to read it again and again and again.

Here I try to update the loaded and played percentage every 50 millisecond:

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>

NOTE: The MP3 file may not be accessible in your place. If that's the case, just try another source at your favor. Otherwise you will hear a very nice female vocal, and see the percentage changes continously, eventually ends up 100%.

Answer 2

I am not quite sure if i do undestand your prob. but here is a way i used to calculate how much audio is buffered

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>