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:
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:
1 2 3 4 | < ?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:
1 2 3 4 5 | < ?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.
1 2 3 4 5 6 7 8 9 10 11 | 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.
1 2 3 4 5 6 7 8 9 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 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.
1 2 3 4 | 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
1 2 3 4 | 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:
1 2 3 4 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 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
is there any way to have the white box that contains the song title black? I can easily change the text to white but cant figure out how to change the surrounding box to black. any suggestions
Scott
Nick
What isn’t working exactly? have you checked the previous comments on this issue?
Anderson
Thanks for clearing that out once more.
Tugabang
Thanks for the compliments, I hope to be able to write some fresh tutorials soon when I’m done with all my client assignments
Scott
The white box is actually just a normal square with no filling and a black border, just replace it with something appropriate that matches your needs.
Hey Tiago,
Wanted to give you props on one of the best tutorials I’ve found anywhere, you opened all kinds of doors for me with this one. Used this player for a fan site for Age Of Conan Hyborian Adventures I plan on adding the volume and other stuff from tutorial II & III. A note to everyone out there, most of the questioins asked are already answered, stopping the random loading of tracks for example can be found in the “Feedback” part of lesson II. Read, read, read, let Tiago work on some new tutorials =)
Thanks Again
Dave R.
Thanks alot for the Tutorial!
It works great.
There is one thing though. I have placed te mp3 player on layer 50 of my project.
Then there is a button who sends you to another layer (75).
My question is, when somebody is listening to a song and then uses the button to go furter in my project, the song continues… But i would like to disable the sound there.
what should i do?
i already tried to put this : _root.sound_mc.stop();
on layer 75 and also on the button who sends you to layer 75:
on(release) {
_root.sound_mc.stop();
gotoAndPlay(75);
}
but it aint working…
Could somebody help me out? Thanks in advance!
I fixed it already!
I’ve placed:
_root.sound_mc.sound_obj.stop();
on the next frame! and now it works!
Hey,
I used this tutorial ages ago and it worked perfectly… but, for some reason, I can’t get it to work again?
I’m using Flash 8, and I have followed every step very carefully but I still can’t get it to work.
When I go to play it, nothing happens, though I know that it identifies the XML file, as I tested this by changing the ‘playlist.load(“playlist.xml”);’ to ‘playlist.load(“bollocks.xml”);’ and got an error message
So i’m not sure what i’m doing wrong. All files are in the same folder, all mp3′s are working fine….
Your help would be amazing!!
xxx
p.s Here it is, I uploaded it so.. yeah. Thanks
I’m having problems
I used this tut like a year ago and it worked fine so I don’t really know why it isn’t now.
Basically, when I go to play my file, nothing comes up in the dynamic text box – I have all of my files in the same folder, the XML is being recognised.. I don’t really have a clue. I’ve read the comments but so far haven’t found a solution.
I’m a bit of a beginner if you can’t tell already!! Help would be really appreciated, thanks guys
Haha thought the first comment didn’t work. Well there you go!
Tiago –
Good job, buddy! Thanks for going to the trouble of putting this tutorial together and publishing it. Very helpful!
Luke
I have romoved the line of code:
“_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr]);”
because I don’t want the player to autostart playing the first audio file on page/player load. I want the player to remain mute until the user clicks on the play button
The above remedy does not work for me. I have tried it on my own build and on your downloaded build.
Can you please review and advise?
Thanks – Kay
autostart disabled…
at least, i think…
i removed line #19
_root.sound_mc.songStarter(songfile[song_nr], songname[song_nr]);
Hey Tiago,
this is an awesome tutorial, I had a question though. Is it possible to have the text scroll from left to right inside that little box?
Thanks.
Ramiro
OOOoooops disregard that last comment. Sorry about that.
brilliant,i will try it when i need,i always use a player A4Desk Flash Music Player also good,you can also try it.
thnx
Hello!
I got you this working fine (which is a big achievement for me as I’m a total beginner!)
The only thing is, it doesn’t seem to play longer mp3?
I was trying for ages to get it to work with a 4min long song with no success, then I tried a 30 sec sample of a song and it worked perfectly.
What I want to know is, how do I get it to play long songs?
Thanks!!
(ps. sorry if this has been covered in the comments already, I tried reading through them all but theres so many!!)
^^^^^^^^^
Forget that! It was something wrong with the two mp3′s I was using, got it all working fine now! (Except it wouldn’t work in firefox v2.0.0.6)
Issue of firefox 3 (when playlist scrolling the hang the explores)
http://www.sikkasoft.com/eng-us/sikkavideolab.aspx
open in the firefox 2 and other any explore its working.
But Firefox 3 used not reponding the explorer
i think many problems loading xml occurs because when you said to craete the xml at the beggining, its formatted wrong:
instead of your examples formatting:
hope this solves some problems
why doesnt code show?
muito obrigado Tiago!
Hi, I love your MP3 player and have used it many timesbefore
Is it possible to use absolute urls of MP3′s in the xml?
If it is possible, what changes would I need to make to the xml and actionscript?
Many thanks
Cal
You can use absolute paths without any problems, just change the path in the xml to the path you want.
No changes needed on the actionscript part.
Hello Tiago,
At first, hank you for this tutorial!!
I will only play one song and then must the player stop. How I stop the loop playing?
Many thanks
Leonid
Tiago,
Great tutorial. I must say that being relatively new to ActionScript, this was very easy to follow. I do have a question though. I’m trying to load my mp3 flash player into another Flash movie, and am able to do so by createEmptyMovieClip and loadMovie, however the audio won’t play and the volume slider won’t work. I probably need to modify some of code in the original mp3 player file, but I’m not sure where to start. Any help you could provide would be appreciated.
Thanks,
[DB]
Hello Tiago,
Great tutorials on your site and I really appreciate the help you give!
I have created the buttons like you said, plus the dynamic text field with the correct instance names. I have also create an .xml file the the file path (the same folder) for the songs.
the issue i am experiencing is that when i hit crtl+enter I get the following error ;
Error opening URL ‘file:///C|/Users/Bernie/Desktop/baxters%5Fdesign/mp3%5Fplayer/undefined’
I see the “Loading…” text in the text field but nothing happens.
Please can you help as this is really annoying me ;-P – i have copied ALL the code into Flash CS3 so the code should all be good.
Many thanks in advance for any help, Baxter
scrap the above post – i managed to fix it
Thanks, Baxter
Hey! Great tutorial, but I have a problem.
I get an error saying
mp3Player3.as, Line 269 “‘;’ expected” for (var i=0; i);
It doesn’t matter how many “;” I have there, I still get the same error.
It’s been bugging me for half an hour now.
Any idea what could be wrong?
Hi there!
How can i make the basic player NOT play automatically? So it WAITS until the user clicks ‘play’..
Cheers,
Hi there,
Firstly, Thankyou for your clear easy to understand guides. You do a great job !
I was wondering if you could help. I can get the player to work just fine in Flash as standalone player and it fetches the tracks frm the xml file.
Now that I have put the player nto my web page it just hangs at the loading screen and the music does not start.
Any ideas why ? This happens in IE and Firefox.
Many thanks for your help.
Tim.
Hi Tiago!
Just to say I sorted it out.
I had my files in the wrong folder.
Everything is now working.
Many thanks for your helpful tutorials. I have learnt a lot.
Tim.
Hi Tiago,
My question is the same as DB’s – how can you load this mp3 player into a main movie clip?
Normally I would just create a container movieclip ad add this actionscript:
loadMovie ("mp3-player.swf", "mp3container");However, the songs don’t appear when publishing in Flash CS3 and the movie doesn’t load at all when publishing live.
Any ideas?
Thanks
Let start off with the oldest comments:
leonid
But keep in mind to add the _global.song_nr++; somewhere in your code to ensure that the user will really listen to the next song. You could also do it somehow like this:
DB & PoneMalone
Jump over to this article I’ve wrote a while ago:
http://blog.six4rty.ch/tutorials/flash-create-a-full-streaming-flash-mp3-player-using-xml-pt-3/nesting-the-mp3-player-in-a-movieclip/
DataSmurf
The problem with this line: (var i=0; i);
is that you are missing the adding operator:
Fix that and the player will work
AD
Just remove this line of code:
Which should be line 16 if you used my code
Thanks Tiago, that’s kind of you to give such detailed responses to me and the others.
One last thing – I’ve been trying to use this mp3 player on a wordpress site and keep the files in a template directory which is separate from the the main html file but it’s not working.
I believe you have to have everything in the same folder right? Or is it possible to keep the files separate from the html file in which the flash movie is embedded?
Thanks once again
Ponemalone
You can place all files wherever you want, you just need to make sure that
a) the swf can find the XML playlist
b) the xml playlist can find the mp3 files
you just need to make sure that you use absolute paths which makes things easier to work with
Very last request (I promise). I’m so close to finishing this off, but for some reason I can’t get the songs to play continuously and ‘undefined’ appears in the mp3 player once it’s reached the end of the XML song listing.
Any ideas (code below)? Again, apologies for so many questions, but I’m so close I couldn’t just leave it there:
// Taken out so that main animation can continue:
// stop();
playlist = new XML();
playlist.ignoreWhite = true;
playlist.onLoad = function(success) {
if (success) {
_global.songname = [];
_global.songband = [];
_global.songfile = [];
for (var i = 0; i0) {
delete this.onEnterFrame;
this._parent.display_txt.text = name;
} else {
this._parent.display_txt.text = "loading...";
}
};
this.sound_obj.onSoundComplete = function() {
(song_nr == songfiles.length-1) ? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfiles[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_fw.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_rev.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");
Hello Tiago,
Excellent tut!! I am new to xml and as, but I followed your instructions and everything came out great except that all I get is a white rectangle when it runs.
I have the mp3 nested inside another movie clip so that when you click on the title, it opens. The buttons on the mp3 are operational, but just can’t see them. The only thing you can see is the white space where the title of the song is supposed to go. help!!!!
Thanks so much and keep up the excellent work!!
wht if some song in play list is not present how to make player to jump to next song automatically
Thank you for this tutoria
Hi Tiago,
Thanks again for posting this great and very useful tutorial. I just have one little issue. I have all of the files hosted on my server and want to be able to publish the swf on another site but it’s not loading the playlist.xml file. It works great on my own site, but not on any others. Is there something I should be including/changing in the actions and/or embed tags? I tried putting the full URL in the last line of the actions, replacing ‘playlist.xml’ with the full http://…. but it didn’t work. Little help? Thanks so much!!
(PS I also changed the param name=”allowScriptAccess” value=”always” in the embed tags and no luck)
Tiago, great tutorial.
My problem is when loading this into an empty movie clip the XML data does not show up in the text field. Previously two of the buttons did not work as well, but I sorted that our by changing them thier functions to _root. .
I haven’t had such luck w/ the portions of the script that handle the XML data.
I don’t really understand what else to do.
I’m loading the player into an instance of my empty clip on my main swf w/ this script.
loadMovie(“FlashMP3PlayerDesign3.swf”, _root.loadmp3s_MC);
I’ve modified the player’s script thusly:
—————————————————–
stop();
playlist= new XML();
playlist.ignoreWhite=true;
playlist.onLoad = function (success) {
if(success) {
_global.songname = [];
_global.songfile = [];
for (var i=0; i0) {
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 () {
_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);
}
btn_stop.onRelease = function() {
_root.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”);
—————————————————————————
Any help would be appreciatted. Again thanks for the tutorial!
Hello,
There is not pause option this player….
any other player with pause option ?
You can check the extension of this tutorial where i show how to add a pause button.
http://blog.six4rty.ch/tutorials/flash-create-a-full-streaming-flash-mp3-player-using-xml-pt-3/flash-mp3player-pause-button/
hey man. this isn’t working for me. i am using flash cs4 and AS3
it says that some of the lines of code are obsolete
i have managed to get full functionality to the player. the only problem is that i cant get more than one song…. and when i put in the xml. it gives me a #1006: error…
This is a really good tutorial
thanks a lot
Hello
this is a great player but is there a way to have it stopped when it opens and then the user has to press play to make it start.
I just dont want it to auto start when its opened.
Thank you
Linda
Linda, there should be a comment from me on this page, where I explain how to put the player in “no autostart” mode.
Hello Tiago!
Thanks for the tutorial, it is very well writen.
I have just one question: i wanted my player to start at the top of the list and don’t start playing automaticaly, so i read the comments and found the answer.
But now the “display_txt” starts empty. For a better user experience, i want to put a “Click on play button!” when the player is not working… Can you help me?
Thanks!
Alright, so I downloaded your code and I’ve run into the same problem with yours as I have with my own. Once the first sound file ends, the players just stops. It doesn’t move onto the next file and Flash returns this message:
Error opening URL ‘file:///C|/Users/IBUYPOWER/Documents/Downloads/audioplayer%5F1/’
I’ve also tried running it online and still, it gets stuck after finishing a file’s play time. Afterwards, pressing the back, next or play buttons just replicates the error. Any ideas?
Never mind, I didn’t read through the first page of comments. Solution found.
@Baxter
How did you fix it?
These are really great tutorials, however I cannot get this to work. I have tried the basic player and the advanced player and even tried just opening the samlpe files. The player opens and seem functional, but desn’t load the files. when I test in Flash, I get this error:
Test1 test1.mp3
Test2 test2.mp3
Error opening URL “file:///Music%20G5/Dreamweaver%20DATA/HOTSPOT/public%5Fhtml/samples/audioplayer%5F1/”
All of the files are located in the same directory, so it doesn’t seem like a path issue…