Adding the ActionScript

  • Select the first frame of the Actions layer and add the following code to the Actions Panel:

    • Example 5.12. mp3?mx.fla Actions : 1 (excerpt)

    var tracklist = new Array ();
    var mp3List = new XML ();
    mp3List.ignoreWhite = true;
    mp3List.onLoad = createPlayList;
    mp3List.load ("playlist.xml");
    function createPlayList (success)
    {
            if (!success)
            {
                    return;
            }
            var topLevel = null;
            for (i = 0; i <= this.childNodes.length; i++)
            {
                    if (this.childNodes[i].nodeValue == null && this.childNodes[i].nodeName == "playlist")
                    {
                            topLevel = this.childNodes[i];
                            break;
                    }
            }
            if (topLevel != null)
            {
                    for (i = 0; i <= topLevel.childNodes.length; i++)
                    {
                            if (topLevel.childNodes[i].nodeName == "mp3file")
                            {
                                    var track = topLevel.childNodes[i].attributes["track"];
                                    _root.tracklist.push (track);
                            }
                    }
            }
    }
    function randomBetween (a, b)
    {
            return Math.min (a, b) + random (Math.abs (a - b) + 1);
    }
    function playTrack ()
    {
            var track = _root.track;
            if (track.getBytesLoaded () == track.getBytesTotal () && track.duration > 0)
            {
                    clearInterval (_root.checkLoaded);
                    trackID3Info.text = "";
                    trackID3Info.text += "Title: " + track.id3.songname + newline;
                    trackID3Info.text += "Artist: " + track.id3.artist + newline;
                    trackID3Info.text += "Album: " + track.id3.album + newline;
                    trackID3Info.text += "Year: " + track.id3.year + newline;
                    trackID3Info.text += "Comments: " + track.id3.comment + newline;
            }
    }
    randomplayer.onPress = function ()
    {
            stopAllSounds ();
            var trackNo = randomBetween (0, _root.tracklist.length - 1);
            _root.track = new Sound ();
            _root.track.loadSound (_root.tracklist[trackNo], true);
            _root.checkLoaded = setinterval (playTrack, 500);
    };

     

    Let's break this code into manageable chunks and see what's going on.

    First, we create an empty array to contain our list of MP3 tracks.

    var tracklist = new Array ();

     

    Next, we create an XML object called mp3List, and set its ignoreWhite property to true so that line feeds and whitespace aren't parsed as separate nodes.

    var mp3List = new XML ();
    mp3List.ignoreWhite = true;

     

    We then set the event handler that will execute when the XML file has loaded (createPlayList) and load the data from playlist.xml.

    mp3List.onLoad = createPlayList;
    mp3List.load ("playlist.xml");

    Now we define the createPlayList function, which gets called to handle the XML data once it has loaded.

    function createPlayList (success)
    {
            if (!success)
            {
                    return;
            }
            var topLevel = null;
            for (i = 0; i <= this.childNodes.length; i++)
            {
                    if (this.childNodes[i].nodeValue == null && this.childNodes[i].nodeName == "playlist")
                    {
                            topLevel = this.childNodes[i];
                            break;
                    }
            }

     

    The first thing we do is check whether the XML file loaded successfully, as indicated by the success parameter. If it didn't, we bail out before attempting to process it.

    We then enter a for loop based on the number of top-level nodes within the XML object (this). We check these nodes until we find the one that has a null nodeValue, meaning it's a tag (as opposed to a piece of text) and that its name is playlist. This node is stored in a variable named topLevel. We then break out of the for loop.

    Next, we enter another for loop, in order to examine its children:

      

    if (topLevel != null)
    {
            for (i = 0; i <= topLevel.childNodes.length; i++)
            {
                    if (topLevel.childNodes[i].nodeName == "mp3file")
                    {
                            var track = topLevel.childNodes[i].attributes["track"];

    For each of the child nodes, we check to see if it's an mp3file tag, and then populate a variable with the track attribute of the tag, which is the name of an MP3 file.

    Finally, we populate the tracklist array using its push method to add the filename to the start of the array.

      

    _root.tracklist.push (track);

    That takes care of building the playlist. Now, when the randomplayer movie clip is clicked, the following code is brought into play:

    randomplayer.onPress = function ()
    {
            stopAllSounds ();
            var trackNo = randomBetween (0, _root.tracklist.length - 1);
            _root.track = new Sound ();
            _root.track.loadSound (_root.tracklist[trackNo], true);
            _root.checkLoaded = setinterval (playTrack, 500);
    };

     

    First, we stop all currently running sounds using the stopAllSounds function. We then populate a variable called trackNo with a random number in order to choose one of the tracks in our tracklist array.

    We then create a new Sound object and load it up with a random MP3 file using the trackNo variable we have just populated.

    Finally, we use the setinterval function to call the playTrack function every half-second. We store the interval identifier in a variable called checkLoaded in the root of the movie so we can cancel it when appropriate.

    Now, all that's left to discuss is the playTrack function:

    function playTrack ()
    {
            var track = _root.track;
            if (track.getBytesLoaded () == track.getBytesTotal () && track.duration > 0)
            {
                    clearInterval (_root.checkLoaded);
                    trackID3Info.text = "";
                    trackID3Info.text += "Title: " + track.id3.songname + newline;
                    trackID3Info.text += "Artist: " + track.id3.artist + newline;
                    trackID3Info.text += "Album: " + track.id3.album + newline;
                    trackID3Info.text += "Year: " + track.id3.year + newline;
                    trackID3Info.text += "Comments: " + track.id3.comment + newline;
            }
    }

     

    Each time this function is called, we check whether the MP3 file has loaded successfully. Once it has, we cancel the interval that is set to call the function every half-second with the clearInterval function. We can then populate the trackID3Info dynamic text field with the ID3 tag information from the MP3 file.

    ID3 v1.x Caveat
    As Flash Player 6 and Flash MX support only ID3 v1.0 and v1.1 tags, we have to make sure that the MP3 file is completely loaded before we attempt to pull the ID3 tag information from it. This is essential, as the ID3 tag data is found at the end of the MP3 file.

    In Flash MX 2004, which can produce content for Flash Player 7 and supports the ID3 v2.2 and v2.4 tag information located at the beginning of the MP3 file, this information is much more easily accessed. We'll see what this means to Flash developers when we modify this example.

  • Save your document and preview your work.

    • When the movie loads, the XML file is imported and the tracklist array is populated with all the track information from the playlist.xml file. Clicking on the randomplayer movie clip loads an MP3 file and displays its ID3 tag data in the dynamic text field.