给页面添加背景音乐（兼容Android与iOS）

  在我们做很多项目的时候，总会有需要给页面添加背景音乐的需求，在移动端呢，需要同时考虑到Android系统和iOS系统是否可以播放，以下代码音频播放代码可以完美的兼容Android和iOS系统，本人亲测有效。

html:

<div class="music-btn music-icon"></div>//设置音乐图标
		<audio id="bg-music" loop="loop" preload="auto" src="d003_Bit_Bit_Loop.mp3" style="display:none; height: 0;"></audio>//音乐播放

css:

/*音乐*/
.music-btn{
    width: 0.4rem;
    height: 0.4rem;
    position: fixed;
    top: 0.15rem;
    left: 0.15rem;
    background-size: 100% 100%;
    z-index: 1;
}
.music-icon{
    background-image: url("../img/play.png");
}
.pause{
    background-image: url("../img/pause.png");
}

js:

// 背景音乐
    // 点击音乐图标播放与暂停
    $('.music-btn').click(function () {
        bf();
    })
    function musicInWeixinHandler() {
        musicPlay(true);
        document.addEventListener("WeixinJSBridgeReady", function() {
            musicPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);

    function musicPlay(isPlay) {
        var media = document.querySelector('#bg-music');
        if (isPlay && media.paused) {
            media.play();
        }
        if (!isPlay && !media.paused) {
            media.pause();
        }
    }

    function bf() {
        var audio = document.getElementById('bg-music');
        if (audio !== null) {
            if (audio.paused) {
                audio.play();
             $('.music-btn').addClass("music-icon");
             $('.music-btn').removeClass("pause");


            } else {
                audio.pause();
             $('.music-btn').removeClass("music-icon");
             $('.music-btn').addClass("pause");
            }
        }
    }

如有问题或者错误，欢迎留言，谢谢~