Simple Sound On Click

Adding webpage elements with audio on click

Pinned Note Click Audio
Cross-browser HTML5 sound for "OnClick" events that can be used on text, images or a div section on an HTML webpage. Works in all web browsers and also in older versions of IE (7 & 8) by using the fallback "bgsound" HTML code. See notes at the bottom of this page.

Click sound examples:
These examples include sound for a text click, image click or div area click. You should hear a short click when you click on any of these 3 elements. [ view example ]

Click For Sound

Click for Sound

Click For Sound


Adding click sound to your webpage:
Uses the HTML5 "audio" tag. Follow the steps below to add sound to any HTML webpage.

Step 1: Zip Download Download the click sound files

Step 2: From the downloaded zip file, copy the "sound-onclick.js" and 2 sound files, .mp3, and .ogg into your main website folder. Place the "sound-image.jpg" in your picts folder.

Notes: The .ogg is for Firefox and Opera. The mp3 is used for IE, Safari and Chrome. You can optionally use a wav by editing the code in step #4 to .wav and edit the "sound-onclick.js" to use a wav.

Notes: The bgsound code is used for IE versions before IE9.

Step 3: Select, copy and paste the following code to your HTML page. This code goes in the top <head> section of your HTML page.




Step 4: Select, copy and paste the following code to your HTML page. This code goes near the bottom of the page. Place it after your click text, image or div.




Step 5: Select, copy and paste the following code to add your sound click text, image or div code.

Code for text click sound:

<a href="javascript:playclip();" style="font-size: 1.5em;">Click For Sound</a><br>

Code for an image click sound:

<a href="javascript:playclip();"><img src="picts/sound-image.jpg" width="150" height="100" border="0" alt="Click for Sound"></a><br>

Code for a div sound area:

<div OnClick="playclip();" style="border: #C0C0C0 1px solid; background-color: #F0F0F0; width: 200px; padding: 8px; text-align: center; margin: 0 auto; cursor: pointer;">Click For Sound</div>


Step 6 Testing: Test your page in some different browsers like IE, Chrome, Firefox and Safari if possible.


Converting audio files:
We use Sound Forge software to convert our samples to ogg, however, if you search at Google many other free mp3 to ogg converters are available like Audacity and the OGG Video Converter (if you do some Google searches you may find a free download of Sony Sound Forge).


Notes and Tips:
  • The code used is HTML5 with "bgsound" fallback.
  • If you do use long sound files use an mp3 file saved at a lower quality.
  • Sound may not work in all browsers or may load more slowly in some browsers.
  • Sound may not work in Safari unless you have installed Quicktime.
  • Only 1 sound file per page can be used unless you modify the script as outlined below.

Multiple different sound files on the same page:
This is involved and only for advanced users. You will be changing the script to play sounds by ID rather than by using the audio tag.
  • In the code from step #4 above, give each <audio> you add a unique ID like the following:

    <audio id="mySoundClip1">

  • Replace the code in the "sound-onclick.js" with the following to allow the sound to play by ID:

    Replace this...

    var audio = document.getElementsByTagName("audio")[0];

    With this instead...

    var audio = document.getElementById("mySoundClip1"); audio.play();

  • You will need to create multiple functions with different names in the "sound-onclick.js". One for each sound.
  • The "sound-onclick.js" includes only a single function. Copy that entire function and paste it below itself and give the pasted function a new name. ie: "function playclip()" edit to "function playclip1()".
  • Edit the ("mySoundClip1"); to your <audio> ID name.
  • You need to add multiple audio code from step #4 for each sound each with a unique ID. However, add the "bgsound" code only 1 time.
  • For the links in step #5 each need to be edited with your new function name. playclip(); to for example playclip1();.
  • Edit the sound files to use in the code you add to the HTML page, and the .mp3 to use in each function you added.
  • Note: You are changing how the HTML5 audio plays, however, the bgsound code is still basically the same.
  • Be sure to test in IE and at least one other web browser.





Sell Mp3 Music Downloads, Web Template For Musicians




Add Audio to a Webpage
Continuous Music
Audio On Hover
Music Popup Script
Audio On Homepage
Mini Mp3 Player Support
Audio not working
Musician Web Templates
Royalty Free Music
Mini Mp3 Player Add-on

SQuare Peach Royalty Free Music




Royalty Free Music