Sams Teach Yourself JavaScript in 24 Hours

Playing Sounds with JavaScript

Although the W3C DOM has made advanced effects and applications possible in JavaScript in a painless, cross-browser fashion, no standard has emerged to do the same for JavaScript's sound support. There are a few ways of making JavaScript play sounds, and none of them work consistently in all browsers all of the time. Nonetheless, with a bit of effort, you can play sounds in most browsers.

Sound Formats

There are a wide variety of sound formats, usually identified by their file extensions. The following are some of the most common sound formats on the Web:

• .au (Audio Unit) The earliest sound format supported by browsers, and still the most widely supported. Some browsers have built-in support for this format. In Firefox, the QuickTime plug-in supports .au files.

• .wav The standard Windows sound format (usually played by Media Player on Windows machines).

• .mp3 A compressed format for larger files, such as music. MP3 plug-ins are not included with most browsers, but are often installed by users.

• .mid (MIDI) Rather than audio, MIDI files store note information to re-create a song using a standard set of instruments. Most computers support MIDI music, although a browser plug-in might be required.

Any of these formats can be supported by most browsers, but unfortunately there is no format that is universally supported. If you're hoping as many visitors as possible will be able to hear your sounds, the best choice is .au if you're using standard audio plug-ins, or .mp3 if you're using Flash.

Sound-Playing Plug-Ins

Browsers almost always require a plug-in to play sounds. Fortunately, sound plug-ins are widely used and many of your site's visitors already have one or more of them installed. Here are the most common sound-playing plug-ins:

• QuickTime Apple's sound and video player, installed by default on Macintosh systems. QuickTime plug-ins are also available for Internet Explorer for Windows and for Firefox on Windows and Macintosh.

• Windows Media Player Microsoft's sound and video player, installed by default on Windows systems.

• RealPlayer A popular third-party plug-in for playing music and video, available from http://www.real.com.

• Flash Although the Flash plug-in doesn't play standard embedded sounds, Flash animations and movies can play sounds, as you'll learn later in this section.

Embedding Sounds

The following is a simple example of an <embed> tag to embed a sound in a page:

<embed id="note_c1" src="c1.au" width="0" height="0"
  autostart="false" enablejavascript="true"/>

This example works with the most common sound plug-ins. It specifies a source filename for the sound file (c1.au) and autostart="false" to prevent the sound from playing when the page loads. The enablejavascript parameter is required by some plug-ins to allow scripting.

The width and height parameters set the size of the embedded player. If they are not zero, the player will be visible with Play, Pause, and Stop buttons. Setting them to zero hides the player, useful when you intend to control it strictly with JavaScript. (A hidden parameter is supposed to hide the player, but this causes sounds not to play in some browsers.)

Controlling Sounds with JavaScript

After you've embedded a soundassuming a browser plug-in supports ityou can use the following methods of the sound object to control the sound:

• Play() or DoPlay() Starts playing the sound, and stops when the sound is finished. DoPlay() is supported by RealPlayer, and Play() is supported by most other sound plug-ins.

• Stop() Stops the currently playing sound.

• Rewind() Restarts the current sound at the beginning.

Detecting Sound Support

Because you can't count on sounds being supported by all browsers, it's a good practice to use try and catch to test the statements and display a message (or take another appropriate action) if sounds are not supported:

try {
  sound.DoPlay();
} catch (e) {
  try {
    sound.Play();
  } catch (e) {
    alert("No sound support.");
  }
}

This code first tries RealPlayer's DoPlay() method. If that doesn't work, it tries the Play() method. If neither approach works, it displays an error message.

Using Flash

If you are relying on sounds for an application, you might want to consider using Flash. You can create a simple Flash object that loads sound files and allows JavaScript to play them. This gives you scriptable sounds using one consistent plug-in that works on most platforms.

Scott Schiller's SoundManager provides an easy way to use Flash sounds from JavaScript. SoundManager uses a Flash object to play MP3-formatted sounds you specify in an XML file. After you've created the XML file and included SoundManager using a <script> tag, you can use its methods to control the sounds. More information and the download for SoundManager are available at http://www.schillmania.com/projects/soundmanager/.