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

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

阅读 11k
评论
    2 个回答
    Humphry
    • 16.2k

    监测具体的进度,可以绑定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各有各的逻辑:

    • 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 可用数据足以开始播放

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

    评论 赞赏
      撰写回答

      登录后参与交流、获取后续更新提醒