如何检查音频是否正在缓冲？

Question

我正在使用 new Audio() 创建我的音频元素，但是当添加事件侦听器 'waiting' 时，它会在我按下播放时立即触发，而不会在它开始缓冲时实际触发。

代码：

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

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

source.play()

所以 'waiting' 立即触发，但当播放后音频开始缓冲时它不会再次触发，但是如果我寻找曲目（即使在本地主机上）它也会触发一次。我怎样才能做到这一点？

Answer 1

根据 Mozilla 文档 (https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events)，您从 waiting 事件中看到的行为符合预期：

waiting

Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

要了解媒体下载的进度，您需要收听一次性事件的 loadstart 或重复事件的 progress：

loadstart

Sent when loading of the media begins.

progress

Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's buffered attribute.

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()

Answer 2

所以对我来说这很有效：

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 事件不一致，有时可能恰好相差一秒。

Answer 3

我知道我迟到了，但应该这样做

let slowInternetTimeout = null;

source.addEventListener('loadstart', function () {
    //show buffering
    alert('Buffering');
});
source.addEventListener('waiting', () => {
slowInternetTimeout = setTimeout(() => {
    //show buffering
    alert('Buffering');
    });
});
source.addEventListener('playing', () => {
if(slowInternetTimeout != null){
    clearTimeout(slowInternetTimeout);
    slowInternetTimeout = null;
    //continue playing
    alert('Play continues');
    }
});

如何检查音频是否正在缓冲？

How do I check if audio is buffering?

javascript

html5-audio