Question

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

代码：

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

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

source.play()

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

Answer 1

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

Answer 2

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

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');
    }
});

Answer 3

所以对我来说这很有效：

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事件不一致且有时可能只有一秒钟不同。

如何检查音频是否缓冲？

3 个答案: