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://www.fly63.com/article/detial/7298