标签：
在以swiper为主体的H5中，在背景音乐之外，每页添加不同的声音。
一。HTML部分
在<body>中，swiper-container之外，添加独立的块，代码如下：
<div id="playbox">
<audio loop="loop" id="audio" src="music/BGM.mp3" preload="auto"></audio>
<audio id="voice" src="music/p10.wav" preload="auto"></audio>
</div>
其中，第一条为背景音乐，第二条为voice。
二、CSS部分
*此部分定义音乐播放器#playbox的样式。
@-webkit-keyframes bmic {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#playbox {
display: inline-block;
width: 40px;
height: 40px;
background-size: 100% auto;
position: fixed;
z-index: 100;
right: 20px;
bottom: 30px;
overflow: hidden;
opacity: 0.6;
background: url(‘../img/play.png‘) no-repeat center center;
background-size: 100% 100%;
}
.on {
-webkit-animation: bmic 1s infinite linear;
}
.off {
-webkit-animation: none;
}
三、js部分
1.定义播放器控制函数，代码如下：
//播放器控制
function toggleplay() {
var o = document.getElementById(‘audio‘);
if (o.paused) {
o.play();
}
else {
o.pause();
}
}
2.定义控制voice的函数，代码如下：
function playvoice(no) {
var voiceplayer = document.getElementById(‘voice‘);
var BGMplayer = document.getElementById(‘audio‘);
voiceplayer.src = "music/p" + no + ".wav";
voiceplayer.play();
BGMplayer.volume = 0.2;
if (no == 11) {
BGMplayer.volume = 1;
}
if (no == 9) {
voiceplayer.pause();
setTimeout("document.getElementById(‘voice‘).play();", 12000);
}
if (no == 10) {//此处可实现在第11页暂停播放
voiceplayer.pause();
}
}
3.在第11页擦除图片后继续播放，内容放在擦除完成函数中，代码如下：
function cleareraser() {
//setTimeout(‘$.fn.fullpage.setAllowScrolling(true);‘, 2000);
$(‘#cabeibox‘).css("z-index", -200).hide();
$(‘#sliderarr‘).show();
var voiceplayer = document.getElementById(‘voice‘);
voiceplayer.play();
}
4.在文档加载完成函数中，定义播放器的初始状态，代码如下：
$(document).ready(function () {
$(‘#audio‘)[0].play();
$("#playbox").click(function () { toggleplay(); });
$("#audio").bind("play", function () {
$("#playbox").removeClass("off").addClass("on");
}).bind("pause", function () {
$("#playbox").removeClass("on").addClass("off");
});
//注意，此处是#audio上bind，结果为#playbox上移除添加类
});
（*bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。）
以上代码实现的效果为：
在播放背景音乐的同时，每一页都播放新的声音；
在第11页显示擦除层，音乐暂停，擦除完成后开始播放第11页（no==10）的音乐。
（以上部分代码来自《小象的心声》H5，特此致谢）
Amy zhang
2016.05.09
标签：
原文地址：http://blog.csdn.net/pingguoyuan/article/details/51351246
