Adding sound effects (Designing Web Audio)

1.4. 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 (O'Reilly), 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 BGCOLOR="#FFFFFF">

<!-- Play the LiveAudio embed named "click" (when clicked). -->

<A HREF="home.html" onClick="playSound('click')">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.