Extracting ID3 Data From an MP3 File

To extract this data from the MP3 file loaded into a Sound object named music, you would use the following syntax: var songName_txt.text = music.ID3.TIT2; Other common ID3 tags include T

< Day Day Up >

Extracting ID3 Data From an MP3 File

Do you think an MP3 file holds nothing but code for playing back an audio file? Think again Most people are unaware that hidden in most MP3 files are ID3 tags These tags, known as metadata, contain information such as the following about the MP3 file:

• Name of the song

• Artist

• Genre

• Year the song was recorded

• Album from which the song came

• Lyrics

• Comments

Most modern MP3 players can read, display, and react to this included data when playing

a file Thankfully, ActionScript also provides access to this information when using MP3 files in your projects This fact allows you to create sophisticated audio applications NOTE

Not all MP3s contain ID3 tags

When an MP3 is loaded into or attached to a Sound object, that file's ID3 tag information can be read by accessing the Sound object's ID3 property For example, the ID3 tag representing a song name is TIT2 To extract this data from the MP3 file loaded into a Sound object named music, you would use the following syntax:

var songName_txt.text = music.ID3.TIT2;

Other common ID3 tags include TALB (album), TPE1 (artist), TYER (year of

recording), TRCK (track), and COMM (comment)

TIP

For more information about ID3 tags, consult the ActionScript dictionary or visit

MP3 files A search on www.google.com will return a number of possibilities

In the following exercise, you'll create an MP3 player that loads MP3 files based on data

in an XML file The MP3 files contain ID3 tag data that will be extracted and displayed

on the user interface

1 Open mp3Player1.fla in the Lesson18/Assets folder

This project contains five layers named Background, Text Fields, Buttons,

Components, and Actions Our project's static graphics are on the Background layer There are five text fields on the Text Fields layer: song_txt, artist_txt,

year_txt, URL_txt, and comments_txt These fields will eventually be used to display extracted ID3 tag data The Buttons layer contains two button instances named play_btn and stop_btn Obviously, these will be used as playback controls for the currently selected MP3 file The Components layer contains a List

