How to add sound to a html5 web page
This article focuses on "how to add sound effects to html5 pages". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to add sound to a html5 web page.
The code is as follows:
Play
/ * 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:'', / / alternative audio file address (different browsers support different audio formats, see attached table)
Whether to play loop:false / / in a loop. This parameter is not used now.
}
If (profile) {
Extend (this.profile,profile)
}
This.soundObj=null
This.isIE =!-[1,]
/ * this method was invented by the elder Daniel, which takes advantage of the difference between ie and non-ie JScript to deal with the last comma of the array.
But this doesn't work for IE 9, but it works for me 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] [xss_clean] ='
'
}
} else {
If (this.isIE) {
This.soundObj=$
('). AppendTo ('body')
/ /-10000 is the minimum volume. First, turn the volume down to a minimum, so as not to make a sting as soon as it is loaded, which will frighten people.
} else {
This.soundObj=$ ('
'). AppendTo (' body')
}
}
}
SetSrc:function (src,altSrc) {
This.profile.src=src
If (typeof altSrcessed undefined) {
This.profile.altSrc=altSrc
}
This._setSrc ()
}
Play:function () {
If (this.soundObj) {
If (this.isIE) {
This.soundObj [0] .volume = 1; / / turn on the volume.
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 ()
});
At this point, I believe you have a deeper understanding of "how to add sound effects to html5 pages". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
