解决微信和苹果端不能自动播放音乐

ios 为了节省用户流量，对于 audio标签的 preload 和 autopaly 标签会自动拦截，除非用户手动点击交互才会执行 。同时audio标签在苹果端或微信端不能设置声音大小和是否静音，而通常我们需要设置网页背景音乐或者设置定时播放语言（订单提醒系统），这时我们就需要解决在苹果端和微信端出现的声音问题？

在网页中插入audio标签,设置src属性（为音乐的播放地址）

<audio controls id="bgmusic">
<source src="music/order.mp3" type="audio/mpeg">
</audio>

controls为audio控制条(默认都需要显示），pc和移动端一般都支持。 

pc端设置autoplay="autoplay"(自动播放）和loop="loop"(循环播放）可以正常实现功能，但是在部分移动端(苹果端和微信端）这两个属性失效，所以在移动端需要利用JS来实现自动播放！同时也有很多属性在苹果端和微信端也是不能使用的！

一、解决IOS和微信端不能自动播放的问题？

产生原因：ios 和微信端为了节省用户流量，对于 audio标签的 preload 和 autopaly 标签会自动拦截，需用户手动点击交互才会执行 。

（1）苹果端不能播放解决办法？

加载时默认触摸实现自动播放代码如下：

   audio.load();
   audio.play();
   $(document).on("touchstart",function() {audio.play()})

（2）微信端因为本身浏览器限制，导致不能自动播放！

需要先引入 http://res.wx.qq.com/open/js/jweixin-1.0.0.js脚本

document.addEventListener("WeixinJSBridgeReady", function () {	
    audio.load();
    audio.play();
}, false);

二、解决不能放在定时器中出现的问题？[订单提醒中应用]

有些时候需要放在定时器自动播放音乐，比如每隔1分钟播放一个订单状态。

如果将上面代码直接放到定时器时，同样也不能自动播放音乐！

解决思路：开始是自动先触发自动播放后，然后在定时器中播放音乐，最初想用声音控制，加载时默认静音，然后后续如果有订单时，设置声音。但是在Ios中对audio声音大小限制不起作用。

最终解决方法：

如果有订单时，加载后自动播放。

如果没有订单先播放，然后将播放器暂停。

这样就解决了播放器加载时触发了播放按钮！

课件下载：https://pan.baidu.com/s/1jpARsG08wbKFZVBW_HiVTA【百度网盘】