用HTML5为你的网页添加音效（兼容Firefox 3.5+, IE 6-9, Safari 3.0+, Chrome 3.0+, Opera 10.5+）

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

<a href="#" class="fui-btn">播放</a>


<script>
/*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='<source src="'+this.profile.src+'" /><source src="'+this.profile.altSrc+'" />';    }    }else{if(this.isIE){this.soundObj=$('<bgsound volume="-10000" loop="1" src="'+this.profile.src+'">').appendTo('body'); //-10000是音量的最小值。先把音量关到最小，免得一加载就叮的一声，吓到人。}else{this.soundObj=$('<audio preload="auto" autobuffer><source src="'+this.profile.src+'" /><source src="'+this.profile.altSrc+'" /></audio>').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();
});
</script>

用HTML5为你的网页添加音效（兼容Firefox 3.5+, IE 6-9, Safari 3.0+, Chrome 3.0+, Opera 10.5+）相关推荐

php加音效,HTML_为你的html5网页添加音效示例，为交互添加恰当的音效，常常 - phpStudy...
为你的html5网页添加音效示例为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用HTML5, Jquery,给页面添加音效 ...
如何在html中加入音效,为你的html5网页添加音效示例
这篇文章主要介绍了为你的html5网页添加音效示例,需要的朋友可以参考下为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用H ...
html手机页面加音效,为你的html5网页添加音效示例
为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放 ...
html5游戏读取音效源码,为你的html5网页添加音效示例
为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放 ...
怎么把html的网页做成视频,html5网页中怎么加入视频？怎么为网页添加视频？
相信很多小伙伴会在各种网页和 app 中观看各种视频,那么今天我们就来说说怎么在html5网页中怎么加入视频?和怎么为网页添加视频吧! 1.首先,我们在开发工具中新建一个 .html 文件,输入下面代 ...
html5给网页添加视频背景
html5给网页添加视频背景 1. 先插入如下代码: <video src="../video/2b.mp4" loop="loop" autoplay= ...
用HTML5 Canvas为网页添加动态波浪背景
查看所有代码请去Github 本文出自 "UED" 博客:http://5344794.blog.51cto.com/5334794/1430877 <!DOCTYPE ht ...
HTML中如何为网页添加背景音乐
许多小伙伴在问HTML中如何为网页添加背景音乐,其实很简单,先准备好你的mp3音乐文件,这里我随便准备一个yinyue.mp3作为示例,那么怎么嵌入到网页呢?敲黑板了,注意,这是关键所在,参考以下关键 ...
HTML5编写船上航行网页,前端面试整理(HTMLCSS) | 航行学园
1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他行内元素:其中im ...
02前端入门HTML5 +CSS3+电商网页制作：CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...

用HTML5为你的网页添加音效（兼容Firefox 3.5+, IE 6-9, Safari 3.0+, Chrome 3.0+, Opera 10.5+）

用HTML5为你的网页添加音效（兼容Firefox 3.5+, IE 6-9, Safari 3.0+, Chrome 3.0+, Opera 10.5+）相关推荐

最新文章

热门文章