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"

progress是一个事件，当数据进入时会触发〜250ms（下载文件时）。
audio.buffered告诉您已对现在可以查找的数据进行了更新。

这使得它成为检查audio.addEventListener("progress", function () { player.progressBar.update(audio.buffered.start(0), audio.buffered.end(0)); });对象的好事件，以便更新进度条的“已加载”部分。

"timeupdate"

然后您可以使用timeupdate来处理播放当歌曲正在播放时，audio.currentTime会每秒更新几次（当{{1}}向前移动时）。

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

1 个答案: