Welcome to Bucaro TecHelp!

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

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Create a Mouse Click Sound Effect

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'>";

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">
  <meta charset="utf-8">

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

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


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:
• Introduction to HTML5 Canvas
• Regular Expression: Alternation
• Java Script Code to Factor Numbers
• How to Shuffle the Deck With Java Script
• Sams Teach Yourself HTML5 in 10 Minutes
• Using a Select List for Navigation
• Easy JavaScript Picture Selector Code
• Easy Expanding Menu Code
• JavaScript Code for Binary to Decimal - Decimal to Binary Conversion
• JavaScript to Copy and Paste Text to the Clipboard

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2021 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268