如何检查音频是否缓冲？

Question

我创建了我的音频元素new Audio()，但是当添加事件监听器'waiting'时，它会立即触发，当我按下play并且实际上在启动缓冲时没有触发。

代码：

var source = new Audio('some-url'); 

source.addEventListener('waiting', function() { 
    alert('Buffering'); 
}; 

source.play() 

所以'waiting'触发向右走，但玩后，当音频开始缓冲，但它也触发ONCE，如果我所寻求的轨道（即使在本地主机）它不会再次触发。我怎样才能做到这一点？

Answer 1

所以对我来说这工作：

var source, sourceTime, dateTime; 
source = new Audio('some-url'); 

function compare() { 
    var difference = Math.abs(sourceTime - dateTime); 
    if (difference > 1000) { 
     alert('buffering!'); 
    } 
}; 

source.addEventListener('timeupdate', function() { 
    var date, time; 
    date = new Date(); 
    time = date.getTime(); 
    sourceTime = date; 
}); 

function updateTime() { 
    var date, time; 
    date = new Date(); 
    time = date.getTime(); 
    dateTime = time; 
    compare(); 
    setTimeout(updateTime(), 50); 
}; 

source.play() 
updateTime(); 

你需要检查，如果差大于1000是因为timeupdate事件是不一致的，有时可能是完全1秒差异的原因。

Answer 2

你从waiting事件看到的行为是否如预期每Mozilla的文档（https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events）：

等待

当发送请求的操作（如播放）被延迟未决完成另一项操作（如寻找）。

为了得到媒体的下载进度，你要听任何loadstart为重复发生的事件是一次性事件或progress：

发送时

loadstart开始加载媒体。

进步

定期发送通知的进度有关方面下载媒体。有关当前已下载媒体数量的信息可在媒体元素的缓冲属性中找到。

var source = new Audio(); 

source.addEventListener('waiting', function() { 
    window.alert('Waiting'); 
}; 

source.addEventListener('loadstart', function() { 
    window.alert("Loading"); 
}; 

source.addEventListener('progress', function() { 
    // do something, eg: 
    var timeRanges = source.buffered; 
    if (timeRanges && timeRanges.length > 0) { 
     console.log(timeRanges); 
     // do something with the TimeRanges object 
    } 
}; 

source.play()