iWeb FAQ - Sound on mouseover or on click

iWebFAQ.org

 

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?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 

Share/Bookmark

Share/Bookmark


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




First part of the code:


<script>

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)


var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:

"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. I think most browsers support mp3 so you may also just add an mp3 file without adding an ogg file as well.



Second part of the code:



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>




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.


This can either be added via Alternative HTML or HTML Snippet.



If you want to add multiple sounds in the same HTML Snippet or 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 iWebFAQ.org E-Book (sample)


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -