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 />').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>