h5网页加背景音乐

html插入mp3代码:

 <audio autoplay="autoplay" loop="true" id="bg-music"><source src="./images/haimianbaobao.mp3"></audio>

上面的代码在浏览器是不显示的，因此，我们给个div放播放的图标：

 <div id="musicbutton" class=""></div>

图标的相关css代码：

#musicbutton {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10px;
    top: 10px;
    background: url('../images/musicbutton.svg')no-repeat;
    background-size: 100%;
}

.playmusic {
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(359deg)
    }
}

到此，这些代码在微信上测试可以自动播放，但是在一些浏览器不可以自动播放，因此我们给图片点击，开始播放，再次点击，暂停播放：

$(function() {
    var music = document.getElementById("bg-music");
    //给图标添加点击事件
    $("#musicbutton").click(function() {
        if (music.paused) {
            music.play();
           // $('#musicbutton').addClass('playmusic');
        } else {
            music.pause();//播放暂停
            $('#musicbutton').removeClass('playmusic');//图标旋转暂停
        }
    });
    //监听播放转态，播放中，让图片不停地旋转
    music.addEventListener("playing", function() {
        $('#musicbutton').addClass('playmusic');
    });

});

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_7298