H5--在背景音乐外，每页添加声音--利用js语句
2016-05-09 10:33
183 查看
在以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
一。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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JSON转XML及反射调用对应的方法
- JavaScript笔记（3）---编程性能优化
- js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
- 导航菜单滑动效果+解决两个js的执行顺序问题
- Jackson 框架，轻易转换JSON
- JSON数组不用字符串转换的写法
- 通过一道笔试题浅谈javascript中的promise对象
- 2016年度 JavaScript 展望
- javascript库之Mustache库使用说明
- 关于去除json字符串中不要的数据
- JS中的事件冒泡（Bubble）和事件捕获（capture）以及如何阻止事件的冒泡
- js运动原理2
- js运动原理
- 关于xml和Json数据解析的一些总结
- js实际应用之一：密码加密
- JavaScript语句
- 江苏省大学生程序设计竞赛（JSCPC）赛后感
- JS 密码加密
- 前端开发之旅-JavaScript入门篇
- 前端开发-JavaScript入门 DOM篇