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