Week 7: Building an MP3 Player : "Wiring Up" the Player

Making it happen...

Open the Actions panel and add the following code, in red, to the current code:

var playlistXML:XML = new XML();
playlistXML.ignoreWhite = true;
var music:Sound = new Sound();
var currentSong:String;
playlistXML.onLoad = function(){
var tempArray = new Array();
for(var i = 0; i < this.firstChild.childNodes.length; ++i){
tempArray[i] = new Object();
tempArray[i].label = this.firstChild.childNodes[i].firstChild.nodeValue;
tempArray[i].data = this.firstChild.childNodes[i].attributes.URL;
}
playlist_lb.dataProvider = tempArray;
}
playlistXML.load("playlist.xml");

var playlist_lbListener:Object = new Object();
playlist_lbListener.change = function(){
currentSong = playlist_lb.selectedItem.data;
}

playlist_lb.addEventListener("change", playlist_lbListener);

These four lines are not terribly difficult to understand.

When the user clicks a song the name has to be added to the value of the currentSong variable.The first line of the code you added creates a Listener object (see Tip below). The next couple assign a change event handler to the Listener object and the last line tells the Listener object to listen for event changes ( a click) in the List component.

You should also note that the third line is how the mp3 file gets played. When that change event is triggered, the value of the currentSong variable is changed to the "data" item in the array. Thus clicking the "Lounge Jam" Label item in the List component will change the value of "currentSong" to "LoungeJam.mp3.

Listeners are great for notifying Flash that an event has occurred such as a mouse click or a key press. A listener is an an object you create using the Object class and is created by giving the listener a name using the statement myListener=new Object();

Making the buttons work

Add the following code (in red) to the Actionscript you have written:

var playlist_lbListener:Object = new Object();
playlist_lbListener.change = function(){
currentSong = playlist_lb.selectedItem.data;
}

playlist_lb.addEventListener("change", playlist_lbListener);

play_btn.onRelease = function(){
music.stop();
music = new Sound();
music.onID3 = function(){
song_txt.text = this.id3.TIT2;
artist_txt.text = this.id3.TPE1;
year_txt.text = this.id3.TYER;
URL_txt.htmlText = "<a href=\"" + this.id3.WXXX + "\">" + this.id3.WXXX + "</a>";
comments_txt.text = this.id3.COMM;
}
music.loadSound(currentSong, true);
}

stop_btn.onRelease = function(){
music.stop();
}

If you select the Play and the Stop buttons you will note they have the instance names of play_btn and stop_btn. The Play button is the key.

This script takes care of the loading of the MP3 file selected in the List component -currentSong- and places it it in the sound Object-"music" as well as extracting the ID3 data from the sound file.

If you go through the script you will see that the first thing it does is to stop two sounds from playing simultaneously. A new sound object is create and the ID3 data is extracted from the MP3 file and displayed in the dynamic text fields on the stage.The purpose of the URL_txt code is to construct a clickable link. The last line of the block loads the selected MP3 file and starts playing it.

The last bit controls the stop button and simply stops the sound from playing.

Styling the List Box component

Components that use text inevitably use the default styles set for them when they are created. You can change this by using the "setStyle" method. Here's how:

Add the following code, in red, to the script:

var playlist_lbListener:Object = new Object();
playlist_lbListener.change = function(){
currentSong = playlist_lb.selectedItem.data;
}

playlist_lb.addEventListener("change", playlist_lbListener);

stop_btn.onRelease = function(){
music.stop();
}

with(playlist_lb){
setStyle("defaultIcon", "CDIcon");
setStyle("alternatingRowColors", [0x4E535C, 0x565B65]);
setStyle("color", 0xFFFFFF);
setStyle("fontWeight", "bold");
setStyle("rollOverColor", 0x6C7380);
setStyle("selectionColor", 0x6C7380);
setStyle("textRollOverColor", 0xFFFFFF);
setStyle("textSelectedColor", 0xFFFFFF);
setStyle("textIndent", 2);
}

The purpose of the "with" statement is to allow you efficiently change a number of properties without having to write reams of code. In the case of the list component we are adding a CD icon beside the title, setting the text color and weight for rollovers and selections and even indenting the text by a couple of pixels.

Save the file and test it.

Next: The code and the final project

This work is licensed under a Creative Commons License.

The downloads

Week 7: Building an MP3 Player : "Wiring Up" the Player

Making it happen...

Making the buttons work

Styling the List Box component