Javascript 如何检查音频是否缓冲？

我正在使用

new audio（）

创建我的音频元素，但是当添加事件侦听器

“waiting”

时，它会在我按下play时立即触发，而在它开始缓冲时实际上不会触发

代码：

---

因此，

'waiting'

会立即触发，但在播放后音频开始缓冲时不会再次触发，但如果我搜索曲目，它也会触发一次（即使在本地主机上）。我该怎么做

根据Mozilla文档（），您在

等待事件中看到的行为与预期一致：

等待

当请求的操作（如回放）延迟，等待另一个操作（如搜索）完成时发送

要获取媒体下载进度，您需要收听一次性事件的
loadstart
，或定期事件的
progress
：

loadstart

开始加载介质时发送

进步

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

所以对我来说，这是有效的：

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
事件不一致，有时可能正好相差一秒钟。
我知道我迟到了，但这应该可以

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

最后，我从一个日期对象中使用了getTime（），然后将那些与timeupdate事件（在开始缓冲时停止）的事件与当前日期进行比较。工作起来很有魅力！
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();

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