h5 audio 背景音乐播放开关控制

现在的活动h5基本都会有bgm的需求，下面提供一个通用的做法。


上面是开关的按钮，页面刚加载进来的时候，音乐是自动播放的。点击开关按钮可以控制音乐的播放和暂停。
产品：需求很简单，怎么实现我不管！
开发：好！那我给你来个五彩斑斓的黑
html:

<!--背景音乐-->
<audio id="music" loop="loop" style="display: none;"></audio>
<!--音乐按钮-->
<div id="btn-music" >
    <img src="images/btn_music_on.png" alt="" id="btn-music-on" />
    <img src="images/btn_music_off.png" alt="" id="btn-music-off" class="hide" />
</div>

样式根据自己的需要来吧。
看看js:

var c = document.getElementById("music");
    c.src = "./mp4/bgm.mp3";
    c.play();
    //处理微信的时候
    document.addEventListener("WeixinJSBridgeReady", function(){
        if(typeof WeixinJSBridge == "object"){
            WeixinJSBridge.invoke("getNetworkType", {}, function(j){
                c.play();
            })
        }
    });
music_state = 1;
//音乐按钮
   $("#btn-music").on("click", function(){
    if(music_state){
        c.pause();
        music_state = 0;
        $("#btn-music-off").removeClass("hide");
        $("#btn-music-on").addClass("hide");
    }else{
        c.play();
        music_state = 1;
        $("#btn-music-on").removeClass("hide");
        $("#btn-music-off").addClass("hide");
    }
});