10.2: Playing Audio

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)

Figure \(\PageIndex{1}\): Links to play an audio file.

The above links are coded as shown below. The href attribute of 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>

Figure \(\PageIndex{2}\): Code to link to audio file.

The <audio> Element

HTML5 introduced a new <audio> tag for standardizing the way audio files can be played in a browser. Codecs for audio can still differ between different system types so for fallback functionality you may need to supply multiple sources to an audio element. The browser will try to load the sources in order and if it cannot use a <source it will display the error message.

<audio controls>
  <source src="PeopleWillCome.wav" />  
  <source src="PeopleWillCome.mp3" />
  Your browser does not support the audio tag.
</audio>

Figure \(\PageIndex{3}\): Code to size and pad a paragraph.

 

Embedding Audio Files - Deprecated

 

Embedding the audio 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.

    <object data="url" classid="classID">
      <param name="url" value="url"/>
      <param name="autostart" value="true|false"/>
    </object>

Figure \(\PageIndex{4}\): General format for <object> tag.

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

The following are common attributes of the <object> tag:

data Required: attribute provides the name of the file to be played.

classid attribute is a number that identifies the type of object to embed in the page. The classid identifies an ActiveX control that must be installed on the user's PC. If the ActiveX control is not installed, the browser can automatically download and install it. Values for common object players are listed below:

• Windows Media Player - classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
• QuickTime Player - classid="CLSID:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
• RealPlayer - classid="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
• Flash Shockwave Player - classid="CLSID:D27CDB6E-AE6D-11cf-96B8-44455350000"

codebase Specifies a relative path for the location and download of the plug-in if needed. Values for common object players are listed below:

• Windows Media Player - codebase="http://activex.microsoft.com/activex...ion=6,0,02,902"
• QuickTime Player - codebase="http://www.apple.com/qtactivex/qtplugin.cab
• Flash Shockwave Player - codebase="http://download.macromedia.com/pub/s...rsion=8,0,22,0"

type Optional; Specifies a valid MIME type such as audio/wav of the audio or video file.

title Optional; Provides a brief text description displayed by browsers or assistive technology applications.

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

Embedding the Media Player for an audio presentation is shown in Figure 9-6 with its code given in Listing 9-3. 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. Please note that Figure 9-6 may only display in Internet Explorer.

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

Figure \(\PageIndex{5}\):  Code to embed the Media Player to play an audio file.

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.

 

Embedding Audio Files - Other Browsers - Deprecated

Internet Explorer requires that the classid attribute (to indicate the player's ActiveX control) in order to properly render the <object> tag. However, other browsers such as Firefox and Chrome require the <object> tag without the classid. To resolve this issue, conditional comments can be used to direct non-IE browsers to the standard <object> tag. A sample code block is shown below:

<div>
<object data="PeopleWillCome.wav" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <param name="url" value="PeopleWillCome.wav"/>
  <param name="autostart" value="False"/>

<!--[if !IE]>-->

<object data="PeopleWillCome.wav" style="width:100px;height:50px">
  <param name="url" value="PeopleWillCome.wav"/>
  <param name="autostart" value="False"/>
  
 </object>

<!--<![endif]-->

</object>

</div>

Figure \(\PageIndex{6}\): Code to embed in IE browser.

The conditional comments begin with <!--[if !IE]>--> and end with <!--<![endif]-->. These statements are only processed by Internet Explorer. In this case, the comments indicate that Internet Explorer should ignore the code contained between the opening and closing comment tags. IE will render the first <object> tag and ignore the second. Other browsers will render the first <object> tag and then the second <object> tag since browsers render in a top-down line-by-line fashion. The second <object> tag will replace the first object block and display correctly. The second <object> (Non-IE browsers) must also contain height and width values in order to render properly in Firefox. The CSS height and width properties can be applied as shown in the example above.

The following are <param /> media attribute values that can be used with the <object> tag:

• src - Required; provides the name of the file to be played
• loop - Optional; determines how many times the media file will repeat; Value may be a numeric value or true for continuous play
• hidden - Optional; Hides the media console. Values include false (default) and true
• autoplay - Optional; Determines if the media player will play automatically when the page loads. Values true or false (default)
• controller - Optional; indicates whether the media control console will display. Values true or false

Background Sounds - Deprecated

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 data="BkgnSound.wav" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    style="width:0px;height:0px">
    <param name="url" value="BkgndSound.wav"/>
    <param name="autostart" value="true"/>
  
    <object>
   
    <!--[if !IE]>-->

    <object data="BkgnSound.wav">
        <param name="url" value="BkgnSound.wav"/>
        <param name="autostart" value="true"/>
  
    </object>

<!--<![endif]-->

</object>

Figure \(\PageIndex{2}\): Code to play a background sound.

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.