Why does audio.buffered.end(0) get an error message when I try to get buffered time

Question

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.

he

Answer 1

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+"%");
}

Answer 2

track = document.getElementById("music");
track.onprogress = function(){
    if(track.buffered.length>0){
        var w = 100*(track.buffered.end(0))/track.duration;
        $('#buffered').css("width",w+"%");
    }
}

Answer 3

The accepted answer doesn't solve the problem for me. You also should check that the track has loaded before you access buffered.end like so:

track.onprogress = function(){
    if (track.readyState === 4){
        var w = 100*(track.buffered.end(0))/track.duration;
        $('#buffered').css("width",w+"%");
    }
}

Answer 4

This error occurs when the audio element is not loaded yet, so there are no time ranges for the code to find so it returns an error.