Web Audio Action

There may be lots of audio activity on the Web (such as streaming and downloading), but not much of it is actually integrated into the Web. Just as sound
Publish date:
Social count:
There may be lots of audio activity on the Web (such as streaming and downloading), but not much of it is actually integrated into the Web. Just as sound

There may be lots of audio activity on the Web (such as streaming and downloading), but not much of it is actually integrated into the Web. Just as sound is synched to picture in films, Internet audio must sync to onscreen elements before music and sound effects are truly integrated into a Web site's overall design.

In this article, I'll explore the ways to incorporate sound into a Web site and to make it seem like it belongs there. That means going past the limitations of HTML, which by nature is page oriented, to understand the role of helper applications, scripting, and programming.


Playing audio from a Web page depends on an audio-player helper application, such as a Netscape Navigator plug-in or an ActiveX control added to Microsoft Internet Explorer. The helper application might be the browser's default audio player or one of several third-party players, including RealPlayer, QuickTime Player, or Windows Media Player. The most basic way to play an audio file is through a simple hyperlink, such as this bit of HTML:

Here is a link to an audio file:

Click here for a sound.

At www.spencercritchley.com/em/webaudio, you can try that as well as the other examples. As you will see, when you click on a link such as that, the helper application is supposed to launch and play the file; see example 1 on my Web site for more information. The behavior of the audio file when it is played varies widely depending on which helper application is installed, though. From a design point of view, that behavior is not very integrated, because you don't have a lot of control over what happens on the user's machine.


The first step beyond just linking from a page to an audio file is embedding the audio in the page. Actually, what you're embedding is an instance of a helper application, which plays the audio. (An instance of an application is created whenever an application is launched and loaded into memory. Frequently, you can have more than one instance of the same application running.)

From an interactivity standpoint, embedding has several advantages. The audio can reside within the page along with the text and images. Typically, the audio file and the rest of the page are loaded into memory so that once the page has finished loading, the audio is ready for playback without a noticeable delay. That responsiveness is crucial for successful interactive design. Depending on the helper application, you could also have a fair amount of control over what kind of playback interface, if any, is presented to the user.

Fig. 1 shows how an embedded audio file might appear on a Web page (see online example 2). Any browser installed or updated in the past few years (Navigator 3.0 and later or Internet Explorer 4.0 and later) should be able to play an embedded audio file if the audio is in a standard format (see the sidebar “Web Audio Formats”).

Embedding can also have some shortcomings. Because the file is typically loaded into memory, embedding is not a good choice if you work with large audio files or many small ones. Transferring a lot of audio data across the Internet slows down the page load and may take up more memory than is available on the user's computer. Loading the entire file isn't always necessary; many embeddable players allow streaming, so the audio file plays as it arrives from the Web server.

Without the effort of extra scripting, interactive control is typically limited to playing, stopping, cueing, and setting the volume. Managing layers of audio without extra scripting is also difficult. You can embed multiple audio files, but any attempts to synchronize them or control their volumes will likely end in frustration.


Your audio format choice should be based on several factors, including its compatibility with various browser versions. The most widely adopted helper-application formats are Windows Media, RealAudio, QuickTime, Shockwave, and Flash.

Take into account each format's audio quality at various bandwidths; some formats do better than others at certain bandwidths. The type of playback interface and the depth of interactivity you want are also important considerations.

For many formats, encoding doesn't cost anything. Your audio-editing software might support Web encoding, or the Web site of the company that makes your player software may offer a free, downloadable content-creation tool (see the sidebar “Useful Resources”). The encoding process is usually well explained in each company's documentation, and wizards are often available to guide you through the process. Some content tools, such as RealSystem Producer, convert the audio and generate the HTML to embed the file in a Web page.


The next example shows the HTML for embedding an audio file; go to online example 2 for more information. I use QuickTime because its code is relatively straightforward; you can do the same kind of thing with the other helper applications. The tag's attributes vary among individual players and between Navigator and Internet Explorer. The base attributes, observed by nearly everybody, are , , , , , and .

I used the and attributes of the tag to create a minimal audio-style interface that is 16 pixels high and 240 pixels wide. The attribute directs the browser to the helper application if it isn't already installed. In my examples, I use , which is supported by Navigator 2.0 and later and Internet Explorer 3.0 and later. Internet Explorer also uses the