html5網頁中怎么添加音效

這篇文章將為大家詳細講解有關html5網頁中怎么添加音效，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

代碼如下:

<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網頁中怎么添加音效就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。