Sound on mouseover or click

How can I have a sound playing when people point their mouse over an image or some text? How can I have a sound playing on click?

Examples for this are found at the bottom of this page.

First I'd like to say that I am not (NOT!) a friend of websites playing sounds every time you click a button or link. It gets annoying very quickly. Also when I browse the web I'm usually listening to music and any sound effect drives me crazy. Furthermore I think there's enough sound pollution out there which makes us sick.

So as a webmaster you may think it's a funny fancy idea to put a sound on any button. As a visitor I can assure you that I leave any website playing any sound in a matter of seconds.

So whatever you do with that please think about it twenty or thirty times. I would really avoid using it in a navigation. Thank you.

That said there are certainly other occasions where it may be funny. For example when telling a story you can add sound effects, such as a car leaving, a door slamming, the effect of ghosts, the wind whistling through windows, waves on the ocean, a baby giggling. Just make sure it doesn't get annoying. Also you may instruct people with "move your mouse over the picture to hear the birds singing" so they can choose whether they want to hear them or not. I always find it a nightmare if I don't have the choice (like in menus) and that's when I say "Goodbye!".

Achieving the effect is really easy. All you have to do is upload an mp3 file with the sound effect to your server, get the URL then use this code from www.javascriptkit.com which is made out of two parts. The first part is used to define the sound to play and the second part is used to define how or when to play the sound. Whereas the first part of the code is added only once per page or post the second is added as many times as you want to have a sound playing on your page.

First part of the code:

<script>
var html5_audiotypes={
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}

var mouseoversound1=createsoundbite("sound.ogg", "sound.mp3")
var clicksound1=createsoundbite("click_sound.ogg", "click_sound.mp3")

</script>

Replace sound.ogg and sound.mp3 and/or click_sound.ogg and click_sound.mp3 with the URL to your sound effect. Once you're done editing paste the code into the page or post you want to add the sound effect to.

Second part of the code:

Choose the one which fits your needs...

Code for playing a sound when pointing the mouse over some text

<a nohref onmouseover="mouseoversound1.playclip()">Your text</a>

Code for playing a sound when pointing the mouse over a link

<a href="URL to the page" target="_blank" onmouseover="mouseoversound1.playclip()">Your text</a>

Code for playing a sound when pointing the mouse over an image

<a nohref onmouseover="mouseoversound1.playclip()"><img src="URL to the image" style="width:200px;height:80px;border:0px;"></a>

Code for playing a sound when pointing the mouse over an image-link

<a href="URL to the page" target="_blank" onmouseover="mouseoversound1.playclip()"><img src="URL to the image" style="width:200px;height:80px;border:0px;"></a>

Code for playing a sound when clicking on some text

<a nohref onclick="clicksound1.playclip()">Your text</a>

Code for playing a sound when clicking on a link

<a href="URL to the page" target="_blank" onclick="clicksound1.playclip()">Your text</a>

Code for playing a sound when clicking on an image

<a nohref onclick="clicksound1.playclip()"><img src="URL to the image" style="width:200px;height:80px;border:0px;"></a>

Code for playing a sound when clicking on an image-link

<a href="URL to the page" target="_blank" onclick="clicksound1.playclip()"><img src="URL to the image" style="width:200px;height:80px;border:0px;"></a>

Paste the second part of the code into your page or post where you want the sound effect to appear.

Note: If you use the on-click method for links the link should open in a new window otherwise there's not enough time for the sound to play before the page changes (this doesn't affect on-mouseover). You may rather use on-mouseover for links which open in the same window.

Check the Basic web knowledge FAQ to know how to upload any file and get its URL. Check the Basic HTML Code knowledge base FAQ for more info on how to use the above codes.

How can I have multiple sounds playing on a page?

If you want to add multiple sounds on the same page in the first part of the code where it says

var mouseoversound1=createsoundbite("sound.ogg", "sound.mp3")
var clicksound1=createsoundbite("click_sound.ogg", "click_sound.mp3")

add more sounds like

var mouseoversound1=createsoundbite("sound.ogg", "sound.mp3")
var mouseoversound2=createsoundbite("sound2.ogg", "sound2.mp3")
var mouseoversound3=createsoundbite("sound3.ogg", "sound3.mp3")
var clicksound1=createsoundbite("click_sound.ogg", "click_sound.mp3")
var clicksound2=createsoundbite("click_sound2.ogg", "click_sound2.mp3")
var clicksound3=createsoundbite("click_sound3.ogg", "click_sound3.mp3")

and so on. In the second part of the code

<a nohref onclick="clicksound1.playclip()">Your text</a>

change the number to reflect the right sound.

Examples...

Hover over the cow to listen what she's got to say. Or ring the bell to get to the Home page of this website (opening in a new page).

This FAQ is also discussed in my WPFAQ.org E-Book (sample)

© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com
Thank you for visiting and supporting my website,
- Cédric -

Now share it…

Share

Comments are closed.