A Complete Guide to Web Design

338 Chapter 19 – Audio on the Web

Nonstreaming (Static) Audio

Web Design in a Nutshell, eMatter Edition

Using these guidelines, if we start with a one-minute music sample at CD quality

(10MB), and change it to a mono, 8-bit, 22 Khz WAVE file, its size is reduced to

1.25 MB, which is much more reasonable for downloading.

Obviously, just how stingy you can be with your settings while retaining accept-

able quality depends on the individual audio file. You should certainly do some

testing to see how small you can make the file without sacrificing essential audio

detail.

Adding Nonstreaming Audio to an HTML Document

This section looks at the many ways audio files can be accessed by an HTML

document. You can link to an audio file using an anchor (<a>) or embed the plug-

in player in the flow of the page with the<embed>tag. Sounds can also be used

as backgrounds that begin playing automatically when the page downloads. This

section provides one technique for triggering a sound using JavaScript.

A simple link

You can use a simple anchor tag(<a>) to link to an audio file from a web page,

as follows:

<a href="audio/song.wav">Play the song.</a>

When the reader clicks on the linked text (you could also use a graphic as the

link) the browser will retrieve the file from the server and launch a helper applica-

tion (or plug-in, if so configured) to play the file.

If the browser uses an external player, a new small window will open with the

controls for playing the audio. If the browser is configured to use a plug-in player

(such as the popular QuickTime plug-in), a control panel may load right in the

browser window, replacing the original web page! You may want to advise

readers to use the Back button to return to the original page should this happen.

It is also good web design form to warn readers of the size of an audio file so they

can make informed decisions whether they want to spend the time downloading.

<embed> for use with plug-ins

When you use the<embed>tag, the browser places the plug-in controls in the

flow of the text like an image. Although it was created by Netscape, Internet

Explorer began supporting the<embed>tag with version 3.0, making it a rela-

tively safe way to add audio (or any media) to your page. Note that when you use

a plug-in, the audio will stop playing when the user leaves the page.

In Navigator, the<embed>tag works with the LiveAudio plug-in to play audio

files. You have the option of putting a small control panel inline on the web page

that allows the user to start and stop the audio, as well as affect its volume.

The following<embed>tag places a control panel on the page that will play the

audio file when the user presses the Play button:

<EMBED SRC="audio/song.mid" CONTROLS="console" HEIGHT=60

WIDTH=145 AUTOSTART="false"></EMBED>