html5 mouseover,Cut & Paste

Cut & Paste HTML5 Mouseover/ Click sound effect

Description:This script uses HTML5's new audio

element to allow you to easily add sound effects to any action on the page, such

as when the user clicks or rolls over a link. The script works in all browsers that

support HTML5, which currently are IE9+, FF3.5+, Chrome/Safari 3+, and Opera

10.5+. And since it uses HTML5 to play the audio, the entire process is

completely native and highly optimized in browsers that support it. Never worry

about whether the user has the proper plugin installed again!

Examples:

Moveover any of the links below to hear a

sound effect:

Click on the following links to hear a sound effect:

Directions:

Step 1:Add the following

to the

section of your page:

It The above code references the following sample sound files,

which you can download below:

Different browsers support different file formats, so it's important to

specify multiple versions of the same audio file to cover your bases. For

example, Firefox/Chrome/Opera supports the .ogg format while IE9+/Safari

supports the mp3 format instead. More information on this below.

Step 2: Add the below sample HTML to your site, which

demonstrates adding a sound effect to two groups of links, one group when the

mouse rolls over the links, and the other, onclick:

Moveover your mouse over any of the links below to hear a

sound effect:

Click on the following links to hear a sound effect:

And that's it for installation at least!

More information

To initialize a sound effect for use on your page, at the end of the code of

Step 1, call the function createsoundbite():

var uniquevar=createsoundbite("soundfile1", "fallbacksound",

"fallbacksound2", etc)

Enter a list of sound files that the script should try and play, in that

order, depending on what file type the browser supports.  uniquevar

should be an arbitrary but unique variable name for each new sound effect you

define.

The following chart shows which file types the different major browsers

support:

Browser

Supports

Firefox 3.5+

Supports .ogg, .wav

IE9+

Supports .mp3

Chrome 6+

Supports .ogg, .mp3, .mp4

Safari 5+

Supports .mp3, .mp4, .wav

Opera 10.5+

Supports .ogg, .wav

In other words, by specifying both a ".ogg" and ".mp3" file inside

function createsoundbite(), you should have covered all the

major browsers. To convert one audio format to another, you can use an

online audio converter such as

this one. For more free "click" related sound clips, check out

this site.

Once you've initialized a sound, call the function playclip() to actually

play the sound, such as when the mouse rolls over a link:

Mouse

over me!