Tiago's Weblog Code & Technology Aficionado – Come for the Flash, stay for more!

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

Last time I've showed you how to create a basic mp3 streaming player using XML, you got all the basics you need, you have the functionality, you got the code. Now it's time to show you a bit more that is needed/possible.

Upon request on the forum, I will show you this:

  • Time display
  • Volumecontrol
  • ..some more small things

    • Let us start with something easy.

    Display of further elements (like artist)

    Maybe you already found on the P2L forum a topic regarding this mp3 player, and someone that didn't knew how to put the artist/group on the same text field.
    Here's how I've solved his problem.

    XML:
    I've just created a new attribute called band:

    1

    <song name ="Test1" band ="Twodded Band" file="test1.mp3"/>

    FLASH:

    1
2
3
4

    playlist.onLoad = function (success) {
if(success) { 
_global.songname = [];
.......

    Last time we defined a global variable holding the name of the mp3 file we stored in our XML.

    So I've just set a new variable named "songband"

    1
2
3
4

    playlist.onLoad = function (success) {
if(success) { 
_global.songname = [];
_global.songband = [];

    But that's not everything.. We also need to define it on other lines of our actionscript.
    Here you see our array for the songname:

    1
2
3

    ...
_global.songname[i] = playlist.firstChild.childNodes[i].attributes.name;
...

    So now we just need to add a new line with following code:

    1

    _global.songband[i] = playlist.firstChild.childNodes[i].attributes.band;

    we've already set a variable named "songband" and now we're creating a new array for that variable to hold our data.

    If you want to test if everything works, just place a trace action on the script:

    1

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

    If you XML is correct and every step till now has been done you should get this as output:

    Test1 test1.mp3 Twodded Band
    Test2 test2.mp3 P2L Band

    When we create our soundobject we passed the array with it, so we can display the name and play the file.

    1
2
3
4

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

    Now things are starting getting easier and easiert or not? I think you already guessed what you need to put here:

    1
2
3
4
5

    _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],songband[
song_nr]);

    Now where can I see the Bandname on my movie?
    Do you remember this piece of code?

    1
2
3
4
5
6
7

    MovieClip.prototype.songStarter = function (file, name, band) {
this.sound_obj.loadSound(file,true)
this.onEnterFrame = function () {
if(this.sound_obj.position>0) {
delete this.onEnterFrame; 
this._parent.display_txt.text=name;
.....

    You noticed already that I'm displaying the name of the track using this _parent.display_txt.text=name;
    so we now just add the band name to it, how?
    We just tell to append a whitespace a slash and a whitespace and then show the band name.
    Since we are working with textfields, you can enter whatevery you want to be showed inside of the "".

    1

    this._parent.display_txt.text=name+" / "+band;

    Now do a test run on your movie, and you will see that the bandname is being displayed. Kewl uh!

    Nevertheless, we're still not done as soon as you push a button or the track ends, all the next tracks will not have any band description on it, we didn't define to do so.

    As you see I defined the songband array for every possible state
    (soundcomplete, play, next and back)

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

    This method can be used for every kind of text input that you want to push with your song.

    The First part of this tutorial is done, let's see what we can do else..

    Are you still with me? Congrats you will get rewarded with a ... Time Display

    First off, we create a new dynamic textfield in our stage and give it the instanceName of timeDisplay_txt, we also type 00:00 into that textfield since we don't want that the scripted counter just pops up.

    How do we want to display our time? normally cd players just show minutes and seconds of each track, some of those also show miliseconds.. but hey.. we don't need those.

    So let us set a Interval of one second.
    timeInterval=setInterval(timer,1000);
    Timer is the name of our function that we will write, and 1000 means, every 1000ms should this function being called.
    I will place the interval inside of the prototype just after the text display we did before.

    As next we need to create our function that will output the playtime of our mp3 file.
    For the beginning let us just trace it to test if it works

    1
2
3

    function timer(sound_obj) {
trace(sound_obj.position);
}

    This code has been placed before the prototype, basically you could post it anywhere, as long as it's not inside any loop or query.

    Press CTRL+ENTER to test your movie and you will see that besides of the
    xml information we pulled before, we also get some strage numbers, those
    are being update every second.. you remember that we set our interval to
    1 second. And the time is being displayed in miliseconds. No one will
    want to read that as it is, so let's change it to something more
    userfriendly.

    To achieve it, we need to work a little bit more, first of all..

    Let us remove that trace action and replace it with
    this:

    1

    timeDisplay_txt.text=sound_obj.position;

    Now you see our miliseconds being displayed in our textfield we created.

    Next we need to make time readable for everyone.

    Let us store our time inside a variable, so we don't have to type so much and convert it right away to seconds.

    1

    time=sound_obj.position/1000;

    I've replaced sound_obj.position with time to display the time:

    1

    timeDisplay_txt.text=time;

    Now we have a more or less readable timeformat, but we can do it better.

    Let us divide the time by 60 so that we have minutes

    1

    min=Math.floor(time/60);

    Now that we have our minutes, we also need to define the seconds, that are available from this song. For this we will going to use Modulo = %

    Now what is modulo?
    % (modulo)
    Availability
    Flash Player 4. In Flash 4 files, the % operator is expanded in the SWF file as x - int(x/y) * y, and may not be as fast or as accurate in later versions of Flash Player.

    Usage
    expression1 % expression2

    Parameters
    None.

    Returns
    Nothing.

    Description
    Operator (arithmetic); calculates the remainder of expression1 divided by expression2. If either of the expression parameters are non-numeric, the modulo operator attempts to convert them to numbers.
    The expression can be a number or string that converts to a numeric value.

    Example
    The following is a numeric example that uses the modulo (%) operator.

    1
2
3
4

    trace (12 % 5);
// returns 2
trace (4.3 % 2.1);
// returns approximately 0.1

    In our case, if our song has a length of 80 seconds then we calculate 80%60 equals 20, 60 fits once in 1 and 20 is the rest. resulting in 01:20.

    the code needed for this calculation is very easy!

    1

    sec=Math.floor(time%60);

    Now we have also our seconds.

    Now there's still one small thing that I forgot. When time is under 10 seconds we want to show the seconds with a 0 in front. We need to write a query for that.
    Lets append our code with this line

    1

    sec=(sec&lt;10)?"0"+sec:sec;

    In our case we are not using any mp3's longer then 1 minute but for any case, here the code for the minutes.

    1

    min=(min&lt;10)?"0"+min:min;

    Last step will be the display of the correct time in our textfield, go back to our display code and replace time with min+":"sec";

    1
2
3
4
5
6
7
8

    function timer(sound_obj) {
time=sound_obj.position/1000;
min=Math.floor(time/60);
min=(min%lt;10)?"0"+min:min;
sec=Math.floor(time%60);
sec=(sec&lt;10)?"0"+sec:sec;
timeDisplay_txt.text=min+":"+sec;
}

    If you test the movie now you will see that our display is working correctly.. till....

    ...the song ends... or you press any button...

    There is good way to fix the whole problem, we just need to clear interval and set the time back to 00:00. I will show you here how to fix that.

    On the onSoundComplete event we need to clear the interval and set the time back, we do that with this piece of code:

    1
2

    clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";

    Here the complete onSoundComplete code piece:

    1
2
3
4
5
6
7

     this.sound_obj.onSoundComplete = function () {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";
(song_nr==songfile.length-1)? _global.song_nr=0 :
_global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr],songband[
song_nr]);

    }

    Now the time will be display correctly as long as you don't push any button.

    To fix that, let us remove the sound_obj creation inside the onload function

    1

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

    remove this..

    And we will create the soundobject inside our prototype.
    First we check if there is a soundobject.

    1
2
3
4
5
6
7
8

    if (this.sound_obj){
If there is one we stop it.
this.sound_obj.stop();
If there is one we delete it.
delete this.sound_obj;
}
If there is no sound object then create one.
this.sound_obj=new Sound(this);

    Before you test the movie place this piece of code on every button you
    have:

    1
2

    clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";

    Here the complete button code now:

    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

    ...
btn_play.onRelease = function () {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";
this._parent.sound_mc.songStarter(songfile[song_nr],songname[song_nr],so
ngband[song_nr]);
}
btn_stop.onRelease = function() {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";
this._parent.sound_mc.sound_obj.stop(); 
}
btn_fw.onRelease = function () {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";
(song_nr==songfile.length-1)? _global.song_nr=0 :
_global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr],songband[
song_nr]);
}
btn_rev.onRelease = function () {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";
(song_nr==0)? _global.song_nr=songfile.length-1 :
_global.song_nr--;
_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr],songband[
song_nr])
}

    Now test your movie. Happy with it? Still want to learn more, then just jump to next page to learn .....

    The volume Slider

    Okay.. this is the last part of this tutorial, if you are still with me then grab some coke and something to eat, after this you will be playing around with your mp3 player till early morning.

    Design some shape to act as background of your volumeslider, I just draw a square and moved the top left corner point throughout the bottom, so I have a more stylish volumeslide background. I didn't put much effort on the design since this is a pure actionscripting tutorial

    Select the newly created shape and convert it to a movieclip, give it also a instancename of volBG.

    Now create a handle where the user can lower or maximize the volume, I've just draw a rectangle and placed it ontop of the volBG. Again convert this shape to a movieclip, and give it a instancename of dragger

    Now select both mc's and convert them also to a movieclip with the instance name volume1.

    Right after the soundcomplete function we will place our actions for the volume dragger.

    1
