H5--在背景音乐外，每页添加声音--利用js语句

最新推荐文章于 2021-06-03 03:50:48 发布

产品汪的进阶

最新推荐文章于 2021-06-03 03:50:48 发布

阅读量5.2k

点赞数 1

文章标签： html 音乐 javascript 擦除

本文链接：https://blog.csdn.net/pingguoyuan/article/details/51351246

版权

在以swiper为主体的H5中，在背景音乐之外，每页添加不同的声音。

一。HTML部分

在<body>中，swiper-container之外，添加独立的块，代码如下：

其中，第一条为背景音乐，第二条为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的函数，代码如下：

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

产品汪的进阶

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
H5--在背景音乐外，每页添加声音--利用js语句

在以swiper为主体的H5中，在背景音乐之外，每页添加不同的声音。一。HTML部分在中，swiper-container之外，添加独立的块，代码如下：其中，第一条为背景音乐，第二条为voice。二、CSS部分*此部分定义音乐播放器#playbox的样式。@-webkit-keyframes
复制链接

扫一扫