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

回答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%.

回答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);

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

回答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);}; 
    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>

回答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!

来源：https://stackoverflow.com/questions/13025946/how-do-i-make-a-loading-bar-for-an-html5-audio-element

标签

javascript

html5

html5-audio