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 <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>