Javascript 在音频播放器中添加缓冲条

我在用HTML5制作音频播放器

我想知道如何添加一个缓冲条，以便用户可以看到歌曲加载了多长时间

我试过使用一些教程中看到的几个属性，但都不起作用，而且我找不到关于这个特定主题的任何内容

这是我试图编辑的

---

我希望有人能指导我如何编辑代码，或者推荐教程、文档或任何信息。

不能保证所有这些都能在所有浏览器上运行

…但是，在本文的其余部分，假设：

var audio = new Audio();
audio.src = "//example.com/some-really-long-song.mp3";

“canplay”

是第一个能够播放歌曲的有用事件。
这意味着这首歌的一部分已经准备好了，如果你按下播放按钮，它至少足以让你听到一些东西

或者，

“canplaythrough”

是浏览器猜测您是否可以立即开始播放歌曲，并且它将不停地运行（根据剩余下载数据量以及歌曲当前下载速度）

“durationchange”

是当持续时间更改时应触发的事件。
对于没有元数据或元数据不受支持的文件类型，在文件开始加载时，整个持续时间可能不可用。
在这些情况下，

audio.duration

可能通过浏览器下载媒体的第一位，然后是最后一位来更新，并对文件的长度进行有根据的猜测，或者持续时间可能来自浏览器，浏览器必须加载越来越多的文件，并随着时间的推移而增加。我不知道我们在支持方面的情况

audio.addEventListener("durationchange", function () {
    player.time.duration.update(audio.duration);
});

“进度”

是一个事件，当数据进入时（下载文件时）会触发约250ms。

progress

告诉您，已对可立即查找的数据进行了更新

这使它成为一个很好的事件，用于检查

音频缓冲对象，以更新进度条的“加载”部分

audio.addEventListener("progress", function () {
    player.progressBar.update(audio.buffered.start(0), audio.buffered.end(0));
});

然后您可以使用
“timeupdate”
处理播放。

timeupdate
将在播放歌曲时每秒更新几次（如
audio.currentTime
向前移动）

audio.addEventListener("progress", function () {
    player.progressBar.update(audio.buffered.start(0), audio.buffered.end(0));
});