H5的audio在ios系统的微信上不能自动播放的问题

前几天有个需求，要在H5页面中添加背景音乐，本以为很easy,却也踩了一些坑，废话不多说，进入正题：
撸完代码测试的时候才发现在安卓手机上背景音乐可以正常播放，但在iphone里的微信和safari中不能播放！

查了很多资料，原来是微信的锅，微信的js api是建立在微信内置浏览器的私有对象WeixinJSBridge上，在微信中打开页面的话会初始化这个对象，当这个对象准备好的时候，会抛出WeixinJSBridgeReady这个事件，我们在这个事件的回调中可以播放音乐，直接上代码：

*html*

     <audio id="bg-audio" src="bg.mp3" loop="loop" autoplay="autoplay"></audio>

*js*

    var bgAudio = document.getElementById('bg-audio');
    bgAudio.load();
    bgAudio.play();
    // 兼容在微信里自动播放
    document.addEventListener("WeixinJSBridgeReady", function () {
        bgAudio.load();
        bgAudio.play();
    }, false);