摘要：在頁面里添加音樂文件控制音樂自動播放音樂音樂播放自動播放音樂效果，解決瀏覽器或者自動播放問題自動播放音樂效果，解決微信自動播放問題樣式控制音樂小圖標的樣式音樂小圖片點擊控制音樂播放和暫停

// 音樂
backgroundMusic(document.getElementById("music"));

// 音樂播放
function backgroundMusic(audio){
    // 自動播放音樂效果，解決瀏覽器或者APP自動播放問題
    if(audio.paused){
        audio.load();
        audio.play();
    }
    function musicInBrowserHandler() {
        if(audio.paused){
            audio.load();
            audio.play();
        }
        document.body.removeEventListener("touchstart", musicInBrowserHandler);
    }
    document.body.addEventListener("touchstart", musicInBrowserHandler);

    // 自動播放音樂效果，解決微信自動播放問題
    function musicInWeixinHandler() {
        if(audio.paused){
            audio.load();
            audio.play();
        }
        document.addEventListener("WeixinJSBridgeReady", function () {
            if(audio.paused){
                audio.load();
                audio.play();
            }
        }, false);
        document.removeEventListener("DOMContentLoaded", musicInWeixinHandler);
    }
    document.addEventListener("DOMContentLoaded", musicInWeixinHandler);
}

.music-icon {
    /* display: none; */
    z-index: 999;
    width: .82rem;
    height: .82rem;
    position: absolute;
    top: .2rem;
    right: .1rem;
    background: url("../image/music-open.png") no-repeat;
    background-position: 0 0;
    background-size: .82rem .82rem;
}
.music-icon.open{
    background: url("../image/music-open.png") no-repeat;
    background-size: .82rem .82rem;
}
.music-icon.close{
    background: url("../image/music-close.png") no-repeat;
    background-size: .82rem .82rem;
}

$(".music-icon").on("touchstart",function(){
    if($("#music")[0].paused){
        $(this).removeClass("close").addClass("open");
        $("#music")[0].play();
    }else{
        $(this).removeClass("open").addClass("close");
        $("#music")[0].pause();
    }
});