php加音效,HTML_为你的html5网页添加音效示例，为交互添加恰当的音效，常常 - phpStudy...

迈不过友情╰ 2023-01-15 03:38 99阅读 0赞

为你的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表单的两种方法小结(推荐)

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML圣诞树代码(动态音效)

正在下载音乐，请稍等...';'请稍等...或者请选择音乐圣诞树

桃扇骨/ 2024年04月27日 15:31/ 0 赞/ 71 阅读

相关 Unity角色同时播放两个音效(走路音效+说话音效)

Unity角色同时播放两个动画写在前面效果展示代码写在后面写在前面需要实现一个人物走路音效和说法音效一起播放的功能。效果

亦凉/ 2023年09月28日 21:51/ 0 赞/ 10 阅读

相关 php加音效,HTML_为你的html5网页添加音效示例，为交互添加恰当的音效，常常 - phpStudy...

为你的html5网页添加音效示例为交互添加恰当的音效，常常能改善用户体验。在我们所熟悉的windows里，清空回收站的碎纸声就是很好的例子。下面是一个利用HTML5,

迈不过友情╰/ 2023年01月15日 03:38/ 0 赞/ 100 阅读

相关 Unity音效播放管理

1.主摄像头上挂载几个AudioSource 这个可以根据需要挂载不同的个数，做一个池子 2.代码编写 using System.Collections;

柔光的暖阳◎/ 2023年01月11日 09:21/ 0 赞/ 147 阅读

相关音效的播放

GamePlayMusicPlayer.instance\_ = nil; function GamePlayMusicPlayer:ctor() self.m\_Is

╰半夏微凉°/ 2022年08月07日 15:00/ 0 赞/ 184 阅读

相关系统音效播放

播放系统音效需要使用 AudioToolBox.framework（一套基于 C 语言的框架），其本质是将短音频注册到系统的声音服务中来播放，使用简单，但也有一些限制，如：

男娘i/ 2022年05月06日 13:52/ 0 赞/ 265 阅读

相关 LayaAir 音乐与音效

目录音乐与音效·概述 SoundManager 音乐与音效·运用运用入门复合应用 -------------------- 音乐与音效·概述 1、HT

àì夳堔傛蜴生んèń/ 2022年04月03日 08:16/ 0 赞/ 448 阅读

相关 iOS开发拓展篇—音效的播放

iOS开发拓展篇—音效的播放一、简单介绍简单来说，音频可以分为2种（1）音效又称“短音频”，通常在程序中的播放时长为1~2秒在应用程序中起到点缀效果，提升整

忘是亡心i/ 2022年03月27日 04:50/ 0 赞/ 292 阅读

相关为你的网页添加深色模式

> 翻译：疯狂的技术宅 > 原文：[https://www.creativebloq.com/how-to/how-to-implement-light-or-dark-m

た入场券/ 2022年02月24日 19:12/ 0 赞/ 365 阅读

相关 NGUI 按钮音效问题

昨天给NGUI的按钮添加音效时，刚开始是自己新建空对象绑定声音的，后来发现NGUI按钮携带button sound组件，直接将音效拖入即可，不用写一行代码，非常简单。但是后来发

青旅半醒/ 2021年12月01日 16:16/ 0 赞/ 240 阅读