解决H5中背景音乐ios及微信端无法自动播放问题 以及暂停

解决H5中背景音乐ios及微信端无法自动播放问题 以及暂停 ★★★★★★【完美解决苹果移动端不能自动播放背景音乐问题】

html

<audio autoplay="autoplay" loop="loop" id="bg-music">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

js

需要引入jq以及微信的js
<script src="./jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 
<script>

function autoPlayMusic() {
        // 自动播放音乐效果，解决浏览器或者APP自动播放问题
        function musicInBrowserHandler() {
            musicPlay(true);
            document.body.removeEventListener('touchstart', musicInBrowserHandler);
        }
        document.body.addEventListener('touchstart', musicInBrowserHandler);

        // 自动播放音乐效果，解决微信自动播放问题
        function musicInWeixinHandler() {
            musicPlay(true);
            document.addEventListener("WeixinJSBridgeReady", function () {
                musicPlay(true);
            }, false);
            document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
        }
        document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
  function musicPlay(isPlay) {
        var audio = document.getElementById('bg-music');
        if (isPlay && audio.paused) {
            audio.play();
        }
        if (!isPlay && !audio.paused) {
            audio.pause();
        }
    };
  autoPlayMusic();

// 关闭音乐
$('.music-pic').click(function () {
    if($('.music-pic').hasClass('close')){
        document.getElementById("bg-music").muted=false;
        $('.music-pic').removeClass('close');
    }else {
        $('.music-pic').addClass('close');
        document.getElementById("bg-music").muted=true;
    }
});