New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

IE5+

JavaScript Sound effect

Author: Dynamic Drive

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


Directions: Developer's View

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.

Select All

Step 2: Set up an element to receive the JavaScript sound, whether onMouseover, onClick etc. For example, the below plays a sound when the mouse moves over a link:

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

Adding a JavaScript sound to all elements of the specified type

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:

<div id="coolmenu" onMouseover="bindsound('A', soundfile, this)">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.dynamicdrive.com"">Dynamic Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.wired.com">Wired news</a>
<a href="http://www.codingforums.com">Coding Forums</a>
</div>

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!

The secret to good JavaScript sound is simple- use something as small and short as possible (< 2k), preferably under 1 second. If you try playing a large sound clip, the preloading time alone will drive your visitors up the wall. Also, for some good sound effects in Windows XP, just go to "Sound and Audio Devises" under the Control Panel, and cycle through the various default Windows sound effects that's part of your computer. The wav file used above can be downloaded here (right click, and select "Save As").