为你的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背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 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
Yii框架form表单用法实例
2014/12/04 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
实例解析Array和String方法
2016/12/14 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python多线程用法实例详解
2015/01/15 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
预备党员党校学习自我评价分享
2013/11/12 职场文书
部门年终奖分配方案
2014/05/07 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
硕士学位申请报告
2015/05/15 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript