Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Create a Mouse Click Sound Effect

By Stephen Bucaro

One way to add to the exerience of visiting your website is to provide sound effects. It's extremely easy to add a click sound when a visitor clicks on a link. The first thing you need to do is locate a click sound file and store it on your web server.

Click here to visit Bucaro TecHelp front page.

Then you need to place html code for a span with the id attribute music. Inside that span, nest the html code to embed the sound on your webpage. The code for to embed the sound on your webpage is shown below.

<span id="music"><embed type='audio/mpeg' src='click.mp3' autostart='false' loop='false' width='0' height='0'></span>

The next thing you need to do is create a function that rewrites the embeded html code, changing the code's autostart attribute from false to true. The code for this function is shown below.

<script type="text/javascript">
 function playSound()
{
      document.getElementById("music").innerHTML = "<embed type='audio/mpeg' src='click.mp3' autostart='true' loop='false' width='0' height='0'>";
}
</script>

Paste this code Then you need to call this function in the onclick event of every link where you want the sound the play when your site's visitor clicks. Example code for this is shown below.

<a href="http://bucarotechelp.com" onclick="playSound();">Bucaro TecHelp</a>

Click here to go to Bucaro TecHelp front page.

One problem with this approach is that it works only in Internet Explorer. You may choose instead to use the HTML5 audio element to play your sound. This will work in all newer browsers (but not in older browsers). To use the HTML5 audio element, replace the code for the <embed> element with the code for the <audio> element, as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>

<audio id="click" src="click.mp3" preload="auto"></audio>

<a href="#" onclick="document.getElementById('click').play(); window.open('http://bucarotechelp.com');">Bucaro TecHelp</a>

</body>
</html>

Note that in this code I also included the DOCTYPE and head tags for a proper HTML5 webpage, although I found that the audio element also works with the HTML 4.0 Transitional DOCTYPE in the Internet Explorer and Firefox browsers. Note that you may need to keep the HTML 4.0 DOCTYPE for other code on your webpage to work.

Also with this code you don't need the previous function in the <head> section of your webpage, because I coded it right in the link's onclick event, that's just another way of doing it. The code in the link's onclick event executes the audio element's play method.

More Java Script Code:
• JavaScript Code for Binary to Hexadecimal - Hexadecimal to Binary Conversion
• JavaScript Code to Save and Load a Table Using HTML5 Web Storage
• A JavaScript Function That Returns a Function
• Easy Java Script Windows
• Learn JavaScript Visually
• Prevent Automated Form Submissions With Java Script
• Easy JavaScript FileReader Code
• HTML5 Canvas lineCap and lineJoin Attributes
• How to Shuffle the Deck With Java Script
• Calculators for Your Web Site : Loan Payment Calculator