给自己的html5加上背景音乐,网页加背景音乐用JS控制播放 HTML5 - audio

制作一个游戏网站首页，要求加入背景音乐

上面一行解决了， autoplay="autoplay"表示自动播放， loop="loop"循环播放。

下面继续改造，要控制暂停和播放。加入一个按钮，点击按钮停止播放背景音乐，再次点击继续背景音乐。

要实现就要用到JS,用到播放和.play()和暂停.pause()。

function autoPlay() {

var myAuto = document.getElementById("music2");

myAuto.play();

}

function closePlay() {

var myAuto = document.getElementById("music2");

myAuto.pause();

}

按钮用图标显示2种状态,CSS如下:

body {background-color:#b0c4de;}

.music.pause {

background-position: -65px 0;

}

.music {

display: block;

width: 32px;

height: 30px;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAgCAMAAADJyc2SAAAAe1BMVEUAAADNgkbwAAAAKHRSTlMAh/zha1rxs01ILQPRzAumlYwZ88V4H+PXMLl7QDwSDwbnrJqZXuVdV