Playing Audio

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>

Listing 9-2. 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/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
• QuickTime Player - codebase="http://www.apple.com/qtactivex/qtplugin.cab
• Flash Shockwave Player - codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#Version=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.

Figure 9-6. An embedded Media Player to play an audio file.

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

Listing 9-3. 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

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>

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

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>

Listing 9-4. 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.