Tại sao audio.buffered.end (0) nhận được thông báo lỗi khi tôi cố gắng lấy thời gian đệm

Question

Tôi đang xây dựng trình phát danh sách phát mp3 với HTML5 và jQuery. Tại máy nghe nhạc này có một thanh ngang phát triển dần dần kết hợp với hiện tại đệm của tập tin mp3.

đây là mã đầy đủ của tôi: 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); 

nhưng Fir efox cho tôi một thông báo lỗi nói:

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

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

và Google chrome cho biết:

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

Answer 1

Tôi tin rằng lỗi đó là đến khi truy cập vào buffered.end trước phần tử được khởi tạo. bạn có thể viết lại mã đó để tránh mã đó

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

Answer 2

Câu trả lời được chấp nhận không giải quyết được sự cố cho tôi. Bạn cũng nên kiểm tra xem các ca khúc đã được nạp trước khi bạn buffered.end truy cập như vậy:

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