手机端控制音乐自动播放和关闭开启

摘要：在页面里添加音乐文件控制音乐自动播放音乐音乐播放自动播放音乐效果，解决浏览器或者自动播放问题自动播放音乐效果，解决微信自动播放问题样式控制音乐小图标的样式音乐小图片点击控制音乐播放和暂停

// 音乐
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();
    }
});