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>

Get Designing Web Audio & CD-ROM now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.