Adding Audio and Video

If you're a composer, musician, or in a band, you might want to provide music clips that can be played over the Web. You may have a client who wants you to create a multimedia Web site, including audio. Or you may just want to add something different to your site, that isn't on every other site. You may want to display your own home videos over the Web.

Adding Audio

Nothing says that you have to add audio to your Web site. It can add significantly to the amount of time your site takes to download and display, for instance, and seldom adds any informational value to your site. I personally do not include any background sound clips in my site and don't particularly care for them while I'm surfing. More often than not, background sound just makes me dive for the Back button. Silence is golden, in other words.

If you do decide to include background sound on your site, here are some recommendations:

Stick to using short sound clips that don't consume very much bandwidth.
Do not indefinitely loop a background sound clip unless you're also displaying the plug-in player console on your page, so a visitor can easily turn off the music.
Check the volume of your sound clip before posting it to your site. Check all your system's audio volume controls to make sure you don't have them turned way up or way down. If you're going to include a background sound clip, you don't want it to be barely audible, on the one hand, or blast a visitor out of their chair, on the other.
Remember that your personal taste in music or audio effects might not match the taste of others.
Finally, realize that many music and audio clips that are widely available over the Web contain copyrighted material. If you put up a copyrighted music clip on your personal site, at worst the owner might ask (or demand) that you take it down. If you put it up on your business site, you could get sued.

Tip

Don't know where to find sound clips so you can experiment playing background sound clips in your pages? You might have some sound clips right on your computer that you can check out. Just use the Find command (click the Start button and select Find) to do a search for either WAV (*.wav) or MIDI (*.mid) files on your own hard drive. There are also many repositories of WAV, MIDI, MP3, and other sound and music files available on the Web.

Playing Audio Automatically in the Background

The EMBED element is the most commonly used means for embedding audio in a Web page. The EMBED element is a non-standard element that is not part of HTML 4, but is supported by both current and older browsers. Here's an example of using the EMBED element to include an audio clip in a Web page that will play automatically in the background when the page is loaded:

<div><embed src="mysound.wav" width="2" height="2" autostart=
"true" loop="false"></div>

The autostart="true" attribute causes the audio clip to play automatically. Note that a width and height of two pixels is set. That is because the QuickTime player will not play an audio file if the width and height are set to one or no pixels. The drawback of doing this is that the 2-Ч-2-pixel dimensions can cause formatting problems or show up against the page's background. One solution is to insert the EMBED element at the bottom, rather than the top, of the page. In the example, since the EMBED element is an inline element, it is nested in a DIV element, which will not add additional vertical spacing (unlike nesting it in a P element, for instance).

Note also that the LOOP attribute is set to false, causing the audio clip to play only once. When playing an audio clip automatically in the background, looping should never be turned on. A common error is to set an integer value for the LOOP attribute (loop="2", for instance); whereas some browsers may recognize this, most won't.

Displaying the Player Console

By setting the proper dimensions for the EMBED element, you can cause the player console to be displayed:

<center><embed src="mysound.wav" width="145" height="45"
autostart="true" loop="false"></center>

The width and height dimensions of 145 and 45 pixels are optimum for displaying the Windows Media Player console (see Figure D.1) and should also be sufficient for displaying other players, such as the LiveAudio player that the Netscape and Mozilla browsers use or the QuickTime player that is available for both Macintosh and Windows.

Figure D.1: The Windows Media Player console is displayed in Internet Explorer 6.

Notice that the EMBED element is nested in a CENTER element. Nesting it in a center-aligned P element will center the player in Internet Explorer, but not in the Mozilla browser. You could also nest it in a center-aligned DIV element.

MIDI (*.mid) files are generally better for playing music clips than WAV (*.wav) files, and they're usually smaller as well. Both the Window's Media Player and the QuickTime Player support playing MIDI files, so most Windows and Macintosh users should be able to listen to them. The latest versions of these players also include support for playing MP3 music files, which also have more fidelity than WAV files, while consuming many fewer bytes.

Here's a rundown of some of the other attributes that can be assigned to the EMBED element:

