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);