O'Reilly logo

Designing Web Audio & CD-ROM by Dylan Thede, Josh Beggs

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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>

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required