为你的html5网页添加音效示例


Posted in HTML / CSS onApril 03, 2014

为交互添加恰当的音效,常常能改善用户体验。在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子。
下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放器)。
其实很简单,就是利用HTML5中的audio标签,播放声音。不过为了照顾IE 6-8,还是用上了bgsound。
兼容所有主流浏览器(非主流不在考虑之列了)
闲话少说,上代码:

复制代码
代码如下:

<a href="#" class="fui-btn">播放</a>
<script>
/*Play sound component*/
/*
* profile: JSON, {src:'chimes.wav',altSrc:'',loop:false}
*
* setSrc: Function, set the source of sound
* play: Function, play sound
*/
if (!FUI){
var FUI = {};
}
FUI.soundComponent=function(profile){
this.profile={
src:'',

  //音频文件地址
altSrc:'',

//备选音频文件地址 (不同浏览器支持的音频格式不同,可见附表)
loop:false

  //是否循环播放,这个参数现在没有用上
};
if(profile) {
$.extend(this.profile,profile);
}
this.soundObj=null;
this.isIE = !-[1,];
/*这个方法是前辈大牛发明的,利用ie跟非ie中JScript处理数组最后一个逗号“,”的差异,
不过对于IE 9,这个办法就无效了,但此处正合我用,因为IE 9支持audio*/
this.init();
};
FUI.soundComponent.prototype={
init:function(){
this._setSrc();
},
_setSrc:function(){
if(this.soundObj){
if(this.isIE){
this.soundObj[0].src=this.profile.src;
}else{
this.soundObj[0].innerHTML='<source src="'+this.profile.src+'" />
<source src="'+this.profile.altSrc+'" />';
}
}else{
if(this.isIE){
this.soundObj=$
('<bgsound volume="-10000" loop="1" src="'+this.profile.src+'">').appendTo('body');
//-10000是音量的最小值。先把音量关到最小,免得一加载就叮的一声,吓到人。
}else{
this.soundObj=$('<audio preload="auto" autobuffer>
<source src="'+this.profile.src+'" />
<source src="'+this.profile.altSrc+'" />
</audio>').appendTo('body');
}
}
},
setSrc:function(src,altSrc){
this.profile.src=src;
if(typeof altSrc!='undefined'){
this.profile.altSrc=altSrc;
}
this._setSrc();
},
play:function(){
if(this.soundObj){
if(this.isIE){
this.soundObj[0].volume = 1;

//把音量打开。
this.soundObj[0].src = this.profile.src;
}else{
this.soundObj[0].play();
}
}
}
};
var sd=new FUI.soundComponent({src:'ding.wav',altSrc:'ding.mp3'});
$('.fui-btn').bind('click',function(e){
sd.play();
});
</script>

HTML / CSS 相关文章推荐
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 #HTML / CSS
简单html5代码获取地理位置
Mar 31 #HTML / CSS
HTML5注册页面示例代码
Mar 27 #HTML / CSS
html5实现微信打飞机游戏
Mar 27 #HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 #HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 #HTML / CSS
用html5实现语音搜索框的方法
Mar 18 #HTML / CSS
You might like
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
优化javascript的执行速度
2010/01/23 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
最新教师自我评价分享
2013/11/12 职场文书
质检员的岗位职责
2013/11/15 职场文书
思想专业自荐信范文
2013/12/25 职场文书
监察建议书范文
2014/03/12 职场文书
企业授权委托书范本
2014/04/02 职场文书
给校长的建议书400字
2014/05/15 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
校友回访母校寄语
2015/02/26 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
Minikube搭建Kubernetes集群
2022/03/31 Servers