component instance named playlist_lb, which will be used to display a list of available MP3 files loaded in from an external XML file (we'll discuss this in a moment) The Actions layer will contain all the script for this project

This project will work by loading a list of MP3 files from an external XML file and displaying the list in the playlist_lb instance When the user selects an MP3 file from the list and clicks the play_btn instance, that MP3 file not only plays, but its ID3 tag data is extracted and displayed in the text fields on the Text Fields layer

Before we begin scripting, let's review the external files that this project will use

2 Using your operating system's directory-exploring application, navigate to the Lesson18/Assets directory and locate the files Agent00.mp3, HardCope.mp3, LoungeJam.mp3, Prosonica.mp3, and playlist.xml

There's nothing special about the MP3 files other than the fact that each contains several ID3 tags We'll access these files in our project

The playlist.xml file contains basic information about these four files in a simple structure:

<Playlist>

<Song URL="Agent00.mp3">Agent 00</Song>

<Song URL="HardCope.mp3">Hard Cope</Song>

<Song URL="LoungeJam.mp3">Lounge Jam</Song>

<Song URL="Prosonica.mp3">Prosonica</Song>

</Playlist>

The only items identified in this file are the name and the filename (in the form of

a URL attribute) for each song This data will eventually be loaded into the

playlist_lb List component instance

By placing the information about our MP3 files in this XML file, we can add and delete songs simply by editing this file, and our MP3 player will compensate

automatically, as you'll soon see

3 Return to Flash With the Actions panel open, select Frame 1 of the Actions layer and add the following script:

4

5 var playlistXML:XML = new XML();

6

7 playlistXML.ignoreWhite = true;

8

9 var music:Sound = new Sound();

10

11 var currentSong:String;

12

Because our project will load the playlist.xml file, the first line of this script creates a new XML object named playlistXML for holding the incoming file The next line tells that XML object to ignore any spaces within the loaded XML document because keeping these spaces could prevent our script from accurately locating data within the file

The next line creates a Sound object named music into which we'll load our external MP3 files, one at a time, as they're selected and played by the user The last line creates a variable named currentSong to store the filename of the last selected song from the playlist_lb instance The reason for this variable is that selecting a song from the list won't cause it to load and play automatically This occurs only after the Play button is clicked This variable is necessary to store the filename of the last selected MP3 from the list until the Play button is clicked and

the file is loaded This principle will become clearer in a moment

4 Add the following script below the current script:

5

6 playlistXML.onLoad = function(){

7

8 var tempArray = new Array();

9

10 for(var i = 0; i < this.firstChild.childNodes.length; ++i){

11

12 tempArray[i] = new Object();

13

14 tempArray[i].label = this.firstChild.childNodes[i].firstChild.nodeValue;

15

16 tempArray[i].data = this.firstChild.childNodes[i].attributes.URL;

17

18 }

19

20 playlist_lb.dataProvider = tempArray;

21

22 }

23

24 playlistXML.load("playlist.xml");

25

The last line shown here loads the playlist.xml file into the playlistXML object Before that action occurs, however, the first part of the script creates an onLoad event handler so that the object knows what to do with the data after loading it Let's look at this event handler in detail

It's important to remember that the data loaded in from this XML file contains the name of each song, such as Agent 00, and the filename of the song, such as

Agent00.mp3 (go back to Step 2 if you need to review this info) Our goal is to transfer these two pieces of data for each song in the XML file into a list item for the playlist_lb instance, where the name of the song represents the label property for the item, and the filename represents the data property Because our XML file contains four songs, our playlist_lb instance will eventually contain four items, each with a label and a data property Remember that the label property for an item represents the text shown (this will be the song's name) for the item; the data property represents a hidden value that can be accessed and used when the item (the song's filename) is selected from the list

To get this data from our XML file into the playlist_lb instance, we need to take the loaded XML data, place it into indexed positions of an array, and set that array

as the data provider for the playlist_lb instance As a result, our loaded XML data appears in the playlist_lb instance

The first step in this transfer process is to create an Array object, as shown in the first line of the event handler The next line uses a for loop to populate the array with data from the loaded XML file Here's how it works

The loop is set up to iterate while i (which is initially set to 0) is less than

this.firstChild.childNodes.length The term this refers to the loaded XML

document firstChild refers to the root node of the file In this case, the root node is

as follows:

<Playlist>

</Playlist>

childNodes is an array representing any child nodes within the root node Because our XML document lists four songs within the root node (firstChild), childNodes has a length of 4; therefore, our for loop will iterate four times Adding songs to or deleting songs from the XML file will change this value, and thus the number of iterations that the loop makes

With each iteration, an object is created in the current index position of the

tempArray array (i) That object is next assigned label and data property values,

based on values extracted from the XML object To understand this better, let's look at an example of what happens during an iteration

Let's assume that the loop is about to begin its third iteration and thus i has a value

of 2 This would cause the script within the loop to be evaluated this way:

tempArray[2] = new Object();

tempArray[2].label = this.firstChild.childNodes[2].firstChild.nodeValue;

tempArray[2].data = this.firstChild.childNodes[2].attributes.URL;

This shows that a new object is created in index position 2 of the tempArray array Next, that object is given a label property The value of that property is based on the following expression:

this.firstChild.childNodes[2].firstChild.nodeValue;

As discussed earlier, this.firstChild.childNodes is an array containing the four

<Song> nodes in our XML file The <Song> node at index position 2 of this array

is the following:

<Song URL="LoungeJam.mp3">Lounge Jam</Song>

The remaining part of the expression that sets the label value,

.firstChild.nodeValue, is a reference to the listed song name within that node (Lounge Jam); therefore:

tempArray[2].label = "Lounge Jam";

The value of the data property of the object is set almost the same way, except that

it extracts the URL attribute of the currently referenced <Song> node; therefore:

tempArray[2].data = "LoungeJam.mp3";

By the time the loop is finished, there will be four objects in the tempArray, each with label and data properties representative of song names and song filenames, as just described

The last action within the onLoad event handler sets tempArray as the data

provider for the playlist_lb instance The objects within the array are used to populate the list with items

Let's test our work up to this point

5 Choose Control > Test Movie

As soon as the movie appears, you should see the songs contained in the external XML file loaded into the playlist_lb instance Clicking a song name in the list doesn't do anything yet, but we'll change that situation in the next several steps, as well as improve the look of the List component instance so that it matches our

project's design

6 Close the test movie to return to Flash With the Actions panel open, select Frame

1 of the Actions layer, and add the following script at the end of the current script:

7

8 var playlist_lbListener:Object = new Object();

9

10 playlist_lbListener.change = function(){

11

12 currentSong = playlist_lb.selectedItem.data;

13

14 }

15

16 playlist_lb.addEventListener("change", playlist_lbListener);

17

When the user selects a song from the list, we need to store the filename for that song in the currentSong variable The first line in this step creates a new Listener object named playList_lbListener The next several lines assign this Listener object a change event handler The last line registers the Listener object to listen for that event from the playlist_lb instance

When fired, the change event handler sets the value of currentSong to the data property of the currently selected item in the playlist_lb instance As discussed in Step 4, the data property for each item of the list contains the filename of that song When the Play button is clicked, this value is used to load and play a song

Let's set up that functionality next

7 Add the following event handler at the end of the current script:

8

9 play_btn.onRelease = function(){

10

11 music.stop();

12

13 music = new Sound();

14

15 music.onID3 = function(){

16

17 song_txt.text = this.id3.TIT2;

18

19 artist_txt.text = this.id3.TPE1;

20

21 year_txt.text = this.id3.TYER;

22

23 URL_txt.htmlText = "<a href=\"" + this.id3.WXXX + "\">" + this.id3.WXXX +

"</a>";

24

25 comments_txt.text = this.id3.COMM;

26

27 }

28

29 music.loadSound(currentSong, true);

30

31 }

32

This script defines what happens when the play_btn instance is clicked The script handles loading the external MP3 currently stored in the currentSong variable into the music Sound object, as well the displaying the ID3 tag data contained in that file

If the music Sound object is playing, the first line stops it, to prevent two sounds from playing at the same time The next line of the script reinitializes/re-creates a new instance of the music Sound object The next several lines use the onID3 event to define what should happen when ID3 tag data has been loaded in from the external MP3 file This data is usually at the beginning of the file, so this event should fire soon after the loading of the file begins This event handler contains five lines of script for displaying ID3 tag data in the various text fields in our project Be aware that the URL_txt text field will actually contain a clickable link based on the URL provided in the WXXX tag of the loaded file

The last line within the onRelease event handler takes care of loading the selected MP3 file, as defined by the current value of the currentSong variable As always, the onID3 event handler is defined before the file is actually loaded, so that the

Sound object knows ahead of time how to react to incoming ID3 data

7 Add the following event handler at the end of the current script:

8

9 stop_btn.onRelease = function(){

10

11 music.stop();

12

13 }

14

When the stop_btn instance is clicked, the music Sound object is stopped

The last thing we need to take care of is the restyling of our playlist_lb instance so

that it more closely resembles our project's overall design

8 Add the following script at the end of the current script:

9

10 with(playlist_lb){

11

12 setStyle("defaultIcon", "CDIcon");

13

14 setStyle("alternatingRowColors", [0x4E535C, 0x565B65]);

15

16 setStyle("color", 0xFFFFFF);

17

18 setStyle("fontWeight", "bold");

19

20 setStyle("rollOverColor", 0x6C7380);

21

22 setStyle("selectionColor", 0x6C7380);

23

24 setStyle("textRollOverColor", 0xFFFFFF);

25

26 setStyle("textSelectedColor", 0xFFFFFF);

27

28 setStyle("textIndent", 2);

29

30 }

31

Most of this script's functionality should be familiar to you by now A with

statement efficiently sets several style properties of the playlist_lb instance The main style change is the first set, named defaultIcon This style change displays the movie clip identified as CDIcon from the library next to each item listed in the instance