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:
• Binary Subtraction with Example JavaScript Code
• Easy Java Script Timer Code
• Easy Expanding Banner Code
• Java Script to Get Selected Item from Drop-down Select List
• Calculators For Your Web Site : Length Units Converter
• Java Script Trim Function
• JavaScript Code to Add or Remove Specific Elements of an Array
• Change the Case of a Character in a String
• A Brief Introduction to HTML for JavaScript Programmers
• Java Script Code for Directory File List

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-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268