Example of adding sound effects to your html5 web page_html5 tutorial tips

Adding appropriate sound effects to interactions often improves the user experience. In the windows we are familiar with, the shredding sound of emptying the Recycle Bin is a good example.
The following is a small component that uses HTML5 and Jquery to add sound effects to the page (it only adds sound effects, not a player).
It’s actually very simple, just use the audio tag in HTML5 to play sounds. However, in order to take care of IE 6-8, bgsound is still used.
Compatible with all major browsers (non-mainstream browsers are not considered)
Enough chatter, here’s the code:

Copy code

The code is as follows:

Play
<script><br>/*Play sound component*/<br>/*<br> * profile: JSON, {src:'chimes. wav',altSrc:'',loop:false}<br> * <br> * setSrc: Function, set the source of sound<br> * play: Function, play sound<br> */<br>if (! FUI){<br> var FUI = {};<br>}<br>FUI.soundComponent=function(profile){<br> this.profile={<br> src:'', //Audio file address<br> altSrc:'', // Alternative audio file address (different browsers support different audio formats, see the attached table) <br> loop:false // Whether to loop playback, this parameter is not used now <br> } ;<br> if(profile) {<br> $.extend(this.profile,profile);<br> }<br> this.soundObj=null;<br> this.isIE = !-[1,]; <br> /*This method was invented by a senior expert. It uses the difference between JScript in IE and non-IE to handle the last comma "," of the array. <br> However, for IE 9, this method is invalid, but here is the correct way It works for me because IE 9 supports audio*/<br> this.init();<br>};<br>FUI.soundComponent.prototype={<br> init:function(){<br> this._setSrc ();<br> }, <br> _setSrc:function(){<br> if(this.soundObj){ <br> if(this.isIE){<br> this.soundObj[0].src=this .profile.src; <br> }else{<br> this.soundObj[0].innerHTML='<source src="' this.profile.src '" /><br><source src=" ' this.profile.altSrc '" />'; <br> } <br> }else{<br> if(this.isIE){<br> this.soundObj=$<br>('<bgsound volume ="-10000" loop="1" src="' this.profile.src '">').appendTo('body');<br> //-10000 is the minimum value of the volume. Turn down the volume to the minimum first, so as not to make a ding sound as soon as it is loaded, which may scare people. <br> }else{<br> this.soundObj=$('<audio preload="auto" autobuffer><br><source src="' this.profile.src '" /><br>&lt ;source src="' this.profile.altSrc '" /><br></audio>').appendTo('body');<br> } <br> } <br> },<br> setSrc:function(src,altSrc){<br> this.profile.src=src;<br> if(typeof altSrc!='undefined'){<br> this.profile.altSrc=altSrc;<br> } <br> this._setSrc();<br> },<br> play:function(){<br> if(this.soundObj){<br> if(this.isIE){<br> this.soundObj[0 ].volume = 1; //Turn on the volume. <br> this.soundObj[0].src = this.profile.src;<br> }else{<br> this.soundObj[0].play();<br> }<br> }<br> } <br>};<br>var sd=new FUI.soundComponent({src:'ding.wav',altSrc:'ding.mp3'});<br>$('.fui-btn').bind( 'click',function(e){<br> sd.play();<br>}); <br></script>