Flash Multiple Track MP3 Player Tutorial

Flash driven MP3 players add a new level of satisfaction to the user experience.

Flash allows web developers to add levels of interactivity to their websites that were previously impossible. One of the most popular ways to make use of the power of Flash is to add MP3 player applications that stream multiple tracks that the user can control to enhance the website experience. The process for creating a multiple track MP3 player is relatively simple, even for a novice user.

Things You'll Need

• Adobe Flash
• MP3 files

Instructions

Programming the MP3 Playlist

1. Open a new "Notepad" document and paste the following code:
   <?xml version='1.0' encoding='utf-8'?>
   <songs>

   </songs>

2. Type the MP3 file information between the <songs> and </songs> tags using this syntax:
   <song name=\"My Song\" file=\"music/ms.mp3\" />
   <song name=\"Your Song\" file=\"music/ys.mp3\" />

3. Add a new line of code for each MP3 file to be used for the Flash player.

4. Verify that the code has the proper syntax:
   <?xml version='1.0' encoding='utf-8'?>
   <songs>
   <song name=\"My Song\" file=\"music/ms.mp3\" />
   <song name=\"Your Song\" file=\"music/ys.mp3\" />
   </songs>

5. Save the file as "playlist.xml" in a new folder called "Mp3Player."

Import Playlist to Flash

1. Open a new actionscript2 Flash document.

2. Create four buttons using the "Text" and "Rectangle" tools: "Play," "Pause," "Next" and "Stop."

3. Type an instance name for each of the buttons using the following syntax:
   btn_play
   btn_stop
   btn_prev
   btn_next

4. Create a "Dynamic" text field on the stage and give it an instance name of display_txt.

5. Insert a new layer in the "Layers" panel and rename it "a."

6. Select frame 1 of "a," press F9, then type "stop();" without the quotation marks in the actionscript panel.

7. Paste the following code below "stop();" of the actionscript panel:
   playlist= new XML();
   playlist.ignoreWhite=true;
   playlist.onload = function (success) {
   if(success) {
   _global.songname = [];
   _global.songfile = [];
   for (var i=0; i<playlist.firstChild.childNodes.length; i++) {
   _global.songname = playlist.firstChild.childNodes[i].attributes.name;
   _global.songfile[i] = playlist.firstChild.childNodes[i].attributes.file;
   trace(songname[i]+\" \"+songfile[i]); }
   _root.createEmptyMovieClip(\"sound_mc\",1);
   _root.sound_mc.sound_obj = new Sound();
   _global.song_nr = random(songfile.length); _root.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);
   } else {display_txt.text=\"Error Loading XML\"}
   }

   MovieClip.prototype.songStarter = function (file, name) {
   this.sound_obj.loadSound(file,true)
   this.onEnterFrame = function () {
   if(this.sound_obj.position>0) {
   delete this.onEnterFrame;
   this._parent.display_txt.text=name;
   } else {
   this._parent.display_txt.text=\"loading...\"
   }
   }
   this.sound_obj.onSoundComplete = function () {
   (song_nr==songfile.length-1)? _global.song_nr=0 : _global.song_nr++;
   _root.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);
   }
   }

   btn_play.onRelease = function () {
   this._parent.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);
   }
   btn_stop.onRelease = function() {
   this._parent.sound_mc.sound_obj.stop();
   }
   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]);
   }
   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]);
   }

   playlist.load(\"playlist.xml\");

8. Save the Flash document in the "Mp3Player" folder that you created earlier.

9. Press CTRL+Enter to test the finished MP3 player.

Tips & Warnings

• There is no limit to the number of MP3 files that can be streamed using this process.

References

• Pixel2Life