Warum bekomme ich eine Fehlermeldung, wenn ich versuche, gepufferte Zeit zu bekommen.

Question

Ich baue mp3 playlist player mit HTML5 und jQuery. Bei diesem Player gibt es einen horizontalen Balken, der in Verbindung mit dem gepufferten Geschenk der MP3-Datei schrittweise wächst.

hier ist mein vollständiger 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); 

aber Fir EFOX geben Sie mir eine Fehlermeldung, sagte:

IndexSizeError: Index or size is negative or greater than the allowed amount

var w = 100*(track.buffered.end(0))/track.duration;

und Google Chrome sagte:

Uncaught IndexSizeError: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0).

Answer 1

Ich glaube, dass Fehler kommt beim Zugriff auf buffered.end bevor das Element initialisiert wird. können Sie diesen Code neu schreiben, wie es Antwort

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

Answer 2

Die akzeptierte zu vermeiden nicht das Problem für mich lösen. Sie sollten auch prüfen, ob die Spur, bevor Sie Zugriff buffered.end wie so geladen ist:

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

Answer 3

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