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 ]
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:
Replace the code in the "sound-onclick.js" with the following to allow the sound to play by ID:
var audio = document.getElementsByTagName("audio");
With this instead...
var audio = document.getElementById("mySoundClip1");
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.