javascript - 如何监测页面audio的下载进度

Question

我想在页面里引入一个audio标签，资源文件放在服务器上，如何监测到下载的进度呢，不仅仅是知道什么时候下载完成能播放了，而是下载的一个进度，有相关的事件吗？

Answer 1

监测具体的进度，可以绑定progress事件或自己启动一个定时器，并用buffered和duration计算出来，注意buffered是一个timeRanges对象，详情请参考：http://www.w3school.com.cn/html5/av_prop_buffered.asp。

progress事件和buffered在安卓上面的webkit系列支持性很差，这是我前年到去年做audio相关的 Web App 时的实测结果。不知道现在怎样了，缺乏测试机，也没有找到大规模的靠谱测试……

---

至于什么时候可以播放了，这个问题反而比上面的要棘手。

audio有相应事件可以辅助判断音频是否可以播放，但各个浏览器对下面的事件支持不完全/不完整，如果对兼容性敏感的话，不建议使用。

事件	描述
progress	当浏览器正在下载音频/视频时
canplay	当浏览器可以播放音频/视频时
canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时

判断音频能否播放，现在最成熟的方案还是在音频调用loadAPI以后，开启一个定时器判断<audio>的相应readystate属性是否大于了1。“用定时器监测代替事件”依然是解决兼容性问题的万金油。

为何一定要做这个判断呢，因为audio标签的play的api的实现有差异。现在的浏览器分成两个阵营，play各有各的逻辑：

• Firefox、桌面端Chrome、桌面和移动端Safari：等待音频的readystate过1，然后播放
• IE9、安卓移动端Webkit：如果音频的readystate没有过1，什么都不做

所以会有调用了audio.play但是什么也没有发生的情况……因此一定要在时序上保证：

1. audio.load()
2. 音频的下载进度到了audio.readystate>1的时候
3. audio.play()

---

参考：w3school HTML 5 视频/音频参考手册

下表为readystate的对应值的代表。

0	HAVE_NOTHING	没有关于音频/视频是否就绪的信息
1	HAVE_METADATA	关于音频/视频就绪的元数据
2	HAVE_CURRENT_DATA	关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
3	HAVE_FUTURE_DATA	当前及至少下一帧的数据是可用的
4	HAVE_ENOUGH_DATA	可用数据足以开始播放

---

感谢@怡红公子提醒，把跟问题前一个分句相关的答案调到后头……

Answer 2

有个buffered属性不知道是不是你要找的，参考资料：

• http://stackoverflow.com/questions/8025210/how-to-know-the-progress-of-buffered-data-in-html5-audio
• http://stackoverflow.com/questions/5029519/html5-video-percentage-loaded