h5网页加背景音乐

更新日期: 2020-01-07阅读: 1.7k标签: 音乐

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

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!