首页 > 如何监测页面audio的下载进度

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

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


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


监测具体的进度,可以绑定progress事件或自己启动一个定时器,并用bufferedduration计算出来,注意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各有各的逻辑:

所以会有调用了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 可用数据足以开始播放

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

【热门文章】
【热门文章】