Add Sound Onclick or Onmouseover

One of the features of computer applications is that there is feedback when you do something. The most common type of feedback is sound. The computer clicks when you select things, beeps when there are errors, and makes other noises to alert you to situations. But Web pages don't usually have this type of feedback. But using DHTML attributes and sound, you can create a Web page that acts more like an application.

Add Sound Onclick or Onmouseover

This script will add sound effects to onclick and onmouseover attributes of elements. Be sure to test them in different browsers, as not all Web browsers handle onmouseover and onclick attributes on elements other than links.

Use JavaScript to Add Sound

Place the following script in the <head> of your HTML document:
 <script language="javascript" type="text/javascript">
 function playSound(soundfile) {
 document.getElementById("dummy").innerHTML=
 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
 }
 </script>

The Sound is Placed in an Empty Span

The JavaScript places an embed tag inside an empty span tag when the script is initiated. So, you need to add the following span file somewhere within the body of your HTML page, preferabl near the top of the document:
<span id="dummy"></span>

Call the Script with an onmouseover or onclick Attribute

The last thing you need to add is an element that you want to generate the sound on click or on mouseover. Call the script with one of those attributes:
<a href="#" onclick="playSound('URL to soundfile');">Click here to hear a sound</a>

 <p onmouseover="playSound('URL to soundfile');">Mouse over this text to hear a sound</p>
Play sound onclick example.
Related Posts Plugin for WordPress, Blogger...