Audio files can be downloaded from the Web for local playback. Audio files in MPEG and WAV formats are the most common types for downloads. Audio files can also be streamed from a media server computer. These can be in the form of live broadcasts or digitized files for on-demand retrieval. WMA format is a popular Windows format for streamed audio.

Linking to Audio Files

An audio file is made available for download and playback by placing it in your Web directory. Access to the file is through a simple link using an <a> tag coded with the relative URL to the file. When the link is clicked, the file is opened on the client’s desktop in the external Media Player. The player provides progressive download so that the user does not have to wait for the entire file to download before playback begins. After the file is downloaded, it becomes available on the uers’s PC and can be replayed locally.

The following graphic and text links connect to a WAV audio file appearing in the same directory as this Web page. A click on a link opens the external Media Player for file download and playback. The exact appearance of the Media Player on your desktop depends on how it is configured.

PeopleWillCome.wav (426 KB)

The above links are coded as shown below. The href attribute of the the <a> tags surrounding both the graphic image and text are URLs for the local WAV audio file.

<a href="PeopleWillCome.wav"><img src="PeopleWillCome.gif" alt="Kansas ballpark"/></a>
<a href="PeopleWillCome.wav">PeopleWillCome.wav (426 KB)</a>

Embedding Audio Files - Internet Explorer

Embedding the Media Player on a Web page is accomplished with an <object> tag. This tag is a generalized way of embedding numerous kinds of objects within a Web page. Its general format for embedding audio files is shown below.

The <object> tag is an in-line tag, meaning that it must be enclosed inside a block-level tag to pass XHTML 1.1 validation.

The classid is a number that identifies the type of object to embed in the page. For the Media Player this value is:

In its default settings the Player displays both a video screen and playback controls. The screen is used to display visualizations, graphical displays that change in response to the audio signal. The size of the Player can be changed from its default size by coding width and height attributes giving the dimensions in pixels.

Embedding the Media Player for an audio presentation is shown in Figure 9-7 with its code given in Listing 9-2. The URL points to an audio file in the same directory containing this Web page. The Player is displayed in its default size with its visualization screen, and playback does not commence until the "Play" button is clicked.

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <param name="URL" value="PeopleWillCome.wav"/>
  <param name="autoStart" value="false"/>
</object>

The <object> tag has a selection of startup param (parameter) settings for the Player. You must code the name="URL" setting and specify the value="url" location of the audio file. Whether or not the file begins playback immediately after the page is loaded is given in the name="autoStart" parameter. The default setting is value="true"; setting value="false" requires the user to initiate playback by clicking the "Play" button on the controls.

If you do not wish to display visualizations, you can include the setting height="45"; only the controls are displayed.

The name="uiMode" parameter of the <object> tag permits you to set display characteristics for the embedded player. Its default value="full" produces the full display screen and full set of controls. With value="mini" you get a reduced visualization screen and a minimal set of controls without a progress bar or track selector buttons. A typical minimum display is shown below, here with the width and height of the Player adjusted.

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="150" height="160">
  <param name="URL" value="PeopleWillCome.wav"/>
  <param name="autoStart" value="false"/>
  <param name="uiMode" value="mini"/>
</object>

Embedding Audio Files - Firefox

While the <object> tag is the preferred way of embedding audio content, it is currently not supported by Firefox. The Media Player can be viewed in Firefox by using the the <embed/> tag, whose general format is shown below.

<embed src="url" autostart="true|false"/>

The src attribute is the URL of the file. The autostart property indicates whether the file should begin immediate playback when the page is opened.

NOTE: The <embed/> tag is deprecated under XHTML 1.1. When using this tag, it is recommended that you use the XHTML 1.0 Strict DTD for backwards compatibility.

If you are adding audio to a page that is likely to be viewed using both IE and Firefox, you can use the <object> and code the <embed/> tag within the <object>. This allows you to take advantage of the <object> tag while making content available to Firefox users. When using this approach, the XHTML 1.0 Strict DTD should be used. The general format is shown below:

Scripting the Player

By setting the uiMode to value="none", no Player controls are displayed. Only the screen is visible. This can be an appropriate setting when the Player is auto-started or if the user knows that controls are available to start and stop the presentation in the "context menu" displayed by right-clicking on the Player screen. Normally, however, the standard controls are hidden because you wish to program them yourself.

