ios下audio多音轨自动播放

手机界的ie——ios手机，总是会有很多自己的一些规则，或好或坏的影响了开发者。

这次记录的是本次开发遇到的多音轨播放音乐，各种场景下切换音频时候遇到了一些坑。

无法自动播放

ios下的safari和微信内置浏览器都不支持audio的自动播放

document.addEventListener('WeixinJSBridgeReady',function(){audio.play()},false)

WeixinJSBridgeReady 事件从页面加载开始到结束只会执行一次

多音轨播放的时候就会有点问题了。因为我需要一个背景音乐和点击播放的音效。

解决

创建两个audio标签，一个为背景音乐，一个为其他音效

<audio id="audioBg1" preload loop autoplay :src="url" >audio>
<audio id="audioBg2" preload controls autoplay :src="otherurl" >audio>

// 加载一次
document.addEventListener(
  "WeixinJSBridgeReady",
  function() {
    audioBg1.load();
    audioBg2.load();
  },
  false
);

// 每次替换audioURL
audioBg2.setAttribute("src", musicURL);
audioBg2.load();
audioBg2.volume = 0.6;
audioBg2.play();

注意：

1. audio标签必须设置 controls , 然后通过css隐藏该audio ,否则无法播放 ;
2. 在页面加载的时候需要通过 监听 WeixinJSBridgeReady 让audio.load()加载一次 ,否则后续也无法自动播放 ;