Use HTML5 to add sound to your Web page

Adding appropriate sound effects to the interaction can often improve the user experience. In our familiar windows, the shredding of the Recycle Bin is a good example.

Here is a widget that uses HTML5, Jquery, to add sound to the page (just add sound effects, not players).

In fact, it is very simple to use the audio tag in HTML5 to play sound. But in order to take care of IE 6-8, still use the bgsound.

Compatible with all major browsers (Non-mainstream is not considered)

Gossip less, on the code:

 <a href= "#" class= "fui-btn" > Play </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: ',//audio file address 


 altsrc: ",//alternate audio file address (different browsers support different audio formats, visible schedule) 


 Loop:false//whether to cycle playback, this parameter is not used now 


}; 


 if (profile) {


 $.extend (This.profile,profile); 


     } 


 This.soundobj=null; 


 This.isie =!-[1,]; * * This method is the invention of senior Daniel, using IE and non ie in JScript processing array last comma "," the difference, but for IE 9, this approach is invalid, but this is the same as I use, because IE 9 support 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=     e.altsrc+ ' "/> '; 


             }     


}else{


 if (This.isie) {


 this.soundobj=$ (' <bgsound volume= " -10000" loop= "1" src= "' +this.profile.src+ '" > "). Appendto (' bod
 Y '); -10000 is the minimum value for the volume. First turn the volume to the minimum, lest a load on the bite of a sound, frighten people. 


}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; Turn the volume on. 


 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> 

Schedule

Format	IE 9	Firefox 3.5	Opera 10.5	C Hrome 3.0	Safari 3.0
ogg Vorbis	no	yes	yes	mp3	yes	no	no	yes	yes
no	yes	yes	yes

format	ie 9	firefox 3.5	opera 10.5	chrome 3.0	safari 3.0
ogg vorbis	no	yes	yes	yes	no
mp3	yes	no	no	yes	yes
wav	no	yes	yes	Yes	Yes