How to make a sound effect for navigation buttons or a menu with JavaScript and a little Flash
Results from the web regarding sound effects for navigation buttons are all unacceptable. Some JavaScript solutions only work for IE, some solutions works in FF and IE but have different ways of making sound, varying quality and:they are unacceptable. A complete Flash solution is also too heavy-it would need a dynamic menu in Flash, loading menu elements from and external file and automated file generation at the backend.
What is the solution? JavaScript can be set for mouse-over events, and it can call Flash sound effects.
What we have now is:
- Flash file soundplayer.swf
- Sound file in MP3 format as a parameter to Flash
- Javascript funtion which calls Flash sound event
- To get sound, you can take any file you want, it just need to be in MP3 format.
Here is example links with javascript + flash sound effect on it
some place where you can find sound files
How mouseover javascript sound effect works in details
<html>
<head>
<!--loading swfobject for flash object generation-->
<script src="swfobject.js" language="javascript"></script>
<script type="text/javascript">
// this two funstions make the call to flash
function playSound() {
thisMovie("soundplayer").playSound();
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName]
}
else {
return document[movieName]
}
}
</script>
</head>
<body bgcolor="#ffffff">
<!-- div where we will put our playing flash, it should be invisible (not display: none! or flash will not work) -->
<div id="playerDiv" style="visibility:hidden"></div>
<script type="text/javascript">
var fo = new SWFObject("soundplayer.swf?imageFile=sound.mp3", "soundplayer", "1", "1", 7, "#F4F4F4");
fo.write("playerDiv");
</script>
<p>
<a href="http://webandpeople.com/how-to-make-sound-effect-on-buttons-with-javascrip.html" type="button" onmouseover="playSound()">Mouseover to test the sound</a>
</p>
</body>
</html>