There are a number of ways to add audio to a web page. This section covers the most common techniques.
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.
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:
For Internet Explorer 2.0+ (no other browsers support this tag), use the <bgsound> tag, as follows:
<BGSOUND SRC="audio/song.mid" LOOP=3>
where src gives the URL for the audio file and loop is the number of times you want the audio to play (this attribute can be set to "infinite"). WAV, AIFF, and MIDI sound files can be played as background sounds using this method.
To set a background sound that works with both Netscape Navigator and Internet Explorer, use a combination of the background sound tag (for IE) and an <embed> tag (for Navigator) with the control panel hidden, as follows:
<EMBED SRC="audio/song.mid" autostart=true hidden=true> <NOEMBED><BGSOUND="audio/song.mid"></NOEMBED>
For Netscape Navigator and Internet Explorer (5 and higher), you can make audio play automatically with client-pull by using the <meta> tag as follows:
<META http-equiv="refresh" content="1;url=audio/song.mid">
which causes the page to refresh (and the audio to play) after one second. This use of the <meta> tag is discouraged by the W3C in HTML 4.01.
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.
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
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.
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.
Copyright © 2002 O'Reilly & Associates. All rights reserved.