Neden arabellek zamanı almayı denediğimde audio.buffered.end (0) hata mesajı alıyor

Question

HTML5 ve jQuery ile mp3 çalma listesi yürütücüsü yapıyorum. Bu oyuncuda, mp3 dosyasının tamponlu hediyesi ile birlikte kademeli olarak yatay bir çubuk büyür. 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); 

ama Köknar burada

benim tam kodu efox bana bir hata mesajı vermek söyledi:

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

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

ve Google krom söyledi:

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

Answer 1

ben eleman başlatılmadan önce buffered.end erişirken bu hata geliyor inanıyoruz. o

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

Answer 2

kabul yanıt benim için sorunu çözmez önlemek için Eğer bu kodu yeniden yazabilirsiniz. Ayrıca pist şöyle size erişim buffered.end önce yüklenmiş olduğunu kontrol etmelidir:

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