start page | rating of books | rating of authors | reviews | copyrights

Book HomeWeb Design in a NutshellSearch this book

24.7. Adding Audio to a Web Page

There are a number of ways to add audio to a web page. This section covers the most common techniques.

24.7.1. 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 (3.5 MB)</A>
<A HREF="groovy.mp3"><IMG SRC="buttons/playme.gif"></A>

When the reader clicks on the linked text or graphic, the browser retrieves the audio file from the server and launches a helper application (or plug-in, if the browser is so configured) to play the file. Files accessed in this manner are typically downloaded to the user's hard drive (stored in cache).

If the browser uses an external player, a new small window from the helper application opens 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 etiquette to warn readers of the size of an audio file so they can make an informed decision as to whether they want to spend the time downloading the file.

24.7.2. Background Sound

There are several ways (mostly browser-specific) to make an audio file start playing automatically when a web page loads. Note that the disadvantage of using background sounds is that the user has no way of turning the sound off if she does not like it. Also, if the audio file is large, you are forcing a potentially lengthy download on the user. This is particularly bad web etiquette.

To add a background sound to a web page, try these methods:

24.7.3. Adding RealMedia

RealMedia (including RealAudio) files can be added to a web page via two methods. The first triggers the browser to launch RealPlayer as an external application. The second plays the media file in a player embedded directly in the browser window using the RealPlayer plug-in.

In either case, you do not create a link directly to the RealMedia file itself, but rather to a special reference file, called a metafile. The metafile is a simple text document that contains the URL of the RealMedia file. These reference files are generally kept in the same directories as the HTML documents, although that is not a requirement.

There is a three-step process from click to playback. First, clicking the HTML link downloads the metafile from the server to the browser. Once it arrives at the browser, the metafile tells the browser to launch the RealPlayer and provides the player with URL information. Finally, the player uses the URL to request the actual media file from the server and begins playing the stream.

Metafiles are useful for maintenance and control purposes. To change the audio, all you have to do is change the tiny metafile, rather than having to dig through HTML source code. You can also do things like calling multiple streaming media files from one metafile. One link to the metafile plays all the files.

This indirect linking process is demonstrated in the following two examples.

24.7.3.1. Linking to RealMedia (external player)

When the user accesses RealMedia via a link (using the <a> tag), the browser launches the external RealPlayer application.

In the HTML document, make a link to the metafile that points to the RealMedia file as follows:

<A HREF="song.ram">Link to the song</A>

When linking to RealMedia, the metafile uses the .ram suffix. The metafile is a small text-only file that contains only the URL that points to the RealAudio file (suffix .rm or .ra):

pnm://domainname.com/song.rm

24.7.3.2. Embedding RealPlayer on the page

To place the RealPlayer controls in the web page itself, use the <embed> tag for Netscape Navigator (Version 4 and earlier) and the standards-compliant <object> tag for Internet Explorer (all versions) and Netscape 6. To reach both browsers, you may use a combination of the two as shown in the following examples. This method uses the RealPlayer plug-in for playback.

It should be noted that the audio stops playing when the user leaves the page. Also, it is more difficult to get consistent cross-browser performance when the player is embedded. For these reasons, it is generally preferable to link to the audio and use the external player.

The following sample code uses both the <object> (with parameters) and <embed> tags to embed the player on the page. When RealMedia is embedded, the suffix of the metafile should be .rpm. This tells the browser to start playing the media in the browser window.

<OBJECT ID="oakshoessong" 
   CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" 
   HEIGHT="150" WIDTH="250" BORDER="0">
<PARAM NAME="SRC" VALUE="realmedia/oakshoes.rpm">
<PARAM NAME="CONTROLS" VALUE="all">

   <EMBED SRC="realmedia/oakshoes.rpm" HEIGHT="150" WIDTH="250" 
    AUTOSTART="false" CONTROLS="all" BORDER="0">

</OBJECT>

Let's start by looking at the <embed> tag, which is used by older versions of Netscape. It contains attributes for pointing to the metafile (src), specifying the size of the embedded player (width, height), whether the file starts playing automatically (autostart), whether it displays control buttons (control), and a border (border).

These same settings are made in the <object> tag using attributes and additional parameters (indicated by the <param> tag). It important that the classid attribute be specified exactly as it is shown in the example, as it is the unique identifier of the RealAudio plug-in. This may not be changed.

The easiest way to create the HTML code for handling RealAudio is to use the RealProducer or RealPublisher tool and allow it to do the work for you. RealNetworks also provides developer information at http://www.realnetworks.com/devzone/. The process for naming and accessing RealAudio has changed several times over the last few years, so be sure to refer to current documentation for up-to-date instructions.

24.7.4. Adding Windows Media

Before linking to Windows Media files (.asf or .wma), be sure they are saved in the ASFROOT directory on the NT Server running the Windows Media Administrator.

To link to a downloadable (nonstreaming) Windows Media Audio file (.wma), use a simple link directly to the audio file:

<A HREF="song.wma">Link to the song</A>

Linking to streaming Windows Media works much like the process described for RealAudio above. Streaming Windows Media use a go-between reference file called an "active stream redirector" file (.asx), similar to RealAudio's metafile. The ASX file contains the URL information that points the player to the actual media file. This method of providing a single stream to a single user on demand is called unicasting. In the HTML document, create a link to the redirector file as shown in this example:

<A HREF="streamingsong.asx">Stream the song</A>

The content of the .asx file looks like this:

<ASX version="3">
	<Entry>
		<ref href="path/streamingsong.asf" />
	</Entry>
</ASX>

Change the path in the <ref> tag so that it points to your Windows Media file. The .asx file should be saved in the same directory as the Windows Media file.

Another method for delivering Windows Media is multicasting, in which a single media stream is delivered (at a time determined by the publisher) and multiple users share the stream. You can multicast prerecorded or live content. To add a multicast to your site, it is recommended that you use the tools and wizards provided by the Windows Media Administrator program. For more information, see the Windows Media Technologies pageSG located at http://www.microsoft.com/Windows/windowsmedia/en/serve/basics_WM4.asp.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.