Using XML to Create an Online Radio

I realize that this discussion of the internals of XML documents has been mind-numbingly technical and that you haven't really done anything practical to justify the effort. Unfortunately, this is a necessary part of your XML education. However, I want to close this tutorial with a practical and fun example that demonstrates the use of comments and entities in the context of an online radio. By online radio, I mean a music player you can embed in a web page that is entirely driven by XML data. The radio itself is a Flash animation called Catalist Radio that was developed by Grant Hinkson of the design studio Catalist Creative (http://www.catalistcreative.com/). Grant was kind enough to allow me to use Catalist Radio as a demonstration of how to feed XML data into a practical online application.

If the idea of manipulating music data via XML appeals to you, you'll be glad to know that Access Your iTunes Music Library via XML, shows you how to access and manipulate an iTunes music library with XML.

Catalist radio consists of a Flash animation that is stored in a file with a .swf extension, along with an HTML web page that contains the embedded Flash Player. The web page is set up to use the file radio.xml as the XML data source for the radio. This is the file that is of primary interest to you.

The idea behind Catalist Radio is that you can specify multiple radio channels along with multiple songs in each channel. You can think of each channel as a playlist very much like playlists that you might already use in media players such as Windows Media Player or iTunes. When you launch the XML Radio application by opening the radio.html page in a browser, the first channel opens and begins playing the first song in the list. You can navigate forward and back through songs in a given channel, as well as change channels. The songs themselves must be stored as MP3 files in the same folder as the other files: radio.html, radio.xml, and GH_radiov2.swf.

The radio.xml file is where the interesting stuff takes place in the Catalist Radio application. Rather than try to lay the groundwork of how this file is structured up front, I'd rather just let you dive right into it. Listing 4.1 shows the complete XML code for the Catalist Radio example, which includes several different channels of music.

Listing 4.1. The XML Data File for the Catalist Radio Example
 1: <?xml version="1.0" encoding="UTF-8"?>
 3: <radio>
 4:   <station name="Rock">
 5:     <song>
 6:       <title>Ol&apos; 55</title>
 7:       <composer>Tom Waits</composer>
 8:       <file>tomwaits_ol55.mp3</file>
 9:     </song>
10:     <song>
11:       <title>King Contrary Man</title>
12:       <composer>The Cult</composer>
13:       <file>thecult_kingcontraryman.mp3</file>
14:     </song>
15:     <song>
16:       <title>Drunken Chorus</title>
17:       <composer>The Trashcan Sinatras</composer>
18:       <file>trashcansinatras_drunkenchorus.mp3</file>
19:     </song>
20:   </station>
21:   <station name="Rap">
22:     <song>
23:       <title>Follow the Leader</title>
24:       <composer>Eric B. &amp; Rakim</composer>
25:       <file>ericbrakim_followtheleader.mp3</file>
26:     </song>
27:     <song>
28:       <title>My Philosophy</title>
29:       <composer>Boogie Down Productions</composer>
30:       <file>bdp_myphilosophy.mp3</file>
31:     </song>
32:     <song>
33:       <title>I Pioneered This</title>
34:       <composer>M.C. Shan</composer>
35:       <file>mcshan_ipioneeredthis.mp3</file>
36:     </song>
37:   </station>
39:   <station name="Country">
40:     <song>
41:       <title>Mama Tried</title>
42:       <composer>Merle Haggard</composer>
43:       <file>merlehaggard_mamatried.mp3</file>
44:     </song>
45:     <song>
46:       <title>A Boy Named Sue</title>
47:       <composer>Johnny Cash</composer>
48:       <file>johnnycash_aboynamedsue.mp3</file>
49:     </song>
50:     <song>
51:       <title>Big Iron</title>
52:       <composer>Marty Robbins</composer>
53:       <file>martyrobbins_bigiron.mp3</file>
54:     </song>
55:   </station>
56: -->
57: </radio>

This code isn't quite as tricky as you might initially think given its size. What you're seeing is three different channels that are specified via the <station> tag (lines 4, 21, and 39). Notice that the name of each station is identified using the name attribute. Within each station, songs are coded using the <song> tag. And finally, within each song element you provide the song specifics via the title, composer, and file elements.

Of particular interest in this code is how comments are used. Notice that a comment appears about two-thirds of the way down the document (line 38), and doesn't close until near the end of the document (line 56). The effect is that the country music station is completely ignored by the Catalist Radio application, and therefore is disabled. This is a perfect example of how you can use comments in XML code to temporarily remove a section of code.

Entities are also used in the radio.xml document to handle characters in the names of song titles and song composers. For example, the apostrophe in the Tom Waits song "Ol' 55" is specified using the &apos; entity (line 6). Similarly, the ampersand in the rap artist name "Eric B. & Rakim" is specified using the &amp; entity (line 24).

You're no doubt itching to see what this code actually does in the context of the Catalist Radio application. Figure 4.1 shows the Tom Waits song "Ol' 55" playing using the Catalist Radio application.

Figure 4.1. Catalist Radio provides a way to organize and play MP3 music online via an XML data feed.

Keep in mind that all you have to do create your own Catalist Radio online music player is to change the radio.xml file to reference your songs and then publish the application files and MP3 songs to the Web.