為你的html5網(wǎng)頁添加音效示例

為交互添加恰當(dāng)?shù)囊粜?,常常能改善用戶體驗(yàn)。在我們所熟悉的windows里,清空回收站的碎紙聲就是很好的例子。
下面是一個(gè)利用HTML5, Jquery,給頁面添加音效的小組件(只是添加音效,并不是播放器)。
其實(shí)很簡單,就是利用HTML5中的audio標(biāo)簽,播放聲音。不過為了照顧IE 6-8,還是用上了bgsound。
兼容所有主流瀏覽器(非主流不在考慮之列了)
閑話少說,上代碼:
<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 //是否循環(huán)播放,這個(gè)參數(shù)現(xiàn)在沒有用上
};
if(profile) {
$.extend(this.profile,profile);
}
this.soundObj=null;
this.isIE = !-[1,];
/*這個(gè)方法是前輩大牛發(fā)明的,利用ie跟非ie中JScript處理數(shù)組最后一個(gè)逗號(hào)“,”的差異,
不過對于IE 9,這個(gè)辦法就無效了,但此處正合我用,因?yàn)镮E 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是音量的最小值。先把音量關(guān)到最小,免得一加載就叮的一聲,嚇到人。
}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>
相關(guān)文章
使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法
這篇文章主要介紹了使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法,2016-02-22分享29個(gè)基于Bootstrap的HTML5響應(yīng)式網(wǎng)頁設(shè)計(jì)模板
如今基于Bootstrap框架的免費(fèi)HTML5網(wǎng)站已經(jīng)開始成為行業(yè)趨勢。研究人員已經(jīng)證實(shí),Bootstrap是引領(lǐng)設(shè)計(jì)和開發(fā)行業(yè)趨勢效果最為顯著的,本文給大家分享29個(gè)基于Bootstrap的HT2015-11-19使用純HTML5編寫一款網(wǎng)頁上的時(shí)鐘的代碼分享
這篇文章主要介紹了使用純HTML5編寫一款網(wǎng)頁上的時(shí)鐘的代碼分享,程序非常簡單且沒有時(shí)鐘上的數(shù)字顯示,純粹體現(xiàn)最基本的設(shè)計(jì)思路,需要的朋友可以參考下2015-11-162014年圣誕節(jié)倒計(jì)時(shí)網(wǎng)頁的制作過程
今天和大家分享一款倒計(jì)時(shí)網(wǎng)頁教程,2014年的圣誕節(jié)即將來臨之季。愛編程小編給大家分享一款2014年圣誕節(jié)倒計(jì)時(shí)網(wǎng)頁,當(dāng)天的日期卡片有抖動(dòng)的效果,需要的朋友可以參考下2014-12-05阻止移動(dòng)設(shè)備(手機(jī)、pad)瀏覽器雙擊放大網(wǎng)頁的方法
這篇文章主要介紹了阻止移動(dòng)設(shè)備(手機(jī)、pad)瀏覽器雙擊放大網(wǎng)頁的方法,需要的朋友可以參考下2014-06-03HTML5資源預(yù)加載(Link prefetch)詳細(xì)介紹(給你的網(wǎng)頁加速)
不管是瀏覽器的開發(fā)者還是普通web應(yīng)用的開發(fā)者,他們都在做一個(gè)共同的努力:讓W(xué)eb瀏覽有更快的速度感覺。有很多已知的技術(shù)都可以讓你的網(wǎng)站速度變得更快:使用CSS sprites2014-05-07編寫html5時(shí)調(diào)試發(fā)現(xiàn)腳本php等網(wǎng)頁js、css等失效
在編寫html5時(shí)簡單的調(diào)試了下與PHP協(xié)同使用后,發(fā)現(xiàn)在不少情況下js、css等會(huì)失效,調(diào)試后發(fā)現(xiàn)網(wǎng)頁在跳轉(zhuǎn)時(shí)仍有緩存,需要指出原網(wǎng)頁和跳轉(zhuǎn)后網(wǎng)頁的關(guān)系,具體代碼如下2013-12-31HTML5之WebGL 3D概述(上)—WebGL原生開發(fā)開啟網(wǎng)頁3D渲染新時(shí)代
WebGL開啟了網(wǎng)頁3D渲染的新時(shí)代,它允許在canvas中直接渲染3D的內(nèi)容,而不借助任何插件,看到此處是不是感覺特別驚訝啊,WebGL有一個(gè)很好的中文教程,就是下面使用參考中的2013-01-31html5拖曳操作 HTML5實(shí)現(xiàn)網(wǎng)頁元素的拖放操作
HTML5之前,要實(shí)現(xiàn)網(wǎng)頁元素的拖放操作,需要依靠mousedown、mousemove、mouseup等API,通過大量的JS代碼來實(shí)現(xiàn),而如今html5大大簡化了網(wǎng)頁元素的拖放操作編程難度,API除了2013-01-02- 為了幫助了解當(dāng)今HTML 5的一些新玩意兒,我們現(xiàn)在就進(jìn)入正題,開始使用一些新的結(jié)構(gòu)元素。我們創(chuàng)建HTML 5文檔第一件需要做的事情就是使用新的文檔類型。2010-05-30