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

Question

我正在使用 HTML5 制作音频播放器。

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

我已经尝试使用我在一些教程中看到的几个属性，但没有一个起作用，而且我找不到关于这个特定主题的任何信息。

这是 audio player我正在尝试编辑。

我希望有人可以指导我如何编辑代码来执行此操作，或者推荐教程、文档或任何信息。

Answer 1

不能保证所有这些都适用于所有浏览器......

...但是，对于本文的其余部分，假设:

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

“canplay” 是第一个有用的事件，就能够播放歌曲而言。
这意味着歌曲的一部分已经准备就绪，如果您按下播放按钮，它至少足以让您听到一些东西。

或者 “canplaythrough” 是浏览器对您是否可以立即开始播放歌曲的猜测，它会不停地运行(基于剩余的数据量和歌曲的下载速度目前正在下载)。

audio.addEventListener("canplay", function () { audio.play(); });

“durationchange” 是一个应该在持续时间更改时触发的事件。
对于没有元数据或不支持元数据的文件类型，整个持续时间可能在文件开始加载时不可用。
在这些情况下，audio.duration 可能会通过浏览器下载媒体的第一位，然后是最后一位，并对文件的长度进行有根据的猜测来更新，或者持续时间可能会从浏览器不得不加载越来越多的文件，并随着时间的推移增加持续时间。我不知道我们在支持方面的进展情况。

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

“progress” 是一个事件，它会在数据传入(下载文件时)时触发约 250 毫秒。
progress 告诉您已对可立即搜索的数据进行了更新。

这是一个很好的事件，可以用来检查您的 audio.buffered 对象，以便更新进度条的“已加载”部分。

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

然后就可以使用"timeupdate"来处理播放了。
timeupdate 将在歌曲播放时每秒更新几次(随着 audio.currentTime 向前移动)。