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

