Geek Answers Handbook

How to create a loading bar for an HTML5 audio element?

I am trying to create a loading bar (showing the percentage of loading / buffering) for an HTML5 audio element.

For a video tag, you can compute using the following:

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

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

Any idea?

Thanks!

+6
source share
4 answers

Calling the end method on buffered without checking is not reliable. Perhaps you are trying to call the method nothing. Check out this script:

 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>

Cm? At the first start, the buffered length is 0 — nothing loaded. You must be sure that the buffered length is not 0 before calling the start or end method.

Every time you read buffered , it is really fixed. Thus, in order to achieve the visual effect of “loading”, you need to read it again and again and again.

Here I try to update the downloaded and lost percentage every 50 milliseconds:

 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 available in your place. If so, try a different source to your advantage. Otherwise, you will hear very good female vocals and you will see that the percentage changes are constantly, eventually ending at 100%.

+7
source

You can use the following code to get the progress of the HTML5 audio element and apply it to the <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; }
+1
source

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

This html5 doctor tutorial was written recently and contains some good information about the current state of the HTML5 Audio game. The following tip half way down looks as if it might be appropriate in your case:

You may need to check the durationchange event, as some durations may occur during media loading. Also, depending on whether the metadata is available, you may need to wait for the sound to start playing, check its duration. In short, keep an eye on the durationchange event, and keep track of NaN values ​​when the duration is not yet known!

0
source

I'm not quite sure if I really do this without a problem. but here is the 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>
0
source

More articles:


All Articles