首页 > web前端 > H5教程 > 正文

为你的html5网页添加音效示例_html5教程技巧

php中文网
发布: 2016-05-16 15:48:15
原创
2073人浏览过

为交互添加恰当的音效,常常能改善用户体验。在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子。
下面是一个利用html5, jquery,给页面添加音效的小组件(只是添加音效,并不是播放器)。
其实很简单,就是利用html5中的audio标签,播放声音。不过为了照顾ie 6-8,还是用上了bgsound。
兼容所有主流浏览器(非主流不在考虑之列了)
闲话少说,上代码:


复制代码
代码如下:

播放
<script><br />/*Play sound component*/<br />/*<br /> * profile: JSON, {src:'chimes.wav',altSrc:'',loop:false}<br /> * <br /> * setSrc: Function, set the source of sound<br /> * play: Function, play sound<br /> */<br />if (!FUI){<br /> var FUI = {};<br />}<br />FUI.soundComponent=function(profile){<br /> this.profile={<br /> src:'',          //音频文件地址<br /> altSrc:'',         //备选音频文件地址 (不同浏览器支持的音频格式不同,可见附表)<br /> loop:false        //是否循环播放,这个参数现在没有用上<br /> };<br /> if(profile) {<br /> $.extend(this.profile,profile);<br /> }<br /> this.soundObj=null;<br /> this.isIE = !-[1,];<br /> /*这个方法是前辈大牛发明的,利用ie跟非ie中JScript处理数组最后一个逗号&ldquo;,&rdquo;的差异,<br /> 不过对于IE 9,这个办法就无效了,但此处正合我用,因为IE 9支持audio*/<br /> this.init();<br />};<br />FUI.soundComponent.prototype={<br /> init:function(){<br /> this._setSrc();<br /> }, <br /> _setSrc:function(){<br /> if(this.soundObj){ <br /> if(this.isIE){<br /> this.soundObj[0].src=this.profile.src; <br /> }else{<br /> this.soundObj[0].innerHTML='<source src="'+this.profile.src+'" /><br /><source src="'+this.profile.altSrc+'" />'; <br /> } <br /> }else{<br /> if(this.isIE){<br /> this.soundObj=$<br />('<bgsound volume="-10000" loop="1" src="'+this.profile.src+'">').appendTo('body');<br /> //-10000是音量的最小值。先把音量关到最小,免得一加载就叮的一声,吓到人。<br /> }else{<br /> this.soundObj=$('<audio preload="auto" autobuffer><br /><source src="'+this.profile.src+'" /><br /><source src="'+this.profile.altSrc+'" /><br />').appendTo('body');<br /> } <br /> } <br /> },<br /> setSrc:function(src,altSrc){<br /> this.profile.src=src;<br /> if(typeof altSrc!='undefined'){<br /> this.profile.altSrc=altSrc;<br /> } <br /> this._setSrc();<br /> },<br /> play:function(){<br /> if(this.soundObj){<br /> if(this.isIE){<br /> this.soundObj[0].volume = 1;  //把音量打开。<br /> this.soundObj[0].src = this.profile.src;<br /> }else{<br /> this.soundObj[0].play();<br /> }<br /> }<br /> }<br />};<br />var sd=new FUI.soundComponent({src:'ding.wav',altSrc:'ding.mp3'});<br />$('.fui-btn').bind('click',function(e){<br /> sd.play();<br />}); <br /></script>
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号