Bookmark to del.icio.us
Description: Want to add a short sound effect to your page for certain actions, such as when the user moves the mouse over a link? This is a simple yet versatile script that lets you do just like! Relying on IE's BGSOUND attribute (and hence IE5+ only), the script can easily add a sound effect to a single item (ie: 1 link), or thanks to a helper function, all items of the specified element (ie: all <a> tags). This makes it very easy to add a sound effect to an entire menu's links, for example.
Demo (menu credits):
Move mouse over links to hear sound in IE5+.
Step 1: Add the below script to the <HEAD> section of your page, and change "var soundfile" to point to where your sound file is located.
<a href="#" onMouseover="playsound(soundfile)">Example 1</a> <a href="#" onMouseover="playsound('different.wav')">Example 2</a>
The second line shows that you can pass in a different wav file to play for any link other than the default specified within the script (var soundfile).
Now, here's something you might appreciate. Thanks to an additional function included in the script, you can add the sound effect easily to all elements of a certain type (ie: links) on the page or within a certain container. So lets say you wish to add a sound to all the links within your menu, which consists of 20 links. Instead of having to add the "onMouseover" code to all 20 links, you can just specify one single onMouseover event. The below shows how:
This way, all links within the DIV will play a sound onMouseover. To apply the sound to all links on your page, for example, just add the onMouseover code to the <BODY> tag itself.
Function "bindsound()" accepts 3 parameters- 1) The tag name of the element to bind the sound to ("A" for <a>, "SPAN" for <span> etc), 2) the sound file to play, whether a variable or path to sound file, and finally, 3), the keyword "this", which should never be modified.
Secret to good sound!