Home > Web Front-end > H5 Tutorial > Example of adding sound effects to your html5 web page_html5 tutorial tips

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

WBOY
Release: 2016-05-16 15:48:15
Original
1839 people have browsed it

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>
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template