Picnic Website Code Tutorials

How To Play Sound onMouseOver Cross Browser/Operating System!

View Demo

...or onClick! Initially I was able to put together some code that played the audio on "my" OS and in "my" browsers, but unfortunately, not many others. So I continued looking for a cross browser/cross operating system way of implementing this effect. After a lot questions and even more searching, I finally found what I was looking for with SoundManager. I was also lucky enough to stumble across boutell.com's very detailed tutorial on the subject. So, here it is made even more simple! Note: The sound will only play live (not testing locally).

Aside from the webpage and image themselves, you need four files on your server to play the sound.

1) soundmanager.js
2) soundcontroller.swf
3) sound-config.xml
4) sound-file.mp3

In this order, you need four pieces in your webpage to play the sound.

1) <div></div> <!-- div does not need to be empty -->
2) <img src="baby.jpg" alt="" onMouseOver="soundManager.play('baby')">
3) <script type="text/javascript" src="soundmanager.js"></script>
4) <script type="text/javascript">soundManagerInit();</script>

Download Zip File...

Need help adding this or other code to your website? Post it here in the forum! Forum


Top Donators

Friends of Mine