I'm building mp3 playlist player with HTML5 and jQuery. At this player there is a horizontal bar grow gradually in conjunction with the buffered present of mp3 file.
here is my full code: get buffered end
HTML5:
<audio id="music" controls>
<source src="https://archive.org/download/musicTestAudio27/Very%20nice%20%2827%29.mp3" type="audio/mpeg">
</audio>
<br/>
<div id="buffered"></div>
CSS:
#buffered{
border:solid #ccc 1px;
height:10px;
background:red;
display:block;
width:1%;
}
Javascript:
var track = document.getElementById("music");
setInterval(function(){
var w = 100*(track.buffered.end(0))/track.duration;
$('#buffered').css("width",w+"%");
}, 1000);
but Firefox give me an error message said:
IndexSizeError: Index or size is negative or greater than the allowed amount
var w = 100*(track.buffered.end(0))/track.duration;
and Google chrome said:
Uncaught IndexSizeError: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0).
I believe that error is coming when accessing buffered.end before the element is initialized. you can rewrite that code as to avoid it
track = document.getElementById("music");
track.onprogress = function(){
var w = 100*(track.buffered.end(0))/track.duration;
$('#buffered').css("width",w+"%");
}
Collected from the Internet
Please contact javaer1[email protected] to delete if infringement.
Comments