Adding sound effects

There are several options for embedding sound effects in your web page. One of the more popular effects is a button rollover. Flash, Shockwave, Beatnik, and JavaScript all allow for interactive mouse rollover sounds. However, JavaScript is by far the easiest to implement, as it does not require plug-ins and works seamlessly on most browsers.

There are many JavaScripts available at shareware sites such as http://www.webcoder.com/ and http://www.javascripts.com/. Here is a script by Nick Heinle, author of Designing with JavaScript (Anonymous), that plays a sound when you click on a link:

<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript"> // This function detects the ability to play LiveAudio and then // decides whether or not to play a specified embed's sound file. function playSound(name) {
 if (navigator.appName== "Netscape" && parseInt(navigator.appVersion) >= 3 && navigator.appVersion.indexOf("68k") == -1 && navigator.javaEnabled( ) && document.embeds[name] != null && document.embeds[name].IsReady( )) {
 document.embeds[name].play(false);
}
} // Turn off Netscape's error checking. onerror = null </SCRIPT>
</HEAD>
<BODY >
<!-- Play the LiveAudio embed named "click" (when clicked). -->
<A href="home.html" >Home</A>
<EMBED src="click.au" NAME="click" HIDDEN="TRUE" LOOP="FALSE" AUTOSTART="FALSE" MASTERSOUND>
</BODY>
</HTML>


Sound design tip

The disadvantage to using JavaScript sound effects is that the program has to call up individual wav or au files for playback with the browser's built-in audio capabilities. Instead of a dedicated plug-in seamlessly calling up and playing back sound files, JavaScript relies on Windows browser MIME-type specifications for wav files. The browser MIME-type settings are often co-opted by other audio programs such as those in RealAudio or Beatnik. For example, if you have previously downloaded the Beatnik plug-in, it sets your system parameters to play back wav files via Beatnik instead of JavaScript. If you then load JavaScript that calls up a wav file, your system will report an error message when it tries to find the Beatnik plug-in.