H5在微信端自动播放音乐

 

<template>
    <audio style="display:none; height: 0" id="bg-music" preload="auto"     
          src="${staticPath}/img/breakEgg/img/beijingyinyue.mp3" loop="loop">
    </audio>
    <!--旋转音乐按钮html:-->

    <div class="music">
            <i class="icon-music open" num="1" style="background-image: url(${staticPath}/img/breakEgg/img/icon-muisc.png);"></i>
            <i class="music-span" style="background-image: url(${staticPath}/img/breakEgg/img/music-span.png);"></i>
        </div>

</template>
<script>
 //音乐自动播放
        $(document).ready(function(){
            autoPlayMusic();
            audioAutoPlay();
        });
        function audioAutoPlay() {
            var audio = document.getElementById('bg-music');
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
            }, false);
        }
        // 音乐播放
        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 media = document.querySelector('#bg-music');
            if (isPlay && media.paused) {
                media.play();
            }
            if (!isPlay && !media.paused) {
                media.pause();
            }
        }
        //开始结束音乐js:



        $(".music").click(function(){
            if($(".icon-music").attr("num") == "1"){
                $(".icon-music").removeClass("open");
                $(".icon-music").attr("num","2")
                $(".music-span").css("display","none");
                document.getElementById("bg-music").pause();//关闭音乐
                setTimeout(musicHide,2000);
            }else{
                $(".icon-music").attr("num","1");
                $(".icon-music").addClass("open");
                $(".music-span").css("display","block");
               document.getElementById("bg-music").play();//开启音乐
                setTimeout(musicHide,2000);
            }
            
 
          });
</script>