Section 33.7. Adding Audio to a Web Page


33.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.

33.7.1. A Simple Link

You can link to an audio file from a web page using a simple anchor (a) element, as follows:

     <a href="audio/song.mp3">Play the song (3.5 MB)</a>     <a href="groovy.mp3"><img src="/books/4/439/1/html/2/buttons/playme.gif"></a> 

When the reader clicks on the linked text or image, 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.

It is 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.

33.7.2. Background Sound

Although it is possible to embed an audio file on a web page so that it starts playing automatically when the page loads, this technique is not recommended. The problem with background sounds is that users have no way of turning the sound off if they do not like it. Also, if the audio file is large, you are forcing a potentially lengthy download on the user. Furthermore, background music on a web page is almost always unnecessary.

If you do need to add a background sound to a page, you can do it with this nonstandard markup. Be aware that this element will cause your document not to validate.

     <embed src="/books/4/439/1/html/2/audio/song.mid" autostart="true" hidden="true"></embed> 

33.7.3. Adding RealMedia

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

RealNetworks provides extensive tutorials for producing, managing, and serving RealMedia. Start with these online guides:

  • service.real.com/help/library/guides/realone/IntroGuide/HTML/prodintro.htm

  • service.real.com/help/library/guides/realone/ProductionGuide/HTML/realpgd.htm


Real recommends displaying RealMedia content in the RealPlayer three-panel environment, because it enables you to take advantage of the full range of features and doesn't require potentially complicated markup and scripting that cross-browser embedding can entail.

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 call 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.

33.7.3.1. Linking to RealMedia (external player)

When the user accesses RealMedia via a link (using the a element), 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):

     rtsp://domainname.com/song.rm 

33.7.3.2. Embedding RealPlayer on the page

The most common method for embedding RealPlayer on a web page is to use a combination of the standards-compliant object element that works for Internet Explorer 5+ on Windows and the embed element for browsers that use the Netscape plug-in architecture.

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 example in this section uses the nonstandard embed element that will prevent (X)HTML documents from validating. In an ideal world, only the standards-compliant object element would be necessary to embed media objects on a web page, but as of this writing, the embed element is still required for full cross-platform functionality. You are encouraged to explore whether the object element alone may be sufficient for your needs.


The following sample code uses both the object (with parameters) and embed elements 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        class        height="150" width="250" border="0">     <param name="SRC" value="realmedia/oakshoes.rpm">     <param name="CONTROLS" value="all">     <param name="AUTOSTART" value="true">        <embed src="/books/4/439/1/html/2/realmedia/oakshoes.rpm" height="150" width="250"         autostart="false" controls="all" border="0">         <noembed>You need the RealPlayer plugin to play this song.</noembed>         </embed>     </object> 

The embed element 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 param elements). It is 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. 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.

33.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 uses 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 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 Services program. For more information, see the MSDN Library located at msdn.microsoft.com/library/default.asp.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net