图标:
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');
});
});