手机端使用audio遇到的问题

背景

比较安卓与iOS端audio使用的差异,主要解决ios的兼容性问题

数据加载完成时的事件

两个终端可播放的事件不一样,所以可以在做兼容时区分一下终端

  • 安卓
    loadedmetadata,当浏览器已加载音频/视频的元数据时
  • iOS
    canplaythrough,当浏览器可在不因缓冲而停顿的情况下进行播放时

ios预加载和首次自动播放的问题

安卓端可以在页面初始化进行资源的加载,并且可以出发播放器的播放事件,不会用问题。但是ios就不一样了。
iOS端的媒体资源的加载与首次自动播放必须在微信端weixinJsBridgeReady事件中进行,获取通过用户手动出发的事件中进行,该事件也不可通过我们js模拟。

多个媒体资源需要连续播放时不能复用播放器

比如我们需要连续播放多个语音,就不能只创建一个audio标签,因为每次加载都需动态改变播放链接,然后执行load进行下载,那么这个下载过程可能让用户等很久。并且在iOS端,会有加载两次的bug。
解决方案就是为每一条音频都动态创建一个播放标签,动态加载资源。