With the recent release of the tasteful Windows Media Player 7 tantalizing streaming media enthusiasts everywhere, and the stylish QuickTime 5 player just about ready to hit the streets, RealPlayer is looking a little bland these days. (In fact, have they ever changed the interface since the first version?)
This contrast in appearance became even more dramatic when I saw QuickTime 5's ability to associate custom skins with media files. I began to daydream about all the beautiful presentations we'll be seeing in the coming months, and I wondered if RealNetworks will be incorporating skins (or at least updating the look of the player) in future releases.
Nothing too complex here; the function basically tests for Netscape compatibility and sets the source of the player to the value passed into
document.video. This script allowed me to associate any number of media files with a location in the document window. To trigger the media file, I put a simple
OnClick command in the graphic's anchor tag to call out the media file, like this:
<a onClick="PlayClip('chordname.smi')"><img src="imagename.jpg"></a>
|Figure 1. The finished graphic with cutting grid in place.|
The demonstration may look like one complete graphic, but in fact it is eight graphics laid out in an HTML table -- the most challenging part of this exercise. To do this, I first created the final graphic, then spliced it up into eight individual pieces (see Figure 1). To make the pieces fit together as one entity with the HTML table, I set the cellpadding and cellspacing to "0", and broke the table down into three rows. The first and third table rows held the top and bottom third of the circle, while the second held the left and right side of the graphic, and the embed tags for the RealPlayer window, like this:
<td> <object id="video1" classid="clsid:CFCDAA03-8be4-11cf-b84b-0020afbbccfa" align="center" border="0" width="189" height="148"> <param name="console" value="Clip1"> <param name="controls" value="imagewindow"> <param name="autostart" value="false"> </object> </td>
If you are unfamiliar with SMIL, think of it as a way to piece together your media files in the order you would like them to appear, and then combine them into a single stream. So if you have a video and an audio file, you can combine the two so they will play together using SMIL. If you'd like to learn more about using SMIL, you might want to check out my SMIL tutorial.
There are a few different types of files that SMIL can use to combine multimedia elements into one presentation. One of these is called RealPix -- a component that allows you to orchestrate any number of digital images and add various effects to them. You then call on the RealPix file in your SMIL file, and the presentation is pieced together as a single stream. The demonstration for this article uses three components that are displayed within the RealPlayer window embedded onto the HTML page: a RealAudio clip, a RealPix file, and the SMIL file that pieces the two together. I used SMIL to associate a given graphic with its corresponding RealAudio and RealPix file that I created for each chord. All the user has to do is click on a given image to find out what that chord looks and sounds like.
Steve McCannell is a writer/producer for the O'Reilly Network and the founder of Lost Dog Found Music.
Copyright © 2009 O'Reilly Media, Inc.