h5背景音乐 ＜music＞

 音乐图片旋转动画

#musicImage{
            animation: rotateArround 3.5s linear 3s infinite alternate;
            -webkit-animation: rotateArround 3.5s linear 3s infinite alternate;
            -moz-animation: rotateArround 3.5s linear 3s infinite;
            -ms-animation: rotateArround 3.5s linear 3s infinite;
            -o-animation: rotateArround 3.5s linear 3s infinite;
        }
        @keyframes rotateArround {
            from {transform: rotateZ(0deg);}
            to {transform: rotateZ(360deg);}
        }

        @-webkit-keyframes rotateArround {
            from {-webkit-transform: rotate(0deg);
            }
            to {-webkit-transform: rotate(360deg);}
        }

        @-moz-keyframes rotateArround {
            from {-moz-transform: rotate(0deg);}
            to {-moz-transform: rotate(360deg);}
        }

        @-ms-keyframes rotateArround {
            from {-ms-transform: rotate(0deg);}
            to {-ms-transform: rotate(360deg);}
        }

        @-o-keyframes rotateArround {
            from {-o-transform: rotate(0deg);}
            to {-o-transform: rotate(360deg);}
        }

 进入页面监听 第一次触摸屏幕播放音乐

标签 自动播放 第一次禁音 触摸屏幕解除禁音

<audio id="music" style="display: none" class="musicControl" autoplay loop muted src="https://xxxxx/victory.mp3"></audio>
<img id="musicImage" style="position: fixed;z-index: 999;height:40px;right: 30px;top: 30px;" src="../static/webapp/mp3/icon_pause@3x.png" alt=""/>
<script>

    let musicImage = document.getElementById('musicImage');
    let is = 1;
    musicImage.addEventListener('click', () => {
        let music = document.getElementById('music');
        if (is === 0) {
            is = 1;
            musicImage.src = '../static/webapp/mp3/icon_pause@3x.png';
            music.play();
        } else {
            is = 0;
            musicImage.src = '../static/webapp/mp3/icon_play@3x.png';
            music.pause();
        }
    });
    if (typeof WeixinJSBridge == "undefined") {
        document.addEventListener('WeixinJSBridgeReady', function () {
            document.getElementById('music').play();
        }, false);
    } else {
        WeixinJSBridge.invoke("getNetworkType", {}, function () {
            document.getElementById('music').play();
        });
    }
    let play = document.addEventListener('touchstart',function () {
        let music = document.getElementById('music');
        music.muted=false;
        musicImage.src = '../static/webapp/mp3/icon_pause@3x.png';
        document.removeEventListener('touchstart',play);
    });


</script>