RapidWeaver FAQ - Sound on mouseover or click







Share/Bookmark


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

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. Paste the first part of the code under Page Info, Header, Header.

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>




Paste the second part of the code into your post or page where you want to add the effect. Once you added the code to RapidWeaver select it and go to "Format", "HTML" choose "Code".

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 RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
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