Example of adding sound effects to your html5 webpage

Comments: This article describes how to add audio effects to your html5 webpage. For more information, see

Adding proper sound effects for interactions often improves user experience. In windows that we are familiar with, clearing the broken paper in 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 (only adding sound effects, not a player ).
In fact, it is very easy to use the audio tag in HTML5 to play the sound. However, bgsound is used to take care of IE 6-8.
Compatible with all mainstream browsers (not mainstream)
Let's talk less about the Code:

The Code is as follows:
<A href = "#" class = "fui-btn"> playback </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 (the audio formats supported by different browsers are different, as shown in the attached table)
Loop: false // indicates whether loop playback is enabled. this parameter is not used now.
};
If (profile ){
$. Extend (this. profile, profile );
}
This. soundObj = null;
This. isIE =! -[1,];
/* This method was invented by the predecessors, who used the JScript in ie and non-ie to process the difference between the last comma "," in the array,
However, for IE 9, this method is invalid, but it is used by me here, because IE 9 supports 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 is the minimum volume. First turn off the volume to a minimum, so you don't have to load it to scare 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: 'dingzhou '});
$ ('. Fui-btn'). bind ('click', function (e ){
Sd. play ();
});
</Script>