Cross-browser hover HTML5 sound for mouseover events that can be used on text links, 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.
Mouseover sound examples:
These examples include sound for a link hover, image hover or div area mouseover. You should hear a short click when you hover over any of these 3 elements.
Step 6 Testing: Test your page in some different browsers like IE, Chrome, Firefox and Safari if possible.
Converting audio files:
We use Sony 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.
You should use small sound files for the mouseover audio.
If you do use longer 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-mouseover.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-mouseover.js". One for each sound.
The "sound-mouseover.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 .wav 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.