h5背景音乐＜music＞

最新推荐文章于 2023-06-27 18:55:39 发布

原创最新推荐文章于 2023-06-27 18:55:39 发布 · 994 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #背景音乐

html5 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用CSS动画实现音乐图片的旋转效果，并通过JavaScript实现点击切换音乐播放与暂停，以及监听首次触摸播放音乐的功能。同时，代码示例展示了在微信环境下自动播放音乐的处理方式。

音乐图片旋转动画

#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>