MP3 PLAYER WITH EQUALIZER AND XML SONG LIST           as3 , xml


    Not an easy tutorial, but at the end you should get quiet complex mp3 player useable in any web presentation or project and very easy to modify. The key features of this player are:
  • clickable list of songs
  • adding and removing songs via xml file
  • visual equalizer
In this tutorial i will not cover all the visual stuff. It is all on your decision what shape or colors you will use. I cover the actionscript and functionality side of this project. I suggest to download the source files. Inside you will find mp3 song used in demo on this page, xml file to add,remove,rename songs and original *.fla file. At the end we should get something like this :




    Create new actionscript 3.0 file.This one will be 3 frames long. All the stage components should be same on every one of these frames, only actionscript will differ from frame to frame. Start by dragging in ui component List from flash components (press Ctrl+F7). Set its instance name to list . Now draw small rectangle and conver it to movieclip. This will represent the equalizer bars. Open this movieclip. Create new layer with one 10frames long frame. On the very first frame instert stop(); command in actions pannel(F9). Second layer should contain the small rectangle. Duplicate this frame ten times, and on each next frame add one exactly same rectangle above the previous one. At the end the first frame should contain one rectangle and the last 10 of exactly same rectangle in vertical line. It should look like this:



Now return to the scene 1 and duplicate this equalizer bar 5 times and put them next to each other with small gaps in between them. Call them (set their instance names to) eqBarLeft1, eqBarRight1, eqBarLeft2, eqBarRight2, eqBarLeft3, eqBarRight3, in this order. Next create button and name it stop_btn, this will work as a button to stop the playing music. Last create dynamic textfield and call it status_txt, then convert this text field into movieclip and call this movieclip Rtext. With all this set up we can start writing action script. Create new layer with three empty frames. Post this script on the first one:



stop();

var myFormat:TextFormat = new TextFormat();
myFormat.color = "0xFFFFFF";

list.setRendererStyle("textFormat", myFormat);


var trackToPlay:String;
var pausePosition:int = 0;
var songURL:URLRequest;
var i:uint;

var myXML:XML = new XML();
var XML_URL:String = "mp3_playlist.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);


function xmlLoaded(event:Event):void {
	
    
    myXML = XML(myLoader.data);  
   var firstSong:String = myXML..Song.songTitle[0];
   var firstArtist:String = myXML..Song.songArtist[0];
   songURL = new URLRequest("mp3_files/" + firstSong + ".mp3");
   Rtext.status_txt.text = "Now Playing: 1. "+firstSong +" - "+firstArtist;
	     
	for each (var Song:XML in myXML..Song) {
	i++;
	var songTitle:String = Song.songTitle.toString();
	var songArtist:String = Song.songArtist.toString();
	list.addItem( { label: i+". "+songTitle+" - "+songArtist, songString: songTitle, 
												Artist: songArtist, songNum: i } );

	}
	var myArray = new Array (0,0);
    list.selectedIndices = myArray; 
	gotoAndStop(3);
	
}


1/2 NEXT PAGE