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

迈不过友情╰ 2023-01-15 03:38 73阅读 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 条评论，73人围观）

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

相关阅读

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

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

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

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

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

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

相关 Unity音效播放管理

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

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

相关音效的播放

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

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

相关 android开发--音效音频播放SoundPool

在对接一款rfid读卡设备的时候需要实现的功能就是，扫描或者刷卡之后播放音频，这时候考虑到其播放的频率（大）和播放时间（短），决定使用SoundPool播放音效，而不是用Med

拼搏现实的明天。/ 2022年07月18日 05:47/ 0 赞/ 222 阅读

相关系统音效播放

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

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

相关 Tickeys插件——增加打字音效

推荐Tickeys插件的原因——让你再敲代码之余可以享受敲代码的乐趣~ 下载插件方法: 1. mac/ win/linux可以去网上下载插件,网站地址: [ht

╰半橙微兮°/ 2022年04月16日 04:39/ 0 赞/ 371 阅读

相关 LayaAir 音乐与音效

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

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

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

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

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

相关 NGUI 按钮音效问题

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

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