ALIGN: Values: top, right, left, middle, and bottom. To center, nest the EMBED element inside of a CENTER element or a center-aligned DIV element.
PLUGINSPAGE: Value: URL where appropriate plug-in player can be downloaded. Examples: pluginspage="http://www.apple.com/quicktime/download/" (for the QuickTime player) or pluginspage="http://www.liveupdate.com/dl.html" (for the Crescendo player).
VOLUME: Values: 0 to 100; the default volume is 100.

Using the NOEMBED Element

The NOEMBED element lets you include content in your page that will be seen only by visitors using browsers that don't recognize the EMBED element. A common use for this element is to include a regular hypertext link to the sound file, so the visitor can click on it and, if they have the correct player installed, play the sound clip. Here's an example of using the NOEMBED element:

<center><embed src="mysound.wav" width="145" height="45"
autostart="true" loop="false"></center>
<noembed><p>Your browser does not support the EMBED element.
Click on the link if you would like to download and listen
to the <a href="mymusic.wav">background music</a> that
accompanies my site.</p></noembed>

Using the OBJECT Element

If you want to use a standard HTML element to embed audio files in Web pages, you need to use the OBJECT element. The OBJECT element is an HTML 4 element and may not be supported by earlier browsers that are not HTML 4-compliant. Here's an example of using the OBJECT element to insert an audio file in a Web page:

<center>
<object data="mysound.wav" type="audio/wav" width="145"
height="45" vspace="5">
   <param name="src" value="mysound.wav">
   <param name="controller" value="true">
   <param name="loop" value="true">
   <param name="autostart" value="true">
Welcome to my Home Page!
</object>
</center>

To hide the player and cause the sound file to loop only once, just set the height and width to 0 and delete the "controller" and "loop" parameters. The TYPE attribute advises the player of the MIME type of the audio file. Common audio MIME types include (audio file formats in parentheses): audio/wav (WAV), audio/mid (MIDI), audio/basic (AU and SND), audio/mpeg (MPG, MPEG, MP2, and MPE), audio/mpeg3 (MP3), audio/x-aiff (AIF and AIFF), audio/x-realaudio (RA), and audio-x-ms-wma (WMA).

Adding Video

You can also use the EMBED and OBJECT elements to insert inline video in a Web page. Here's an example of using the EMBED element to insert an inline video file:

<center><embed src="myvideo.mpg" width="320" height="255"
autostart="false" loop="true"></center>

Here's an example of using the OBJECT element to do the same thing:

<center>
<object data="myvideo.mpg" type="video/mpeg" width="320"
height="255" vspace="5">
   <param name="src" value="myvideo.mpg">
   <param name="controller" value="true">
   <param name="loop" value="true">
   <param name="autostart" value="true">
Download <a href="myvideo.mpg">my video</a> if it doesn't
automatically play in your browser.
</object>
</center>

The TYPE attribute advises the player of the MIME type of the video file. Common video MIME types include (video file formats in parentheses): video/mpeg (MPEG, MPG, and MPE), video/mpeg2 (MPV2 and MP2CV), video/quicktime (MOV and QT), video/avi (AVI), video/x-ms-wmv (WMV), video/x-ms-asf (ASF), video/vnd.rn-realmedia (RM, RAM), and video/vnd.rn-realvideo (RV).

Finding Multimedia Players

Before downloading a player, test some of the previous EMBED element examples with different audio files on your local system. Just make sure that your HTML file and any audio files you want to test are in the same folder. Also be sure to add the appropriate file extension (.wav for WAV files and .mid for MIDI files, for example) and eliminate any spaces from the file names. Chances are that you already have the capability of playing the most common audio formats. If you need to download and install an audio or media player, here are some options:

Windows Media Player at www.microsoft.com/windows/windowsmedia/ (Windows).
Apple QuickTime Player at www.apple.com/quicktime/products/qt/ (Macintosh and Windows).
Real One Player at www.real.com/ (Windows, Macintosh, and Linux). Link to the free Windows player is in the upper-right corner; links to Macintosh and Linux players are in the lower-right corner.
WavPlay at www.hitsquad.com/smm/programs/WavPlay/ (Linux).
Crescendo at www.liveupdate.com/ (Windows). A free MIDI player.

Don't depend, however, on any one plug-in player being displayed. What'll show up on someone else's screen will be whatever plug-in they've designated to play the type of sound or video clip you've embedded.