Flash: Create a Full Streaming Flash MP3 player using XML! (pt. 1)

MP3 player in Flash – No problem
MP3 player in Flash controlled by a XML file – Could be a problem

PART II of this tutorial can be found HERE
PART III of this tutorial can be found HERE

No panic, that’s what I will going to show you now.
In this tutorial I will just cover the basics of the mp3 player, maybe I will create a more advanced one with some more features.

Let’s get playing those mp3

Step 1
First of all we need to create a few buttons, so we can control our player
I’ve create the buttons using the text tool, and with the font Webdings.
Create 4 buttons and give them also the same instanceName:

btn_play

btn_stop

btn_prev

btn_next

Place those buttons on the stage, and give them an instacename like already mentioned above.
Furtheron, create a dynamic textfield where you will show the songname or whatever we want, give it an instanceName “display_txt” without the quotes
Create a new Layer in your movie, rename it to Actions, and put a stop action on frame 1, Actions Layer.

- Step 2
Now that we have something to control the player, we need to feed the player with something, we will use XML for that task.

Open your favourite texteditor, I use Notepad or Dreamweaver, and create a new XML file. Type following code into that XML file you created:

< ?xml version='1.0' encoding='utf-8'?>
<songs>
<song />
</songs>

Now you just need to fill the information about your songs between those 2 tags & .
Here what I’ve done:

< ?xml version='1.0' encoding='utf-8'?>
<songs>
<song name="Pixel2Life Soundtrack 01" file="music/p2l_01.mp3" >
</song><song name="Twodded Soundtrack 01" file="music/twod_01.mp3" >
</song></songs>

Save this newly created XML file as “playlist.xml” in the same directory as your .fla file.

Step 3
Now we need to feed the XML into flash, this will afford a lot of scripting. I will try to explain by my best.

First we create a new XML object:

1	playlist = new XML();

Then we say that he should ignore whitespaces

1	playlist.ignoreWhite = true;

Then we create 2 global arrays for the playlist, one for the Songtitle and one for the filepath.

playlist.onLoad = function (success) {
_global.songname = [];
_global.songfile = [];
if(success) {
for (var i=0; i
 
_global.songname[i] = playlist.firstChild.childNodes[i].attributes.name;
_global.songfile[i] = playlist.firstChild.childNodes[i].attributes.file;
}
} else {display_txt.text="Error loading XML"}
}

With this Script, I tell Flash: “If playlist loaded successful, create 2 containers and check how many songs are in there, if no XML display an Error.

at the end of this script we just need to tell flash to load the xml file we want

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

If you want to see if everthing is loaded correctly, just place a trace action after the “_global.songfile”.

1	trace(songname[i]+" "+songfile[i]);

this will display your array in the output window.

Step 4
Now that we have the basic functionallity of the player, let’s put the music into it.

1	_root.createEmptyMovieClip("sound_mc",1);

Here we create a emptymovieclip that will hold our music.

1	_root.sound_mc.sound_obj = new Sound();

This will place our music inside of our newly created Movieclip

1	_root.sound_mc.songStarter(songfile[0],songname[0]);

This bit will load and start our first song in the array.

MovieClip.prototype.songStarter= function (file, name) {
this.sound_obj.loadSound(file,true) // true = streaming
this.onEnterFrame = function () { // onEnter Frame event
if(this.sound_obj.position>0) { //When sound starts
delete this.onEnterFrame; // delete the event
trace("Song has started");//Just checking if everything works
}
}
}

Here the complete code we’ve created:

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[i] = 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();
_root.sound_mc.songStarter(songfile[0],songname[0]);
} 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..."
}
}
}
playlist.load("playlist.xml");
</playlist>

Now if you test your movie with CTRL+ENTER, you will see that your music is being played, and the songtitle appears on the dynamic textfield you’ve created.

Step 5
After a few minutes the song will stop (depending how long your track is
Now you want that the player moves on to the next song. Here what you need to do. This code will be placed inside our Prototype right after the second } that closes our function.

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]);
}

First line is just telling “when the sound completes…”
Second line: “Pick up next song in array..”
Third line: “start the next song”
are you wondering why I’ve put a -1? that’s because the array starts at 0.

Step 6
Are you still here? If yes, congratulations you almost made it.
Now we just need to give our buttons some functionality.

PLAYBUTTON:

1 2	btn_play.onRelease = function () { this._parent.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);

STOPBUTTON:

1
2
3

btn_stop.onRelease = function() {
this._parent.sound_mc.sound_obj.stop();
}

NEXTBUTTON

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]);
}

PREVIOUSBUTTON:

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]);
}

COMPLETE CODE

stop();
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[i] = 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");
</playlist>

FINISHED!!

Boys & Girls that’s it for the moment, now you got your streaming player running being feeded by a XML file.

HERE you can download my .zip file with 2 sample mp3′s and the working .fla

Have fun with it.
Tiago Dias

270 Comments.

t_giesen@yahoo.it November 5, 2011 at 11:44 pm

You are just great!!!
Thank you so much

Reply
kyle January 10, 2012 at 4:30 pm

Very kind of you to publish this article, thank you. I have tried to customize a little bit the player provided in the zip file but I couldn’t open the FLA, what version of Flash should I use for that? Here: http://www.flashxml.net/mp3-player.html I found a mp3 player that is fully customizable through xml files and this is awesome, not only the songs. Do you have plans to create something like that?

Reply
SoulSketch February 23, 2012 at 10:58 pm

Hey there,

I really wanna learn this and so ive been going over and over on it. but i keep coming up with the same result. i get an error msgs in my flash saying ’1084: Syntax error: expecting identifier before xmltagstartend.’ revering me to the in the end, i have even tried copying everything, same result. please help me with this.

Reply
- Gleaj522 August 28, 2012 at 4:03 pm
  
  Hey, I’m having the same problem. Did you figure this out at all?
  
  Reply
  - UnknownBoy December 23, 2012 at 6:59 pm
    
    The same error is happening with me! What can i do?
    
    Reply
aldren May 8, 2012 at 7:05 am

tnx..great tutorial…i have a question, how to i embed that to my website?tnx in advance…

Reply
Alphonsoz Kerimu July 17, 2012 at 9:33 am

My spouse and I absolutely love your blog and find almost all of your post’s to be exactly I’m looking for. Does one offer guest writers to write content in your case? I wouldn’t mind producing a post or elaborating on some of the subjects you write about here. Again, awesome web site!

Reply
Devinder December 17, 2012 at 6:49 pm

wonderful work! you have provided the work I was really looking for!…..may god bless you

Reply
Michelle April 17, 2013 at 11:50 am

Somebody essentially assist to make significantly
posts I would state. This is the very first time I frequented your web page and thus far?

I amazed with the analysis you made to make this particular post extraordinary.
Fantastic activity!

Review my site … Michelle

Reply