How Do I Make A Loading Bar For An Html5 Audio Element?

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.e

Solution 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;

<audiosrc="http://myst729.qiniudn.com/within-temptation_pale.mp3"controlsautoplay></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');

functionloop() {
  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();

<audiosrc="http://myst729.qiniudn.com/within-temptation_pale.mp3"controlsautoplay></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%.

Solution 2:

You can use the following code to get the progress of an HTML5 audio element and apply it to a <progress> element:

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

myAudio.addEventListener('timeupdate', onLoadProgress);

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

Solution 3:

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);}; 
    functionbuffer () {
    if(audio.buffered.length>0){
   var percent = (audio.buffered.end(0) / audio.duration) * 100;
       document.querySelector('p').innerHTML = percent+'%';
     if(percent === 100){
           clearInterval(set); 
       } 
       }
}

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

Solution 4:

What is the fixed value it returns? Can you create a simple jsfiddle to demonstrate the issue?

This html5 doctor tutorial was written quite recently and has some good information on the current state of play of HTML5 Audio. The following tip half way down the page looks like it might be pertinent in your case:

You may need to check the durationchange event as some durations could change while media downloads. Also, depending on whether metadata is available, you might need to wait until the audio starts playing to check its duration. In short, keep an eye on the durationchange event, and watch out for NaN values when the duration isn’t yet known!