实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现。
首先在网页中嵌入背景音乐,html5代码为:
通过audio的id即可控制音乐的播放(play())和暂停(pause()),同时通过改变class改变按钮的背景图片,js代码为(切记要引入jq库):
$(function(){
var music = document.getElementById("bgMusic");
$("#audioBtn").click(function(){
if(music.paused){music.play();
$("#audioBtn").removeClass("pause").addClass("play");
}else{music.pause();
$("#audioBtn").removeClass("play").addClass("pause");}});
});
css样式为:
.pause {background-position: 0 bottom;}
.mscBtn {height: 50px;
background: #fff url(//img.mizuiren.com/musicbtn.png) no-repeat;
display: block;}
demo效果就是本页面,当你打开了该页面之后一定有音乐播放,如果你按以下的按钮没反应,请</