2
3
4
5
6
7

    this._parent.volume1.dragger.onPress = function(){
startDrag(this,
true,0,this._y,this._parent.volBG._width,this._y);
}
this._parent.volume1.dragger.onRelease = function(){
stopDrag();
}

    Here we tell our dragger that he's draggable ;) on the X-Axis it would be moved from 0 to the width of the volBG mc and I've also locked the Y-Axis since we don't need to drag it vertically.
    As soon as the mousebutton is released we want to stop drag, just put this action into the onRelease function
    stopDrag();

    Just do a small test of your movie, to check if your dragger is working as it should and if you can't drag over the volBG.

    Everything working as it should? Good!

    Let's move on to the last part of this tutorial

    We want to control the volume of the sound depending on the position of the dragger.

    1
2
3
4

    this.onEnterFrame = function () {
var g = (this._x/this._parent.volBG._width)*100;
this._parent._parent.sound_mc.sound_obj.setVolume(g);
}

    Okay, we create an onEnterFrame function to control the sound, inside of that function I've created a new variable holding the percentage of our volume by diving the dragger by the width of the volBG and multiplying it by 100.
    If we don't multiply it you will get a too low value to regulate the volume.
    Then we just need to set the volume of the sound_obj to the variable "g".

    Here the 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

    stop();
