1

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

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

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

这是我正在尝试编辑的音频播放器。

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

4

1 回答 1

2

无法保证所有这些都适用于所有浏览器......

...但是，假设，对于这篇文章的其余部分：

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

于 2013-03-30T23:48:51.257 回答