How to Make a Flash MP3 Player

Utilizing Flash you can create a simple MP3 Player. Play media on your home made Flash MP3 Player and listen to music from the comfort of your personal computer. This article will show you how to build and customize your own MP3 player utilizing Macromedia Flash.

Things You'll Need

• Flash (software)
• Computer (PC)

Instructions

Lay the Groundwork for the MP3 Player Interface

1. Select the rectangle tool from the tool palette in the Flash interface. Draw out 4 boxes.

2. Transform your boxes you have just drawn into controllers. Make all the boxes into movie clips by right-clicking on a box, then selecting the option to convert to a symbol. An option box prompts you to convert to a symbol. Under the label "Type," select "Movie Clip." Type a name for your movie clip in the text box, then click "OK."

3. Left-click on one of the rectangles you created. Locate the Properties tab in the bottom window in the Flash interface. You will see "Movie Clip," and underneath this list box you will see a text box that reads <Instance Name>. Give one name to each rectangle as follows: btn_play, btn_stop, btn_prev, btn_next.

4. Select your text tool and draw a text box. By default the text box will be set to "Static." This means that if you click somewhere else on the screen your text box will disappear. To rectify this you will draw your text box, then click the drop-down list and select "Dynamic Text." Now your text box is permanent. This is where your song names or other media titles will be displayed on your finalized MP3 Player.

5. Give your text box the instance name "display_txt." Create a new layer in your movie, rename it to "Actions," and put a stop action on frame 1, Actions Layer.

Code the MP3 Player

1. Create an XML file (either in Dreamweaver or Notepad). If you are using a simple text editor like Notepad, open a new notepad file, click "Save as," click inside the list that reads "save as type:" then select "All files." After you type your file name, add the extension ".xml" to the end of the file name. Click "Save."

2. Type the following code in to your xml document: <?xml version='1.0' encoding='utf-8'?><songs><song/></songs>

3. Create a new XML file as you did in Section 2, Step 1, but name it "playlist.xml." Make sure that you save all of your XML files in the same directory as your Flash files.

4. Type this code into the playlist.xml file: <?xml version='1.0' encoding='utf-8'?><songs><song name="Pixel2Life Soundtrack 01" file="music/p2l_01.mp3" /><song name="Twodded Soundtrack 01" file="music/twod_01.mp3" /></songs>

5. Click "Save."

Put Music Into the Player

1. Open Flash to frame 1.

2. Select "Actions Layer," then type the following code inside of the Actions panel: _root.createEmptyMovieClip("sound_mc",1);_root.sound_mc.sound_obj = new Sound();_root.sound_mc.songStarter(songfile[0],songname[0]);MovieClip.prototype.songStarter= function (file, name) {this.sound_obj.loadSound(file,true) // true = streamingthis.onEnterFrame = function () { // onEnter Frame eventif(this.sound_obj.position>0) { //When sound startsdelete this.onEnterFrame; // delete the eventtrace("Song has started");//}}}

3. Test your movie clip by pressing CTRL+ENTER. Your music will play and the media or song title will appear on the dynamic text field. You will notice that your media stops after it completes. If you want your media to play the next song, then add more code. See next step (Step 4) to add more code.

4. Place the following code after the second "}": (song_nr==songfile.length-1)? _global.song_nr=0 : _global.song_nr++;_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);}

Add Functionality to the Buttons

1. Click on the layer labeled "Actions". Add the following code for the play button: btn_play.onRelease = function () {this._parent.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);

2. Add the following code for stop button: btn_stop.onRelease = function() {this._parent.sound_mc.sound_obj.stop();}

3. Add the following code for the next button: btn_next.onRelease = function () {(song_nr==songfile.length-1)? _global.song_nr=0 : _global.song_nr++;_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);}

4. Add the following code for the Prev button: btn_prev.onRelease = function () {(song_nr==0)? _global.song_nr=songfile.length-1 : _global.song_nr--;_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);