html5游戏读取音效源码,为你的html5网页添加音效示例
为交互添加恰当的音效,常常能改善用户体验。在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子。
下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放器)。
其实很简单,就是利用HTML5中的audio标签,播放声音。不过为了照顾IE 6-8,还是用上了bgsound。
兼容所有主流浏览器(非主流不在考虑之列了)
闲话少说,上代码:
复制代码代码如下:
播放
/*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='
';
}
}else{
if(this.isIE){
this.soundObj=$
('').appendTo('body');
//-10000是音量的最小值。先把音量关到最小,免得一加载就叮的一声,吓到人。
}else{
this.soundObj=$('
').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();
});
html5游戏读取音效源码,为你的html5网页添加音效示例相关推荐
- html5微信预约挂号源码,微信大转盘html5代码
[实例简介] 微信大转盘html5代码 [实例截图] [核心代码] $(function(){window.requestAnimFrame=(function(){return window.req ...
- C语言小游戏大全,C语言贪吃蛇小游戏(附源码)
一.C语言小游戏大全,C语言贪吃蛇小游戏(附源码) 贪吃蛇小游戏源码和更多C语言课设项目小游戏源码免 费 下 载 链 接 如下: c语言项目课设小游戏源码资料压缩包.zip-C文档类资源-CSDN下载 ...
- 基于stm32、0.96寸OLED实现的贪吃蛇小游戏(详细源码注释)
简介:本实验基于stm32最小系统.0.96寸OLED(68*128)和摇杆实现一个经典的贪吃蛇小游戏.项目源码地址:点击下载. 硬件设计: 普通摇杆,0.96寸OLED 单色屏幕(SPI协议通讯), ...
- 雨松MOMO《Unity 3D游戏开发》源码公布
原创文章如需转载请注明:转载自雨松MOMO程序研究院 本文链接地址:雨松MOMO<Unity 3D游戏开发>源码公布 下载源码时,首先大家请登陆图灵社区找到<Unity 3D游戏开发 ...
- java计算机毕业设计html5健身房信息管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计html5健身房信息管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计html5健身房信息管理系统源码+mysql数据库+系统+lw文档+部署 本源码技 ...
- ADI Blackfin DSP处理器-BF533的开发详解62:DSP控制ADXL345三轴加速度传感器-贪食蛇游戏(含源码)
硬件准备 ADSP-EDU-BF533:BF533开发板 AD-HP530ICE:ADI DSP仿真器 软件准备 Visual DSP++软件 硬件链接 MEMS三轴加速度传感器 我做了一个三轴加速度 ...
- java计算机毕业设计HTML5运河古城网站源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计HTML5运河古城网站源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计HTML5运河古城网站源码+mysql数据库+系统+lw文档+部署 本源码技术栈: 项目 ...
- JAVA毕业设计HTML5旅游网站计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计HTML5旅游网站计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计HTML5旅游网站计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目架构:B/S架构 开 ...
- Python3+pygame实现有趣好玩的飞机大战游戏(附源码及素材)
版权声明:原创不易,本文禁止抄袭.转载,侵权必究! 目录 一.开发环境 二.功能模块 三.游戏效果 四.完整项目下载 五.作者Info 一.开发环境 开发环境 :Windows10 Python3.6 ...
最新文章
- 断点续传了解一下啊?
- centos 7手动更改源
- NTU 课程笔记13:线性规划(对偶性)
- 电热耦合_教育部关于发布电热原子吸收光谱分析方法通则等30个教育行业标准的通知...
- Flink-Table StreamTableEnvironment基础知识
- hdu 6851 Vacation(思维+贪心)
- 只需12 个步骤,就能在AWS中创建自定义VPC,用过都惊了!
- (45)npm全局安装包的位置
- 《mount的艺术》-linux命令五分钟系列之十四
- 用AI算法分析光影看到盲点:这项MIT新研究偷学到二娃技能
- 【时间序列预测】基于matlab麻雀算法优化LSTM时间序列预测【含Matlab源码 JQ001期】
- Win11 鼠标右键后怎么设置让其显示更多可操作的选项
- 九月十月百度,迅雷,华为,阿里巴巴笔试面试六十题(第411~470题)
- Windows设置redis开启自动启动
- 2019西湖论剑网络安全技能大赛(大学生组)部分WriteUp
- 【PHP框架 | Yii2 系列3】 - Gii 生成代码
- 电机分类-电机在高空作业平台中的应用
- 100+大数据开源处理工具汇总
- 怎樣制作线段动画_教您怎样才能演示图形平移过程?
- 关联关系和依赖关系的思考