playlist = new XML();
playlist.ignoreWhite=true;
playlist.onLoad = function (success) {
if(success) {
_global.songname = [];
_global.songband = [];
_global.songfile = [];
for (var i=0; i<playlist .firstChild.childNodes.length; i++) {
_global.songname[i] = playlist.firstChild.childNodes[i].attributes.name;
_global.songband[i] = playlist.firstChild.childNodes[i].attributes.band;
_global.songfile[i] = playlist.firstChild.childNodes[i].attributes.file;
//trace(songname[i]+" "+songfile[i]+" "+songband[i]);
}
}
_root.createEmptyMovieClip("sound_mc",1);
_global.song_nr = random(songfile.length); 
_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr],songband[song_nr]); 
}
function timer(sound_obj) {
time=sound_obj.position/1000;
min=Math.floor(time/60);
min=(min%lt;10)?"0"+min:min;
sec=Math.floor(time%60);
sec=(sec&lt;10)?"0"+sec:sec;
timeDisplay_txt.text=min+":"+sec;
}
MovieClip.prototype.songStarter = function (file, name, band) {
if (this.sound_obj){
this.sound_obj.stop();
delete this.sound_obj;
}
this.sound_obj = new Sound(this)
this.sound_obj.loadSound(file,true)
this.onEnterFrame = function () {
if(this.sound_obj.position>0) {
delete this.onEnterFrame; 
this._parent.display_txt.text=name+" / "+band; 
timeInterval = setInterval(timer, 1000, this.sound_obj);
} else {
this._parent.display_txt.text="loading..." 
}
}
this.sound_obj.onSoundComplete = function () {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";
(song_nr==songfile.length-1)? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr],songband[song_nr]);
}
this._parent.volume1.dragger.onPress = function() {
startDrag(this, true, 0, this._y, this._parent.volBG._width, this._y);
this.onEnterFrame = function() {
var p = (this._x/this._parent.volBG._width)*100;
this._parent._parent.sound_mc.sound_obj.setVolume(p);
};
}
this._parent.volume1.dragger.onRelease = function() {
delete this.onEnterFrame;
stopDrag();
};
this._parent.volume1.dragger.onReleaseOutside = function() {
stopDrag();
};
}
btn_play.onRelease = function () {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";
this._parent.sound_mc.songStarter(songfile[song_nr],songname[song_nr],songband[song_nr]);
}
btn_stop.onRelease = function() {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";
this._parent.sound_mc.sound_obj.stop(); 
}
btn_fw.onRelease = function () {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";
(song_nr==songfile.length-1)? _global.song_nr=0 : _global.song_nr++;
_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr],songband[song_nr]);
}
btn_rev.onRelease = function () {
clearInterval(timeInterval);
this._parent.timeDisplay_txt.text="00:00";
(song_nr==0)? _global.song_nr=songfile.length-1 : _global.song_nr--;
_root.sound_mc.songStarter(songfile[song_nr],songname[song_nr],songband[song_nr])
}
playlist.load("playlist.xml");
</playlist>

    And that's it, there you have your volumebar.
    That's it for part II of the Streaming MP3 player,

    HERE you can download a .zip file containing the .fla, .xml and 2 sample mp3's to play around with.

    I hope you enjoyed this tutorial.
    Tiago Dias

    Comments (95) Trackbacks (2)
    1. X-Sparker
      April 22nd, 2008 - 07:32

      Hi Tiago. Sorry but I faced another problem now…

      I didn’t want the band name features so I just skipped that section. I don’t know if that was what caused this problem, but my timer isn’t really working. I mean, I got it to change from 00:00 to something else once the song goes into its first second, but it only changed to “NaN:NaN” and remained that way.

      When I started this all, I tried to do what you said with the trace thing just to check if it works. But all I get in the output window was “undefined” every second, instead of strange numbers like you mentioned.

      I also tried moving the the timeInterval thing around, and I found that if I put it AFTER the function timer(sound_obj) thing, the 00:00 won’t change at all, which is probably worse than getting “NaN:NaN”, I think.

      here is my actionscript from the beginning up till where I make it says “loading…”:

      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 = 0; _root.sound_mc.songStarter(songfile[song_nr],songname[song_nr]);
      } else {display_txt.text=”Error Loading XML”}
      timeInterval = setInterval(timer, 1000, this.sound_obj);
      function timer(sound_obj) {
      time = sound_obj.position/1000;
      min = Math.floor(time/60);
      min = (min<10)?”0″+min:min;
      sec = Math.floor(time%60);
      sec = (sec0) {
      delete this.onEnterFrame;
      this._parent.display_txt.text=name;
      } else {
      this._parent.display_txt.text=”loading…”
      }
      }

    2. James
      April 22nd, 2008 - 20:30

      Hey Tiago your player is wicked, but for some reason it was working but now isn’t haha. I have followed your tutorials up to the end of part two and got you code from your downloaded file, every thing works completely fine except the timer and display field disappear when a song plays(completely blank) can you think of a reasonning for this? my xml is exactly the same as yours only the track names etc are changed… i’m stumped please help…

    3. Great Player
      April 24th, 2008 - 04:54

      Hey sick player! Running into trouble when i implement it into my flash site which uses named anchors for navigation (AS 2). Whenever i click a navigation link the player starts playing another song. The time display goes all wonky displaying random times as two songs are playing. Currently i have it so that the actions are within a movie clip and the controls are right at the root of the site. Any ideas on how to fix this?

    4. reef
      April 25th, 2008 - 07:55

      thanks a lot, i’m a newbie and this is so helpfull..

      thanks

    5. James
      May 13th, 2008 - 04:47

      Hey Tiago, hows tings, do you still reply to this thread? anywhoo I made your player up to the end of part two cause thats all i require, it loads the songs fine, the output window shows what you said, but for some reason the display of the band name and track plus the timer don’t show when i test the movie…? any ideas on what could be causeing this problem? i’ve checked the code a dozen times and and it’s exactly the same as yours, i even copy pasted it to be sure….. help?

    6. Tiago
      May 14th, 2008 - 00:10

      James
      Is your xml correctly written, can you trace the values from it?

    7. Scott
      May 14th, 2008 - 02:30

      the player runs fine but occasionally (usually when switching pages) the songs overlap. Its only occasional but is there anything to do to prevent that?

    8. Tiago
      May 14th, 2008 - 13:16

      Scott
      What do you mean with “switching pages”? Normally the player just plays the current song, nevertheless if you browse away or not. Can you post a sample so I can see the problem visually?

    9. X-Sparker
      May 15th, 2008 - 03:43

      Hey Tiago! I’m still stuck on the time display… Like I said once the song starts playing, the time changes from “00:00″ to “NaN:NaN”. Wonder what’s wrong with it?

      I’ll send you my action script if you want me to

      Thanks.

    10. X-Sparker
      May 15th, 2008 - 03:48

      Hey Tiago, I’m still stuck on the time display… Like I said once the song starts playing, the time changes from “00:00″ to “NaN:NaN” Wonder what’s wrong with it?

      This is kinda urgent so please reply, I can send you my fla file if you need it. Sorry if this is a double post ’cause the first one wasn’t showing up.

      Thanks.

    11. Tiago
      May 15th, 2008 - 09:40

      X-Sparker
      I’ve sent you an email about it, you just need to change line 22 to:

      time=this._parent.sound_mc.sound_obj.position/1000;
    12. X-Sparker
      May 16th, 2008 - 01:34

      um… I tried… doesn’t really work… it only made the sec become undefined.

      I tried to fix it myself, I realized you probably meant line 20 where it was just time=sound_obj.position/1000;
      (maybe our version of flash has different actionscript placement) so I moved it there but it doesn’t do anything either.

      oh well, other than that the volume bar works great and I’m starting on the progress bar

    13. pipesfranco
      May 30th, 2008 - 10:38

      Hi Tiago,

      Awesome work, full respect to you.

      Is it possible to get the scrolling text to reset at the right when a new track is loaded, at present it just changes the name at its current scroll point from the last track?

      Hope that makes sense.

      Many Thanks

      Pipesfranco

    14. Liz
      June 6th, 2008 - 21:21

      Making playHead scrub across Loader is presenting a challenge. Following the logic used in the volume slider part of the tutorial, I was able to set up the playHead so it is draggable, but I’ve had no luck in actually getting it to effect the sound position and time display text. Can you tell me how to make it happen? Thanks! Great Tutorial. This is my first dive into ActionScript of this caliber and you’ve made it very straight forward, I’m learning more than I thought I would.

    15. Christie
      June 9th, 2008 - 07:08

      Hi Tiago,

      I just wanted to say that you are amazing! Thank you so much for sharing this tutorial! I have taught myself everything I know about flash and was pulling my hair out when a client asked me to build a custom flash music player for their site. I looked everywhere for help and was just about to give up when I found your site and this article. So again, Thank you! Thank you! Thank you! You truly are a life saver… and a hair saver ;-)

      Christie

    16. Sam
      June 9th, 2008 - 10:52

      Hey dude, Awesome tutorial mate :D

      Just to let you know, I have used it on a website I am
      producing at college, and there is a show on Saturday :D
      So i’ll put your name somewhere on the MP3 Player,
      because that is a part of my website gratz :D

      I am facing a little problem. I have gotten rid of this code
      because I could not figure how to fix it.

      function timer(sound_obj) {
      time=sound_obj.position/1000;
      min=Math.floor(time/60);
      min=(min%lt;10)?"0"+min:min;
      sec=Math.floor(time%60);
      sec=(sec<10)?"0"+sec:sec;
      timeDisplay_txt.text=min+":"+sec;
      }

      error returned is

      **Error** Symbol=Page: Music, layer=Actions, frame=1:Line 25: Operator '%' must be followed by an operand
      min=(min%lt;10)?"0"+min:min;

      **Error** Symbol=Page: Music, layer=Actions, frame=1:Line 27: Unexpected 'lt' encountered
      sec=(sec<10)?"0"+sec:sec;

      Total ActionScript Errors: 2 Reported Errors: 2

      The Code im using is

      function timer(sound_obj) {
      time=sound_obj.position/1000;
      min=Math.floor(time/60);
      sec=Math.floor(time%60);
      timeDisplay_txt.text=min+":"+sec+sec;
      if (min < 1)
      {
      timeDisplay_txt.text=("0"+":"+sec)
      }
      }

      But the time shows up as 0:1 0:2 – - – 1:1 and so on.

      Any help appreciated mate :D Cheers

    17. Rup
      July 18th, 2008 - 09:19

      Hi Tiago

      I want to add a scrollbar in the tracklist, (part3 of the tutorial) for more than 4 songs, can you please help?

    18. jomo
      July 19th, 2008 - 03:54

      Hey Tiago, love the mp3 player. Have a small problem. I want to put the player on my myspace page. When I do….. it just say’s loading… What should I change in the actionscript & xml file to call the mp3s? Thanks!

    19. dani
      July 21st, 2008 - 18:29

      nice work!!

      hello my name is daniel and i have a question to this tutorial.

      how i can make like this on the time line ====> 00:00:00 houers ,min, sec

      thanks to all user.

    20. Bob
      July 29th, 2008 - 23:14

      Hi!

      Well done! I’m definitely going to use this script!
      Does anyone know whether there’s a certain way in which I can give my site-visitors the opportunity to start playing a song, by clicking on an ordinary html-link (it might be necessary to use JavaScript?)?

      Regards, Bob

    21. robert bell
      August 12th, 2008 - 07:37

      First off Thiago you are the man and have created a great player. Everything is working for me fine the only issue i Have is trying to have the title of the track scroll across if the title is too long. I search through the comments and couldnt find any info, maybe im just blind. Can anyone help out if you get a chance.

    22. Beth
      August 19th, 2008 - 16:31

      Cool!! Really easy to install, works great. U R GREAT!! Thanks.

    23. Tiago
      August 21st, 2008 - 00:15

      Thank you all for the great comments :)

    24. vladimir
      September 7th, 2008 - 20:25

      Hey Tiago,

      Really cool thing. Local everything works, but when I put the code online, it opens my player.swf, but doesn’t load
      playlist.xml and the songs. All these files are in folder named PLAYER. I would really appreciate your help.

      By the way, I used the 2nd Player, really nice stuff.

      Greets
      Vlad

    25. vladimir
      September 13th, 2008 - 04:32

      Hey Tiago,

      Great stuff, I menage to install it and rewrite the code (just a bit), but I wanted to ask you
      how could I add the toogle function, so I could in a way jump to certain points of the songs.
      I would really appreciate your help on this. I tried with tutorial part nr.3, but the bar there is
      just loading, not reacting to mouse.

      greets
      vlad

      stop();
      playlist = new XML();
      playlist.ignoreWhite = true;
      playlist.onLoad = function(success) {
      if (success) {
      _global.songname = [];
      _global.songband = [];
      _global.songfile = [];
      for (var i = 0; i<playlist.firstChild.childNodes.length; i++) {
      _global.songname[i] = playlist.firstChild.childNodes[i].attributes.name;
      _global.songband[i] = playlist.firstChild.childNodes[i].attributes.band;
      _global.songfile[i] = playlist.firstChild.childNodes[i].attributes.file;
      //trace(songname[i]+” “+songfile[i]+” “+songband[i]);
      }
      }
      createEmptyMovieClip(“sound_mc”, 1);
      _global.song_nr = random(songfile.length);
      sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
      };
      function timer(sound_obj) {
      time = sound_obj.position/1000;
      min = Math.floor(time/60);
      min = (min<10) ? “0″+min : min;
      sec = Math.floor(time%60);
      sec = (sec0) {
      delete this.onEnterFrame;
      this._parent.display_txt.text = name+” / “+band;
      timeInterval = setInterval(timer, 1000, this.sound_obj);
      } else {
      this._parent.display_txt.text = “loading…”;
      }
      };
      this.sound_obj.onSoundComplete = function() {
      clearInterval(timeInterval);
      this._parent.timeDisplay_txt.text = “00:00″;
      (song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++;
      sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
      };
      };
      btn_play.onRelease = function() {
      clearInterval(timeInterval);
      this._root.timeDisplay_txt.text = “00:00″;
      this._parent.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
      };
      btn_stop.onRelease = function() {
      clearInterval(timeInterval);
      this._root.timeDisplay_txt.text = “00:00″;
      this._parent.sound_mc.sound_obj.stop();
      };
      btn_fw.onRelease = function() {
      clearInterval(timeInterval);
      this._parent.timeDisplay_txt.text = “00:00″;
      (song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++;
      sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
      };
      btn_rev.onRelease = function() {
      clearInterval(timeInterval);
      this._parent.timeDisplay_txt.text = “00:00″;
      (song_nr == 0) ? _global.song_nr=songfile.length-1 : _global.song_nr–;
      sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
      };
      playlist.load(“stuff/playlist.xml”);

    26. Dan
      October 3rd, 2008 - 14:23

      Hi there mate, firstly excellent little player, ive been using on my website and everyone loves it. Im having trouble with the code, trying to adjust the volume so that is not too loud when you load the page, the songs just blast out at you. I see from a previous post your supposed to add this line

      _root.sound_mc.sound_obj.setVolume(50);

      to reduce it to half, but still blasting out at full, i even tried moving the adjuster to halfway but still comes out full? What am i doing wrong? im using flash 8 with actionscript 2.

      Thanks
      Dan

    27. Dan
      October 3rd, 2008 - 14:30

      sorry think i may have resolved it, i think its because i forgot to add { before and } after.

      Thanks
      Dan

    28. Derex
      October 6th, 2008 - 14:04

      Hi Tiago…. Good work but I have a question. How do I set the music player to play only 30 second clips of music and then go to the next track automatically?

    29. Derex
      October 6th, 2008 - 14:06

      Hi Tiago…. Good work but I have a question. How do I set the music player to play only 30 second clips of music and then go to the next track automatically? —Sorry, i did not add my mail in the earlier comment—-

    30. Rathin
      March 26th, 2009 - 12:23

      Hi How do I set the music player to play clips of music on mouse click on the name in a play list and it shows the name of the Artist and Album, etc.

    31. Rathin
      March 26th, 2009 - 12:24

      Hi How do I set the music player to play clips of music on mouse click on the name in a play list and it shows the name of the Artist and Album, etc.

    32. Leo
      April 18th, 2009 - 16:46

      hey, nice tutorial, but the .zip file is corrupted, can you fix it?

    34. Rathin
      April 19th, 2009 - 06:50

      Hi, I am grateful for your kind instruction and now I can see the photos of the artists whenever I click on the text (button template). I have been trying to replace the play and stop buttons with a pausePlay toggle button. I think I need a script to trigger the PausePlay button. I need your help to implement it. Kindly do the needful.
      Thank you.

    35. shawn
      May 11th, 2009 - 04:18

      Great tutorial,
      I noticed part one didn’t auto start the songs, but part 2 works perfectly. Interesting restructure.
      Thanks you so much.
      question,
      I’ve condensed your audioPlayer into its own movieclip and am trying to integrate it into a flash website. I notice the music stays playing even when the root timeline advances to another frame. However when this happens, I’ve noticed that I loose all audioPlayer control even when I navigate back to the ‘music’ frame containing the audioPlayer_mc. I realize I could kill the music as soon as the frame is advanced, but I think it’d be cool to keep the music going and regain audioPlayer control whenever that frame is called again. Is this possible? do you need to see the project?

    36. Anonymous
      May 11th, 2009 - 17:32

      Hi there, I have just about everything up and running except the mp3s haha. I’m having trouble with the file=”" part of the music information. I have put the entire piece of file up to the hard drive e.g C:/Lance/documents/music/flash project/audioplayer…etc. When I test my flash movie I get an “error opening file” occuring. How do I adjust the file name to get it to work? Any help would be much appreciated.

    37. Lance X
      May 11th, 2009 - 17:33

      Hi there, I have just about everything up and running except the mp3s haha. I’m having trouble with the file=”" part of the music information. I have put the entire piece of file up to the hard drive e.g C:/Lance/documents/music/flash project/audioplayer…etc. When I test my flash movie I get an “error opening file” occuring. How do I adjust the file name to get it to work? Any help would be much appreciated.

    38. Marc
      June 13th, 2009 - 17:55

      Top notch tutorial! Is there anyway to get the audio to be stopped initially, then activated by the user when they hit the play button?

    39. Tiago
      June 17th, 2009 - 01:22

      Hi Marc, please check the comments on this tutorial, it has been explained several times.
      Thanks
      Tiago

    40. poach
      June 18th, 2009 - 20:32

      Hey Tiago, excellent tutorial, and wonderfully designed player!
      I’ve totally got it to work, however when I post the player to the index page of my site, I just cant get it to load.
      Any ideas as to what I’m doing wrong?

    41. James
      July 27th, 2009 - 23:13

      function timer(sound_obj) {
      time=sound_obj.position/1000;
      min=Math.floor(time/60);
      min=(min%lt;10)?”0″+min:min;
      sec=Math.floor(time%60);
      sec=(sec<10)?”0″+sec:sec;

      Lol there is no error its the html
      function timer(sound_obj) {
      time=sound_obj.position/1000;
      min=Math.floor(time/60);
      min = (min<10) ? "0"+min : min
      sec=Math.floor(time%60);
      sec=(sec < 10) ? "0"+sec:sec;

    42. pedropolar
      September 25th, 2009 - 22:59

      Hi the mp3 player it´s great but ¿how can i add a pause button?

      thanks a lot

    43. Johnyboy
      October 20th, 2009 - 16:22

      Hello. Great script you have got here. You deserve much praise for releasing the source files too! You are a great help for someone like me who can not get the hang of program.

      One thing though, Would it be possible to keep playing the songs in a random order when you click the next button?

      John.

    44. Lano
      November 9th, 2009 - 07:32

      thanks for the tutorial!

      everything in the first part of the tutorial works fine.
      now – after the second part nothing works at all:
      1. the “prev” and the “next” buttons can’t be clicked anymore…just useless pictures!
      2. the timer doesn’t work in any way – still shows 00:00
      3. the volume dragger doesn’t stop at the end of volBG (well the left end of the dragger ends there but the rest of the dragger reaches over the end of volBG on the right side!)

      and the funny thing: i don’T get any error messages in flash!?!?? what a joke…

      all together: very frustrating :-(

      i really appreciate people who share their knowledge with others but: it should be made correctly. i know there will be people who say i might be to stupid to handle it…so it must be my fault…but if i was perfect in flash and actionscript there would be no need for me to do this tutorial. just sad that this one doesn’t work out correctly. and i have to admit that i did several tutorials before this one and i finished all of them succesfully.

      and by the way: the .fla can’t be opened in adobe flash cs4 (so it’s hard to find any mistakes)

      and: copying the complete code from above doesn’t change anything…

      oh man…it’s so sad…. :-(

    45. Shashi
      December 1st, 2009 - 09:31

      You are great,

      Thank you very much for share with all

    « Older Comments

    Trackbacks are disabled.

    Tiago’s Weblog » Flash MP3 player tutorial galore
    » Blog Archive » links for 2008-05-04
    logo
    Adobe Community Professional
    Adobe Community Expert

    BlogRoll

    Resources

    Respect