XML, MP3, and ID3 Tag Reader

This effect uses the same choir sound clips we used previously in this chapter, but with a slightly different approach. We'll import a playlist from an XML file and load the MP3 files dynamically into Flash. We'll also present song information (including Album, Artist, and Song Title) that's stored within the MP3 in what are called ID3 tags, as shown in Figure 5.5.

Figure 5.5. Create a random MP3 player using XML and ID3 data.

ID3 tag information is referenced differently in Flash MX than in Flash MX 2004, owing to the differences between versions of Flash Player. Macromedia Flash Player 7 supports the latest ID3 v2.2 and v2.4 tags. As the data is stored at the beginning of the MP3 file, this information is referenced immediately upon opening the MP3 stream. On the other hand, Macromedia Flash Player 6 supports only ID3 v1.0 and v1.1 tags, which are stored at the end of the file. On that platform, we must wait until the stream is fully loaded before we can retrieve the ID3 tag information.

We'll initially create an MP3 player for version 6 of the Flash Player, supporting ID3 v1.x tags. Then, we'll modify the effect to take advantage of ID3 v2.x tag support within version 7 of the Flash Player.

To edit this effect, locate mp3?mx.fla in the code archive.

It uses several MP3 files: choir1.mp3, choir2.mp3, choir3.mp3, choir4.mp3, and choir5.mp3. We'll also be needing the XML file that acts as the playlist; it's called playlist.xml and can also be found in the code archive.

Setting the Scene

For this project, we need a clickable movie clip that loads a random MP3 file and a dynamic text field that displays the ID3 data from the MP3 file.

  1. Create a new Flash document that's 500 pixels wide and 450 pixels high. Accept the default frame rate and click OK.
  2. Rename the default layer Actions and add beneath it two new layers named Interface and Background.
  3. Select the first frame of the Interface layer and create a movie clip called PlayRandomButton containing a button that's approximately 70 pixels high and 70 pixels wide. Name the instance randomplayer and move the clip to the left of the stage centre, as shown in Figure 5.5.
  4. We'll use this clip to randomly load an MP3 file and pass the ID3 tag information from the MP3 file into a dynamic text field.

  5. Create a new, 320x160 pixel dynamic text field to the right of the button. Name the field trackID3Info.
  6. In the Property Inspector for the new field, click the Character? button and choose Basic Latin (or All Characters in Flash MX).
  7. This dynamic text field will act as a container that receives the ID3 tag information from the dynamically loaded MP3 files.

    Now, for a little window-dressing:

  8. Add to the first frame of the Background layer a rectangle that frames the text area you just created.
  9. You can add as many extras as you wish to increase the aesthetics of the interface. Refer to Figure 5.5 for inspiration!

  10. Save your work.
  11. Locate the files choir1.mp3, choir2.mp3, choir3.mp3, choir4.mp3 and choir5.mp3 from the code archive and move them into the same folder in which you saved the document.
  12. Creating the XML Playlist

    We now need to create the XML playlist that references the MP3 files we're planning to load.

    For more information on working with XML, see Introduction to XML, by Harry Fuecks.

  13. Type the following code into a text editor and save it as playlist.xml in the same folder.
  14. Example 5.11. playlist.xml Actions : 1

    <?xml version="1.0" encoding="iso-8859-1"?>
     <mp3file track="choir1.mp3"/>
     <mp3file track="choir2.mp3"/>
     <mp3file track="choir3.mp3"/>
     <mp3file track="choir4.mp3"/>
     <mp3file track="choir5.mp3"/>

    Unlike HTML, which uses a predefined set of tags, XML allows you to create custom data structures. As long as all opening tags have a matching closing tag (or, as in the case of the mp3File tag in this example, they close themselves), Flash will import the data structure as an ActionScript XML object, allowing you to manipulate and access the information contained within the file.

    This XML file is structurally simple. The playlist tag is the top-level node, and the mp3file tags are its child nodes. These child nodes also contain an attribute called track, which holds the name of the MP3 file we wish to pull into Flash.

    Our ActionScript will import this XML file and move through the data structure, populating an array with the names of the MP3 files it contains.