Sound On Mouse Hover Script

Adding webpage audio with a mouse over

Pinned Note Mouseover Audio
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.

Mouseover Sound Link

Sound on Image Hover

Mouseover Sound Div Area

Adding hover 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 hover sound files

Step 2: From the downloaded zip file, copy the "sound-mouseover.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-mouseover.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 hover links, image or div.

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

Code for a text hover sound link:

<a href="about.htm" onmouseover="playclip();">Mouseover Sound Link</a><br>

Code for an image hover sound link:

<a href="about.htm" onmouseover="playclip();"><img src="picts/sound-image.jpg" width="125" height="125" border="0" alt="image"></a><br>

Code for a div sound area:

<div onmouseover="playclip();" style="border: #C0C0C0 1px solid; background-color: #F0F0F0; text-align: center; width: 250px; padding: 8px;">Mouseover Sound Div Area</div>

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:

    <audio id="mySoundClip1">

  • Replace the code in the "sound-mouseover.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");;

  • 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.

Sell Mp3 Music Downloads, Web Template For Musicians