Although this is not a tutorial on Web page programming, it is a fairly simple task to supply your own control buttons for the Media Player. This is done for the player shown below.

<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="70" height="70">
  <param name="URL" value="Never Be Hungry.wav"/>
  <param name="autoStart" value="false"/>
  <param name="uiMode" value="none"/>
</object>

<input type="button" value="Start" style="font-size:8pt"
  onclick="Player.controls.play()"/>
<input type="button" value="Start" style="font-size:8pt"
  onclick="Player.controls.stop()"/>

First, you need to give the Player an id value so it can be referenced by a script. Here id="Player" is assigned in the <object> tag. The uiMode parameter is set to value="none" to suppress display of controls, autoStart is turned off, and width and height style properties size the visualization screen.

With elimination of controls, you need to create "Start" and "Stop" buttons to control the Player. These buttons are created with <input type="button"/> controls. (Creating buttons is covered in a later tutorial.)

In order to make the buttons respond to mouse clicks, onclick event handlers are added to the buttons. These event handlers are coded with JavaScript statements to control the Player. For the "Start" button the statement Player.controls.play() calls the Player’s play() method to begin playback; for the "Stop" button the statement Player.controls.stop() calls the Player’s stop() method to stop playback. That’s all there is to it.

It is not even necessary, in fact, to display the Player at all. For audio playback you can hide the player completely and turn sound on and off with just scripted buttons. Code a width and height of 0px for the <object> tag and supply the control buttons.

<object id="Player2" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="0" height="0">
  <param name="URL" value="Never Be Hungry.wav"/>
  <param name="autoStart" value="false"/>
</object>

<input type="button" value="Start" 
  onclick="Player2.controls.play()"/>
<input type="button" value="Stop" 
  onclick="Player2.controls.stop()"/>

Since the Media Player is invisible it does not matter where the <object> tag is coded on the page.

If you look very closely you can see a tiny dot at the bottom-left corner of the "Start" button. This is the Media Player reduced to a single dot by setting its width and height to 0 pixels. If you wish to completely eliminate the dot, include a style sheet for the Player with width:0px and height:0px.

Playing Multiple Sounds

With a slight modification of scripting you can play multiple sounds through the same Media Player. In the following example, four different animal sounds are played by clicking on four separate <img/> tags. The <object> tag hides the Media Player and no <param> tags are coded. Thus, no audio file is selected for playback; only an invisible player is embedded on the page.

<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    width="0" height="0">
</object>

<img src="Bullfrog.gif" alt="Picture of bullfrog"
  onclick="Player.URL='Bullfrog.wav'; Player.controls.play()"/>
<img src="Goat.gif" alt="Picture of goat"
  onclick="Player.URL='Goat.wav'; Player.controls.play()"/>
<img src="Lion.gif" alt="Picture of lion"
  onclick="Player.URL='Lion.wav'; Player.controls.play()"/>
<img src="Rooster.gif" alt="Picture of rooster"
  onclick="Player.URL='Rooster.wav'; Player.controls.play()"/>

A pair of JavaScript statements is needed in the event handlers. The first statement assigns a sound file to the URL property of the Player: Player.URL='filename.wav'; the second statement starts its playback: Player.controls.play(). It is not necessary to code a stop() script since the sounds are very short. Notice that the entire event handler script is enclosed in double quotes, that the sound file name is enclosed in single quotes, and that the two statements are separated by a semicolon.

Even if you are not familiar with the JavaScript language you should be able to modify and include this scripting in any tag you wish to use to load and play sound files through a hidden Media Player.

Background Sounds

For certain pages you may not wish to supply either a Player display or tags to control it. This would be the case in playing a background sound of music or narration that begins automatically when the page is loaded, and stops when a different page is accessed. To play a background sound all that is required is a hidden player that auto-starts the audio file.

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="0" height="0">
  <param name="URL" value="BkgndSound.wav"/>
  <param name="autoStart" value="true"/>
</object>

Again, since the Player is not visible it does not matter where this <object> tag is coded on the page. As soon as the page finishes loading, download and playback begins. When navigation moves to a different page, the audio stops.