Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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'>";
}
</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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

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