php加音效,HTML_为你的html5网页添加音效示例,为交互添加恰当的音效,常常 - phpStudy...
为你的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();
});
相关阅读:
解析PHP中数组元素升序、降序以及重新排序的函数
javascript实现2048游戏示例
微信公众平台(测试接口)准备工作
修改Jquery Dialog 位置的实现方法
Java中Map的排序问题详解
Android组件ViewStub基本使用方法详解
javascript操作ul中li的方法
eclipse、myeclipse中删除所有注释正则表达式
Win7旗舰版安装JRE双击安装包后无任何反应怎么办
window.print打印指定div实例代码
Win10无法修改提示磁盘卷标无效怎么办?win10无法修改卷标的解决方法
今日推送:Win10 Mobile/PC一周年更新快速版14393.5
win10预览版10125更新内容了什么内容?win10预览版10125更新内容汇总
jquery的ajax提交form表单的两种方法小结(推荐)
php加音效,HTML_为你的html5网页添加音效示例,为交互添加恰当的音效,常常 - phpStudy...相关推荐
- html手机页面加音效,为你的html5网页添加音效示例
为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放 ...
- html5游戏读取音效源码,为你的html5网页添加音效示例
为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放 ...
- 如何在html中加入音效,为你的html5网页添加音效示例
这篇文章主要介绍了为你的html5网页添加音效示例,需要的朋友可以参考下 为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用H ...
- html5的在线播放页面,整理5款html5网页播放器,总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
- 直播播放器+html5,10款html5网页播放器推荐(总有一款适合你)
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
- html5+php视频播放器,整理5款html5网页播放器,总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
- js HTML5 网页版植物大战僵尸游戏
js HTML5 网页版植物大战僵尸游戏 源于:http://www.huiyi8.com/moban/ 植物大战僵尸Javascript版 HTML5模版 body{-moz-user-select ...
- 《游戏学习》| 水果忍者HTML5网页版在线游戏 | 源码分析
游戏介绍 这是一款由百度JS小组提供的HTML5版切水果游戏,这款基于HTML5实现的网页版切水果游戏虽然和原版的切水果游戏相比仍有美中不足之处,但也算有声有色,画面效果也十分炫目华丽. 游戏截图 主 ...
- 原生html5网页设计,HTML5网页设计教程
HTML5网页设计教程 编辑 锁定 讨论 上传视频 <HTML5网页设计教程>是2017年1月清华大学出版社出版的图书,作者是孙甲霞.吕莹莹.李学勇.金松林.郑颖. 书 名 HTML ...
最新文章
- html上传文件与后台处理,关于前端html图片和文件上传和后台接收方法
- php安装问题_PHP安装十大经典问题
- Vishay将MCW 0406 AT系列精密宽端子薄膜片式电阻欧姆值降至业内最低
- win7下编译uCOS-II
- Android中Toast的用法简介
- Informatica PowerCenter使用介绍-转载
- python实现冒泡排序算法的非递归版本_python排序算法速度比较:快速排序,归并排序,冒泡排序...
- [code] spectral cluster
- 中原银行张本晨:中原银行数字化营销体系建设实践
- 搜索引擎(0xFE)--- 用机器学习再谈排序
- [算法 笔记]堆排序(续)
- java8并行流_Java 8:CompletableFuture与并行流
- python学习笔记四——数据类型
- 猴子爬山编程java_Java趣味编程100例
- WP7的Push Notifications
- Linux下安装Java环境
- 第四章 需求分析,用例分析法
- Excel为图表指定横向坐标数据
- Linux性能优化之 CPU 篇
- win10巨帧数据包在哪里设置_电脑和路由器mtu值怎样设置才网速最快