html5调用系统声音1s响一次_为你的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调用系统声音1s响一次_为你的html5网页添加音效示例相关推荐

html5调用系统声音1s响一次_记录一次系统性能调优过程
在线上环境,由于业务场景需要,要求程序能够在普通的4G机器中依然正常运行. 而原来的环境配置为8核16G,微服务部署,一共有6个功能模块. 而现在要求在一台4核4G的设备上正常运行. 问题清单模块合 ...
html5调用系统声音1s响一次_HTML5声音录制/播放功能的实现代码
html代码: 火星黑洞 var recorder; var audio = document.querySelector('audio'); function startRecording() { ...
html5调用系统声音1s响一次_20款奔驰GLC260提车改柏林之声音响，音乐诉请，为爱发声！...
奔驰GLC车型在2020上半年可谓是风生水起,尤其是2020年1-5月份的豪华品牌SUV排名中,奔驰GLC车型以58982的销售量遥遥领先,同比增长了2%,奔驰GLC5月销量高达15275辆,再次打败 ...
html5调用系统声音1s响一次_HTML5 怎么给网页加屏幕点击声音。
展开全部 Guitar function GuitarTrack(){ var Mp3Me= document.getElementById('Mp3Me').getElementsByTagName ...
php加音效,HTML_为你的html5网页添加音效示例，为交互添加恰当的音效，常常 - phpStudy...
为你的html5网页添加音效示例为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用HTML5, Jquery,给页面添加音效 ...
如何在html中加入音效,为你的html5网页添加音效示例
这篇文章主要介绍了为你的html5网页添加音效示例,需要的朋友可以参考下为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用H ...
html手机页面加音效,为你的html5网页添加音效示例
为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放 ...
html5游戏读取音效源码,为你的html5网页添加音效示例
为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放 ...
html5 调用系统相册,iOS之H5调用系统相册相机浏览文件
在我们iOS开发中大家遇到过H5和原生交互,需要上传文件,刚开始的思路肯定是在之前轻车熟路的js交互中原生方法获取文件之后上传,今天我们了解一个新的方法,其实苹果官方给我们提供了一个更简单的方法, H ...
用html5做一个介绍自己家乡的页面_厚溥资讯 | HTML5的小知识点小集合（上）
1.Doctype作用?标准模式与兼容模式各有什么区别? (1)声明位于位于HTML文档中的第一行,处于标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文 ...

html5调用系统声音1s响一次_为你的html5网页添加音效示例

html5调用系统声音1s响一次_为你的html5网页添加音效示例相关推荐

最新文章

热门文章