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:

    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

    Leave a comment

    263 Comments.

    1. Hi…
      I get everything to work until i try putting the music player into a website im creating.
      It previews nicely in flash but when i put that flash movie into the site it has troubles loadig the xml.
      how do i get the xml to interact with the html?

    2. Is there a way to limit the playback of each song to say 45 seconds? I need this to play only a sample of the track as a preview for people buying it. Must be pretty simple no? Thanks in advance. DV

    3. Harry :
      Hi…
      I get everything to work until i try putting the music player into a website im creating.
      It previews nicely in flash but when i put that flash movie into the site it has troubles loadig the xml.
      how do i get the xml to interact with the html?

      exactlly my problem, ipreviews nicely and the list of tracks does not appear on website. Though works whah i make a direct link to the player from dreamweaver. any input would be great.

    4. There’s two typos in the fla, which lead to an error. They are in the onSoundComplete code. It says songfiles instead of songfile. If you fix those it works fine and it is exactly what I was looking for, so thanks.

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

    5. I use this player and its brilliant but I need to be able to control the playlist externally with the next, and back buttons of a sling panels widget so that as the user goes through the sliding panels the song changes accordingly.

      Is this possible, I would love it to be so.

      Thanks in advance.

      nige

    6. dude thank you so much, this is the only tutorila that got me going , i appreciate it

    7. Hi

      First then all, let me give you my congratulations for this awesome tutorial… I really thought that I would need a lot of things to get this result. Great work.

      I just have a little problem. When a song ends the display_txt show the name of the track but nothing happens and my browser show “conecting to …” and freezes there.

      Please let me know what is the problem.

      Thank you a lot

      Alex K

    8. @Alex K

      Hi… my mistake, I didn’t read all previus post and I didn’t saw the solution to this problem. It’s all about a couple of “s” in the sentence “songfile(s)” present at the function songfile onSoundComplete.

      Thank you so much for your tutorial.

      Alex K.

    9. Thank you very much!

    10. I have read all the comments, I am sure I’ve read them so much, I’m missing something. I too am still getting the undefined error, I can not figure out what is wrong and what I am missing.

      Can you please let me know what is missing?

      It will play the first song, but will not play the second without any prompting from me. I am using flash 8 and dreamweaver mx

      This is just driving me nuts, because I know it’s something I’m doing wrong.
      Please help me

    11. I wanted to know how to make it so it doesnt play in random order. And secondly, how to make it so when the player is loaded, it doesnt automatically start playing the first song, but rather, you have to click the play button to play it. Meaning, it is in the stop position at the beginning.

      THanks

    12. I saved everything to the same folder on my host server, i change the errors found but when I press the buttons nothing plays

    13. I did everything you said and it didn’t work. So I tried to use your files and it would work either it just said loading when I used your audioplayer on the website. http://www.nosiddainc.com/mp3test.html

    14. Change from:

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

      To

      this.sound_obj.onSoundComplete = function() {
      (song_nr == songfiles.length-1) ? _global.song_nr=0 : _global.song_nr++;
      _root.sound_mc.songStarter(songfile[song_nr], songname[song_nr]);
      };

      Just the the wrong name is songfile, not songfiles…

      By

    15. How to make this player play a song which is already online and i should give its URL in embeded code…

    16. I tried the basic tutorial and it worked perfectly. but when i placed the .swf, xml and .mp3 files on my local server; it really didnot worked.. the flash file seems to be functional but it doesnot plays the music. there is no path issue as i placed all the files in same folder..

      please help me how it will work in local server..

      quick reply will be highly appreciated..

    17. Hey,

      Amazing player, thanks so much for this. It’s the second time I’ve implemented it on a website and both times it’s really done the trick.

      I struggled to turn off the auto play feature – there’s a lot of people asking how and there seems to be no clear answer. The way I did it was by removing the following line of code (line 24):

      _root.sound_mc.songStarter(songfile[song_nr]);

      Seems to have worked, no side effects yet! I’m using the code from Part 3 of the tutorial, incidentally.

      Thanks again

    18. Hi Dave,

      I’ve already wrote the solution multiple times throughout all 3 pages, but it kind of sucks to scroll through all comments ;)
      But back to question, yes that is the line that you need to comment out and nope there are no side effects.
      Happy you like the player. :)

    19. Hey Tiago,

      Nice one, glad I got it right! :) I must have kept missing the solution when I went through the comments before. Ah well!

      I don’t suppose you ever got anywhere with making it so the playhead can be scrubbed through the song did you? That would pretty much make it my perfect player!

      Cheers again, keep up the good work!

    20. Dave,

      One of my clients: http://toscanorecords.com/ also requested that, but since we are “downloading” the mp3 it doesn’t make much sense to scrub the playhead (in case someone has a really bad connection). Anyway the client still wanted it and I made the playbar clickable, which is kind of easy:

      You just need to create a click function on the progressbar get the mouseX position and calculate the tracks position accordingly, something like, ( songLength / progressBar.width ) * mouseX
      That gives you the seconds that you need to seek to

    21. Heya people,

      Those who are still struggling with the error about undefined URL.
      In the XML example Tiago made a type error, namely <? xml… that space isn't supposed to be there!
      <?xml… and it works like a charm!!

      Good luck!

    22. Thank you for the quick tutorial.Excellent & helpful post

    23. Thank for this simple but awesome tutorial!

    24. Hello Tiago

      Thanks for the tutorial, the player works like a charm :)

      But I have a question: how I can do to play the songs on loop?

      thanks one more time!

    25. I made a basic player based on your tutorial, which is very good. The only problem I have is that the playlist keeps repeating once it’s over. Is there a way to stop the player when the playlist is completed????

    26. I’m going to sound like a dunce, but on step 3. Am I doing this in flash or my textedit? Sorry for my novice-ness.

    27. Hi Tiago!!

      Great Tut! I am a novice, but you really helped.

      One issue I am having is that when I place my player and actionscript inside another movieclip, only the next and previous buttons work. The input text, stop and play buttons do not function. I am using only the first part of the tutorial and it is working great inside the main timeline. What part of the code do I need to alter to get this to work?

      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 () {
      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”);

      I am using CS4 (AS 2.0)

      Thank you for your help!

      Jason

    28. Kaylin ~

      For step 3 you are putting that code inside the same actionscript as your stop(); code in Flash. So..you have your actionscript layer on top and your player buttons on a layer below it. Just add Tiago’s code to the actionscript keyframe.

      Hope that helped.

      Jason

    29. Mine didn’t work online either. It was because the song names were capitalized, but written in minuscules in the xml. On the server it’s important to have identical names, offline not

    30. hey Tiago can you please help me? im making a simple mp3 player and i tried to add your scrolling text code to it and it scrolls but doesnt reset when it reaches the end of the frame. it just keeps going left dont know what to do.. im stuck, everything else is done except the skinning part and this..if you have time to help ill send you my fla file..

      cheers

    31. i tried to run your code but it came up with the following errors,
      Scene 1, Layer ‘Actions’, Frame 1, Line 47 1084: Syntax error: expecting identifier before xmltagstartend.

      Scene 1, Layer ‘Actions’, Frame 1 1084: Syntax error: expecting identifier before end of program.

      any help would be apreshiated
      thanks

    32. Hello.
      I made the player work. However, I would like to place this player in a bigger flash file (a flash website) I have tryed to place it on separate layer in the website file but then get the following errors:

      Output:
      ReferenceError: Error #1056: Cannot create property onRelease on flash.display.SimpleButton.
      at main_fla::MainTimeline/frame1()

      Compiler errors:
      Warning: 1058: Migration issue: The property _root is no longer supported. This property has been removed. The closest equivalent is the Stage, which serves as the root of the ActionScript 3.0 display list..
      This error consernes a whole bunch of lines in the actionscript.

    33. @Paul Baarn

      Thanks so much for spotting that. I was banging my head on the desk trying to figure this out.

    34. Nice work!!! you’re a fla savior!!! :grin:

    35. Thanks a lot for this tutorial. You have saved my life :smile:

    36. I bet this has been answered but I’d thought I ask anyway. It’s a great player. Everything works, but it seems to stop after every song. Is there something I need to change or modify?

      Thank you.
      Alex

      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”);

    37. Yes thank you. The issue was the zip files code.

      for those of you wondering why it won’t continue to play after a song, the code in the next few lines are from the zipped fla at the top of the page. The 2 places it says “songfiles” need to be changed to “songfile”. (get rid of the s on the end)
      i did this and it plays forever FYI i am using Flash Pro 8
      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]);

    38. I have read thru almost all comments and cant seem to find how NOT to get it to play/start Random. Have it where it doesnt start until you click on a button, just dont want Random start. Also trying to figure out how once all songs in the XML playlist are played it doesnt start playing again. Anyone have a fix for this… Everything else works Great.
      Thanks
      Kevin

    39. Ok figured out how to get it from playing/starting Randomly, now just to play thru list Once.

    40. Eriz Purna Irawan

      Thx U so much….
      I so very happy,,,,

      Emmmmuuuuuahhh….. i like it!!

    41. naturally like your web site however you have to take a look at the spelling on several of your posts. Several of them are rife with spelling problems and I find it very bothersome to tell the truth nevertheless I¡¦ll certainly come again again.

    42. Hi, Tiago,

      Thanks so much for the great tutorial. I’m using it in a project I’m working on and the results are stellar! I do have one question, though. How would you modify the code so that the volume doesn’t reset after each song load? Can you just set volume once and leave it the same for all songs until the volume changes?

      Thanks again for a great tutorial!

    43. You made some respectable points there. I seemed on the web for the difficulty and located most people will go along with with your website.

    44. Tiago! how do we get this to work in AC3… it keeps giving me an error… 1084: Syntax error: expecting identifier before xmltagstartend.

      please help?!

    45. Hi
      The tutorial is great and player works fine but I really need the songs to loop. Anybody knows how to do it?

    46. Thank you very much for this great tut and detailed descrption…AWESOME…I begin stuying with programming. Very helpful.
      Love from Switzerland!
      Christa

    47. thanks for this!!!!
      :lol:

    Leave a Reply

    Your email address will not be published.


    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

    Trackbacks and Pingbacks: