Multimedia Presentations with Streaming Audio

Now that your streams are running smoothly, we'd like to introduce you to presentation technologies. These toolbox goodies can expand the attraction and effectiveness of your streaming audio.

A Web page is a presentation technology in its most common form, combining different types of media in different formats all in one simple package. But Web browser technology is a broad-based, "everyman" set of tools, designed to successfully perform many tasks, actions, and processes; attempting, you might say, to please all people all the time. If you want to perform specific actions in a more effective and efficient manner, you'll need specific tools. This is where presentation technologies come in handy.

These technologies can be broken down into three areas: multimedia presentation publishing tools, presentation standards, and plug-in controls. This chapter gives an example of each as well as information on how to make an educated decision on which one (or more) to use. These tools overlap somewhat in their usefulness, and you might find new ways to put them to work.

Multimedia Presentation Publishing Tools

Multimedia presentation publishing tools are standalone applications that allow authors to create mixed media presentations for the Internet. Two of the more popular are Flash and Shockwave; both are designed and sold by software company Macromedia. Shockwave is the stripped-down version of Macromedia's Director software designed to bring some of the CD-ROM capabilities to Web pages. Flash is more geared toward animation and vector graphics (drawings and text) and is incorporated into the RealMedia and QuickTime players. Any modern computer is shipped with a browser that can view Flash presentations. Flash and Shockwave can both stream MP3 files natively. Presentations authored in either tool can also link to other media types. The RealMedia player combines Flash presentations with other media types by using SMIL (see the next section).

NOTE

Authoring Shockwave and Flash presentations is beyond the scope of this book. See the Appendix, " Tools and Resources," for online tutorial resources at Macromedia. Also see New Riders' titles Inside Flash, Jody Keating and Fig Leaf Software (Oct. 2001), and Director 8.5 Shockwave Studio Interface Design, Epic Software (March 2002).

Use multimedia presentation publishing tools to produce complex presentations that include streaming audio. For example, some music videos are produced in Flash, making it easy to use character animations and layer song lyrics on top of the video image.

Synchronized Multimedia Integration Language (SMIL): A W3C Presentation Standard

Synchronized Multimedia Integration Language (SMIL) is an official World Wide Web Consortium (W3C) authoring technology standard for interactive audio/visual presentations. It's been accurately called an "emerging standard" and, as such, it still has many implementation and compatibility issues to be worked out. The information in a SMIL file describes how to combine different media types into one linear presentation. SMIL is agnostic to streaming formats; it doesn't care how your media is encoded. SMIL can be used in many ways to alter the presentation of your streaming audio. It can be used to match up multiple clips with other streaming media sources, such as video. It can also be used to set the start and stop points from an on-demand file and integrate regular Web content (text captioning) from different servers alongside your audio. SMIL can also dynamically serve correct language or bit rate file information based on a listener's player settings.

RealMedia and QuickTime players (and some Windows technologies) support SMIL, but the different formats implement it in different (and typically incompatible) ways. Just because you author one SMIL file doesn't mean your media will play back in all players. RealNetworks was the earliest adopter of SMIL and has included the most complete SMIL support in its streaming media technology. As a result, the typical streaming media author is likely to be using the RealMedia platform when working with this particular presentation technology. The implementation of the SMIL standard by streaming companies will doubtless continue to evolve, but it needs to begin providing a consistent authoring experience across formats to survive and grow in the long term. Similar to metafiles, SMIL files are regular text files named with the file suffix .smi or .smil (for example, sample.smil) and are usually served from a Web server.

NOTE

Although SMIL has its own MIME type application/smil, RealMedia-authored SMIL files should be delivered with the audio/x-pn-realaudio MIME type. This ensures that the Web browser passes the file to the RealPlayer. Make sure you do this to reliably have your SMIL files handled by the RealPlayer.

The actual text contents of SMIL files are similar to HTML (XML, more specifically) and include a variety of markup tags that define your presentation. SMIL files are a little less forgiving about failure to follow their strict standard, so make sure you include the relevant / or " characters.

By way of an example, pretend you're using a RealMedia SMIL implementation to link a streaming audio clip to an image of the album cover with text captions of the song lyrics (the bouncing ball effect is up to you).

This SMIL file displays a static image and scrolls lyrics while the audio streams. The lyrics and time codes of when each line begins are contained in the file mulaw.rt. This code actually works and references media on the FezGuys' Web site. Feel free to test it by using a text editor to plug the following code into a file named mulaw.smil and then opening it in your RealPlayer.

 <smil>    <head>      <!--presentation with 1 audio clips, 1 image and 1 lyrics text clip-->      <meta name="title" content="FezGuys Song With Lyrics"/>      <layout>        <root-layout width="550" height="145"/>        <region  top="0" left="0" width="550" height="105"/>        <region  top="105" left="0" width="550" height="40"          background-color="#996633" />      </layout>    </head>    <body>      <par>            <!--play these 2 clips simultaneously-->          <img src="/books/2/718/1/html/2/http://www.fezguys.com/images/header-generic.jpg"              fill="freeze"              region="imageregion"/>          <textstream src="/books/2/718/1/html/2/http://www.fezguys.com/media/mulaw.rt"              region="textregion"/>          <audio              src="/books/2/718/1/html/2/rtsp://rtsp.fezguys.com/www.fezguys.com/media/mulaw-audio.rm"              region="audioregion"/>      </par>    </body>  </smil> 

