Embedding Streaming Audio in Your Web Page

You can "embed" your streaming audio so that it automatically plays from within your Web page rather than from a separately launched player. One advantage to embedding is a shorter amount of time between the moment a listener clicks on your streaming audio's link or icon and when the audio begins to play. Another advantage is design flexibility. Images and text that you design to fit with your site's visual aesthetic can surround files embedded in your Web page. You can also configure your stream to play as soon as the page loads (although a buffering delay will still be present). The embedding process is accomplished using either of these two architectures: a Netscape plug-in or Microsoft's ActiveX.

Embedding your streaming audio is not all wine, roses, and Belgian chocolate. Embedding audio in a Web page increases the time it takes for that page to load. This is because accessing your Web page now also includes loading a player application. Using browser plug-in architecture also makes that browser less stable than accessing that streaming audio from an external player. This instability typically has the browser's plug-in architecture to blame. Although a poorly programmed plug-in can crash in a perfect architecture, an unstable architecture makes it impossible to provide a perfect embedded experience. Both Microsoft's ActiveX and Netscape's plug-in architectures are widely known to be prone to problems.

More memory is also required to run a player from within a Web browser; consequently, browsers crash or the streams often don't play properly. Stability across different Web browsers (Netscape, Internet Explorer, Opera, OmniWeb, and so on) can also be difficult to maintain. In spite of all of those potential streaming horrors, embedding is useful and remains a popular tool.

Until recently, embedded files would operate in both Microsoft's Internet Explorer and Netscape's browsers using only the Netscape plug-in standard. Unfortunately, the new version of Internet Explorer for Windows requires (surprise!) using Microsoft's ActiveX method only. Because Netscape doesn't support ActiveX, the embedding process has become somewhat longer and more involved and requires more information.

NOTE

A plug-in to enable Netscape to handle ActiveX is available. Unfortunately, it's not recommended you use it because it combines two technologies of questionable stability.

RealMedia, Windows Media, and QuickTime all have their own plug-ins to embed their format into a Web page. For these formats, the necessary components are installed with the player software. MP3 can play through the plug-ins of any of the other three formats. MP3 also can be embedded using other systems such as Macromedia's Shockwave.

The examples that follow include both the Netscape plug-in <EMBED> tag as well as the ActiveX <OBJECT> tag. This ensures that your Web page will work with any browser that supports either architecture.

The bottom line on embedding streaming audio on your Web page is this: If you don't need it, don't use it! That's the best way to help guarantee that your streaming audio plays smoothly. If you do choose to embed, then consider also offering a separate link to play your streams in an external player. Those who experience problems using the embed process (or merely prefer to use an external player) will appreciate having the option.

Example: Embedding RealMedia in Your Web Page

When embedding your RealMedia encoded streaming audio, you point to a metafile (as usual), but instead of using the .ram file suffix, you use .rpm.The contents of the .rpm file are the same as the .ram file. All you're doing here is using the correct MIME type. For the correct MIME type for your Web server, see Chapter 7, "Serving Your Audio."

You have several choices regarding the information you can include in your Web page when embedding your audio stream. To start, you need to choose a size (height and width) and the controls (play buttons, status bar, and so on) to include. Advanced users can experiment until they find something that works for their needs. For now, try this simple example:

 <OBJECT ID=RAOCX      CLASS      HEIGHT="100" WIDTH="375">      <PARAM NAME="CONTROLS" VALUE="all">      <PARAM NAME="AUTOSTART" Value="false">      <PARAM NAME="SRC" VALUE="http://www.fezguys.com/samples/sample.rpm">  <EMBED      HEIGHT="100" WIDTH="375"      CONTROLS="all"      src="/books/2/718/1/html/2/http://www.fezguys.com/samples/sample.rpm"      TYPE="audio/x-pn-realaudio-plugin"      AUTOSTART="false">  </EMBED>  </OBJECT> 

The preceding example links to sample.rpm, which is a metafile that contains the URL of the stream:

rtsp://streaming.fezguys.com/samples/sample.rm

For more detailed information on embedding RealMedia files, see RealNetworks' guide to extended plug-in parameters at the following URL:

http://service.real.com/help/library/guides/extend/embed.htm

Example: Embedding Windows Media in Your Web Page

When embedding Windows Media files, you point to a metafile (sample.asx) as usual.

The example that follows uses version 6.4 of the ActiveX control. This makes your Web page backward compatible to earlier versions of the Windows Media Player. ActiveX version 6.4 support is included as part of Windows Media Player 7.0. Note: As mentioned earlier, this example includes a plug-in for Netscape.

 <OBJECT  WIDTH=300 HEIGHT=50    CLASS    STANDBY="Loading Windows Media Player components..."    TYPE="application/x-oleobject"   CODEBASE="http://activex.microsoft.com/activex/ controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">    <PARAM name="filename" value="http://www.fezguys.com/samples/sample.asx">    <PARAM name="autoStart" value="false">    <EMBED TYPE="application/x-mplayer2"      NAME="MediaPlayer"      src="/books/2/718/1/html/2/http://www.fezguys.com/samples/sample.asx"      AUTOSTART="false"      WIDTH=300 HEIGHT=50>    </EMBED>  </OBJECT> 

The preceding example links to a sample.asx metafile containing the URL to the real stream:

mms://streaming.fezguys.com/samples/sample.wma

Example: Embedding QuickTime in Your Web Page

You'll be using the same approach as in Chapter 7, except that you'll be changing the tag that caused the stream to open in an external QuickTime player to instead open within the browser's embedded plug-in. Do this by changing a parameter in both the <OBJECT> and <EMBED> tags, replacing the following:

 TARGET="quicktimeplayer" 

with this:

 TARGET="myself" 

The code from Chapter 7 would be changed to look like this:

 <OBJECT CLASS      WIDTH="160" HEIGHT="120"      CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">  <PARAM NAME="SRC" VALUE="poster.mov">  <PARAM NAME="CONTROLLER" VALUE="false">  <PARAM NAME="HREF" VALUE="rtsp://streaming.fezguys.com/samples/sample.mov">  <PARAM NAME="TARGET" VALUE="myself">  <EMBED TYPE="video/quicktime"      src="/books/2/718/1/html/2/poster.mov"      HREF="rtsp://streaming.fezguys.com/samples/sample.mov"      WIDTH="160" height="120"      CONTROLLER="false"      TARGET="myself">  </EMBED>  </OBJECT> 

The preceding example links to the poster movie poster.mov and includes in the HTML code the URL that actually contains the audio:

rtsp://streaming.fezguys.com/samples/sample.mov

For more detailed information on embedding QuickTime files, see Apple's guide at www.apple.com/quicktime/authoring/embed.html.

Example: Embedding MP3 in Your Web Page

As mentioned previously, you can use the plug-ins of other formats to play MP3 streams as follows:

RealMedia: Within the text of your .rpm metafile, simply change the URL (for your RealMedia stream) to the URL of your MP3 stream in the Step-by-Step, "Embedding RealMedia in Your Web Page."

Windows Media: Change the text in your .asx metafile to the URL of your MP3 stream (similar to the RealMedia Step-by-Step).

QuickTime: Change the HREF parameter to your MP3 stream's URL. The QuickTime player plug-in doesn't support playing live MP3 streams.

Shockwave: You can also use the free Shockwave plug-in that comes with the Shockwave player (information available at www.shockwave.com).