Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.