为你的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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 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
初品cakephp 入门基础
2012/02/16 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
Python中的hypot()方法使用简介
2015/05/18 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python 同时读取多个文件的例子
2019/07/16 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
python 绘制场景热力图的示例
2020/09/23 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
会计工作总结范文2014
2014/12/23 职场文书
亲属关系公证书样本
2015/01/23 职场文书
关于运动会的广播稿
2015/08/19 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
MySQL派生表联表查询实战过程
2022/03/20 MySQL
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js