java网页背景音乐_h5网页加背景音乐

图标：

html插入mp3代码:

上面的代码在浏览器是不显示的，因此，我们给个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');

});

});