移动端播放音频的相关坑

[semi-xi]

在最近的一个项目之中需要使用音频的，但是在实际使用过程中，发现很容易出现一些意料之外的事情，现在就几点进行一个说明

1. safari浏览器之中，音频无法自动触发，只能够由用户操作的事件触发，例如touchstart，click等事件。

2. 在移动端之中，大部分音频都无法自动加载，也就是无法进行一个preload操作，况且浏览器是不认这个preload的这个属性。解决的办法是，当用户在页面上有操作的时候，获取这个音频，执行pause()方法，这样的话可以强制让这个音频进入缓存。等待合适的时机再播放，或者你可以让它直接播放当做一个背景音乐

   var  oAudio = document.getElementById('xx');
   oAudio.pause();

3. 播放双音频的问题，在新的机型里面是可以出现双音频的，我的6S 版本9.3.5 跟小米3 版本4.4.4。结果是6S在微信跟safari都可以播放双音频，小米3在微信可以双音频，在原生浏览器只能单音频

4. 微信播放音频，无法使用用户操作这个事件去绑定触发，需要使用微信sdk里面的WeixinJSBridgeReady去触发

   var audio = document.getElementById(id);
   audio.play();
   document.addEventListener("WeixinJSBridgeReady", function () {
           audio.play();
   }, false);

5. 音频的网页处于后台的时候，由于页面还在继续执行，所以音频如果在播放的话还是在继续播放的，但是可以利用window.onblur 的办法去检测页面的焦点状态从而实现暂停音频，visibilitychange 事件也是可以的

6. 判断音频加载完可以使用oncanplaythrough去判断，但是这个在pc跟mobile是出现两极分化的，如果是在pc端，这个可以直接去触发。但是如果是在移动端的话，这个事件需要等用户点击了，然后音频出现播放了，才会触发换个事件，所以非常的蛋疼，暂时没有很好的解决方案！可以看下这个canplaythrough的坑

7. 音频在安卓这里会出现不可预知的结果，尤其是音频延迟，如果有解决了的话可以告诉下