The mulaw.rt file uses RealNetworks' RealText technology to define what text to display and at what times. Although the previous example points to a copy of this file on the FezGuys' Web site, you could create your own based on this example.

 <window type="teleprompter" width="550" height="40" duration="1:38"      bgcolor="#996633" wordwrap="true">  <font face="system" color="black">  <time begin="4"/>blah blah blah blah  <time begin="8"/> blah mmmwah  <time begin="8.5"/> mmmwah  <time begin="9.5"/> bwah!<br/>  <time begin="13"/>mulaw...  <time begin="16"/>is a companded compression algorithm for  <time begin="19"/> voice  <time begin="20"/> signals<br/>  <time begin="22"/>defined by the geneva recommendations g.7  <time begin="24"/>1  <time begin="25"/>1<br/>  <time begin="28"/>the g.711 recommendation  <time begin="33"/> defines mulaw<br/>  <time begin="35"/>as a method of encoding 16-bit PCM signals into a non-linear 8  -bit format<br/>  <time begin="45"/>the algorithm...  <time begin="49"/> the algorithm is commonly used in european and asian  <time begin="1:00"/>telecommunications...<br/>  <time begin="1:04"/>mulaw  <time begin="1:05"/> is  <time begin="1:06.2"/> very  <time begin="1:06.5"/> very  <time begin="1:06.8"/> very  <time begin="1:07.2"/> very  <time begin="1:08"/> similar to alaw ...  <time begin="1:11.5"/> however...<br/>  <time begin="1:12"/> each uses a slightly different encoder to encode<br/>  <time begin="1:21"/> hi-ya!  <time begin="1:22"/> bababababababa  <time begin="1:25"/> bababababababa  <time begin="1:27"/> bababababababa  <time begin="1:31"/> yaaaa!  <time begin="1:35"/> lalalaya!  </window> 

The following table outlines some of the other commonly used SMIL clip tags supported by RealNetworks.

Other Clip Tags Supported by RealNetworks' SMIL

Tag	Used For
animation	Animation clips such as a Flash player file (.swf)
audio	Audio clips such as RealAudio (.rm)
img	JPEG (.jpg), GIF (.gif), or PNG (.png)
ref	Any clip type that is not covered by another attribute, such as a RealPix file (.rp)
text	Static text clips (.txt)
textstream	Streaming RealText clips (.rt)
video	Video or other clips that display continuous motion, such as RealVideo (.rm)

SMIL is useful if you want to synchronize multiple media types to a timeline. A simple text editor is all that's necessary to create SMIL files, although other, more organized tools are available. For more resources about SMIL and these other tools, see the Appendix, "Tools and Resources."

Web Browser Plug-In Controls

Web browser plug-in controls are software tools that control how streaming media is displayed within a Web page. Audio streams are typically accessed through basic links on your Web page to your metafiles. However, as explained in Chapter 12, "Advanced Authoring Techniques," you might instead want to embed your streaming audio using a plug-in control. Each format has its own specific plug-in control, and these controls can be specialized in conjunction with Web browser scripting languages such as JavaScript and VBScript. You can specify which playback controls or status windows are included in a Web page by choosing the appropriate control parameter.

JavaScript or VBScript also enable you to take advantage of the actions of visitors to your Web page. For example, you can create your own image to act as a Play or Stop button or adjust volume when visitors mouse over certain portions of text. In another Web browser plug-in scenario, you can create a personalized jukebox-style interface for your Web visitors to use to listen to your music. Create one frameset that lists all the songs. When visitors click on a song, have it open up in another frameset that includes your own custom Play and Stop buttons.

Web browser plug-in controls are accessed using standard HTML and, as a result, don't require the purchase of a third-party publishing tool. This makes for a quicker authoring process than using a multimedia presentation publishing tool. You can also look at the HTML source code of Web pages that embed audio in a way that appeals to you and simply copy them (respecting copyright notes, if present, and dropping the author an e-mail to make sure she doesn't mind).

Recent Web browser-based technologies such as Cascading Style Sheets (CSS) and Dynamic HTML (DHTML) allow for more advanced control over presentation through a Web page, but these other technologies (Flash, SMIL, and so forth) are more commonly used. DHTML and CSS implementation remains inconsistent among different Web browsers, and people with older browsers can still play Flash, Shockwave and SMIL through plug-ins or external players. Flash and SMIL technologies are specifically designed for this use, so you might as well consider using them.

Microsoft's ActiveX technology is used to control Microsoft's Internet Explorer (MSIE) browser. A third-party plug-in is available for the Netscape browser. Although ActiveX is capable of many other tasks, it's most common streaming audio use is as the MSIE equivalent to the Netscape plug-in architecture. Not surprisingly, ActiveX's use within streaming audio is a lot easier and more reliable when running the MSIE browser from the Windows operating system.

In Chapter 12, you saw how to use ActiveX to embed files from multiple formats into a Web page using each format's specific ActiveX control. These ActiveX controls allow a Web page author the ability to control playback parameters using custom checkboxes or buttons. A general-purpose ActiveX control "ActiveMovie" is available that allows you to integrate popular audio (MPEG, QuickTime, and so on) and video formats into a Web page. Programmers using VBScript can write their own code to interact with ActiveX controls. See the Appendix for more information and tutorials about ActiveX.

Use Web browser plug-in controls (via Microsoft's ActiveX or Netscape's plug-in architecture) if you want to provide more than just a link to a file. For example, you can design your own custom play buttons, customize what player controls are included, or modify the stream's playback based on mouseovers.