Categories:

Home / Free JavaScripts / Images & Music / Here

Cut & Paste HTML5 Mouseover/ Click sound effect

Credit: JavaScript Kit

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:

JavaScript Kit

Dynamic Drive

CSS Drive

Coding Forums

Click on the following links to hear a sound effect:

Directions:

Step 1: Add the following to the <head> 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:

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:

<a href="#" onMouseover="uniquevar.playclip()">Mouse over me!</a>


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.