How To Code A Full Functional MP3 Player Using ActionScript 3.0

Aug 30, 2009 113 Comments by

Hi there, this is a continuation of our last tutorial where we designed the interface for an mp3 player using flash only. In case you missed the tutorial you can find it here.

however, I did not include the mp3s in the file and you will need to make changes to the XML files to suite your tracks.

In this tutorial we will take you through the coding phase and show you how our design will be transformed to a full functional mp3 player. Let’s start.

Declaring Necessary Variables

Open the flash file created in our design mp3 tutorial and add a new layer called actions. Lock this layer and while in the first key frame press F9 to bring actionscript panel forward. We will start by declaring the variables that we are going to use in our script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// rewind and fast forward rate
const SEARCH_RATE:int = 1500;
// XML file that holds reference to the mp3 files and used to load the tracks
const XML_FILE:String = "tracks.xml";

var index:Number = 0;
var trackPos:Number = 0;
var trackOn:Boolean = false;
var trackXML:XML;
var trackList:XMLList;
var urlRequest:URLRequest;
var urlLoader:URLLoader;
var track:Sound = new Sound;
var newTrack:Sound;
var newUrlRequest:URLRequest;
var chan:SoundChannel = new SoundChannel;
var context:SoundLoaderContext = new SoundLoaderContext(7000, false);

First we create a new Sound object called track and then we initiate some variables that we will require to keep trail of the mp3 file that is being played. Then we define more variables that we will use in our code; these variables include the SoundChannel object.

For our mp3 player, we will be using an XML file to load our tracks. So create a simple xml file named tracks.xml and save it in the same place where your swf and fla files are located. This will be used to store the mp3 information such as track title, track performer, album…etc. mine looks like this. It is ok if yours is different as long as you know how to call the information appropriatley then you are fine, but I recommend you use the same structure to make sure everything works as described:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="ISO8859-1" ?>
<file>
<track>
<title>title 1</title>
<performer>Performer 1</performer>
<path>http://flashjourney.com/wp-content/uploads/mp3_demo/track1.mp3</path>
</track>
<track>
<title>title 2</title>
<performer>Performer 2</performer>
<path>http://flashjourney.com/wp-content/uploads/mp3_demo/track2.mp3</path>
</track>
<track>
<title>title 3</title>
<performer>Performer 3</performer>
<path>http://flashjourney.com/wp-content/uploads/mp3_demo/track3.mp3</path>
</track>
</file>

now we need to be able to access the xml file but first we will load it and then check whether the loading action is complete so type the following after you variables declarations:

1
2
3
4
5
6
// create a new URLRequest object and use to reference the XML file
urlRequest = new URLRequest(XML_FILE);
// create a new URLLoader object to load the XML file
urlLoader = new URLLoader(urlRequest);
urlLoader.addEventListener(Event.COMPLETE, onceLoaded);
urlLoader.load(urlRequest);

Don’t test the movie yet if you do you will get an error because we didn’t create onceLoaded function yet, that’s our checking function. The function is added now

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function onceLoaded(e:Event):void {
trackXML = new XML(e.target.data);
trackList = trackXML.track;
urlRequest = new URLRequest(trackList[index].path);

// handle the track downloading process
track.addEventListener(Event.COMPLETE, trackCompleteHandler);
track.addEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
track.load(urlRequest, context);
chan = track.play(trackPos);

// listen to SOUND_COMPLETE event to play next track when the current track has finished playing
chan.addEventListener(Event.SOUND_COMPLETE, playNext);
}

}

This function checks to see if the xml file has completely loaded and then loads the information to our mp3 player.

Displaying Track Information

In order to display track info we need to create some text areas so create two new layers named performer info and title info, respectively and grab the text tool and create two dynamic text areas with Arial type and 11 px. Call the first one performer_txt and second title_txt. This is crucial in order for the code to work properly. Keep each text area in its own layer.

We also need to add some coding to our functions in order to display the text when the mp3 player starts playing or next and previous track is selected. We will add the following code in various functions as detailed in the following sections.

1
2
3
title_txt.text = trackList[index].title;

performer_txt.text = trackList[index].performer;

The following functions are called when the track is being downloaded and when the download process is completed. These are used to display meaningful information on the mp3 player while downloading the track. Once the downloading process has completed; track information that include title and performer are displayed on the mp3 player.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function trackCompleteHandler(e:Event):void{
trackOn = true;
title_txt.text = trackList[index].title;
performer_txt.text = trackList[index].performer;

e.target.removeEventListener(Event.COMPLETE, trackCompleteHandler);
e.target.removeEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
}

function trackProgressHandler(pe:ProgressEvent):void{
var percent:int = (pe.target.bytesLoaded / pe.target.bytesTotal) * 100;
performer_txt.text = "Loading...";
title_txt.text = percent + "%";
}

Adding Functionality to Play Button

Using the instances of buttons created in the previous tutorial we add this to make the buttons respond to our clicking events, the first one is play button:

1
play_mc.addEventListener(MouseEvent.CLICK, playTrack);

Then add the playTrack function that will enable you to play the mp3 when the event of clicking play button as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
function playTrack(e:MouseEvent):void {
if (!trackOn) {
newUrlRequest = new URLRequest(trackXML.track[index].path);
newTrack = new Sound;
newTrack.addEventListener(Event.COMPLETE, trackCompleteHandler);
newTrack.addEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
newTrack.load(newUrlRequest, context);
chan = newTrack.play(trackPos);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);

play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
}
}

Now you if you test the movie you will be able to hear your first track play when you click the play button. I’m excited already, you?

Adding Functionality to Stop Button

But what if we wanted to the sound to stop? This is where the stop button becomes handy and we do that by adding the following line of code after:

1
2
3
4
5
6
7
8
9
10
11
12
stop_mc.addEventListener(MouseEvent.CLICK, stopTrack);

function stopTrack(e:MouseEvent):void {
if (trackOn) {
chan.stop();
trackPos = 0;
trackOn = false;
play_mc.visible = true;

play_mc.addEventListener(MouseEvent.CLICK, playTrack);
}
}

Adding Functionality to Next Button

Now we want to enable our mp3 player to jump to another track, because the track we are listening to might be too boring or we are sick of it, after repeatedly listening to it while testing the movie. We do that by adding this code that targets the next button:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
next_mc.addEventListener(MouseEvent.CLICK, nextTrack);

function nextTrack(e:MouseEvent):void {
if (index < trackList.length() - 1) {
index++;
}
else {
index = 0;
}

trackPos = 0;
chan.stop();
newUrlRequest = new URLRequest(trackList[index].path);
newTrack = new Sound;
newTrack.addEventListener(Event.COMPLETE, trackCompleteHandler);
newTrack.addEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
newTrack.load(newUrlRequest, context);
chan = newTrack.play(trackPos);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);

track = newTrack;
play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
}

Adding Functionality to Previous Button

Maybe we changed our minds and we want to go back to the same track so what do we do? we add the next lines of code to enable the previous button:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
prev_mc.addEventListener(MouseEvent.CLICK, prevTrack);

function prevTrack(e:MouseEvent):void {
if (index > 0) {
index--;
}
else {
index = trackList.length() - 1;
}

trackPos = 0;
chan.stop();
newUrlRequest = new URLRequest(trackList[index].path);
newTrack = new Sound;
newTrack.addEventListener(Event.COMPLETE, trackCompleteHandler);
newTrack.addEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
newTrack.load(newUrlRequest, context);
chan = newTrack.play(trackPos);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);

track = newTrack;
play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
}

Adding Functionality to Pause Button

We also want to be able to pause tracks whenever we want. That’s achieved by adding the following code to our action panel;

1
2
3
4
5
6
7
8
9
10
11
pause_mc.addEventListener(MouseEvent.CLICK, pauseTrack);

function pauseTrack(e:MouseEvent):void {
if (trackOn) {
trackPos = chan.position;
chan.stop();
play_mc.visible = true;
play_mc.addEventListener(MouseEvent.CLICK, playTrack);
trackOn = false;
}
}

Adding Functionality to Fast-forward and Rewind Buttons

As it is, your player is already fully functional but we also want to add a fast-forward and rewind functionality to our player. We can add these features by adding the following lines of code in the actionscript panel. First the fast-forward functionality:

1
2
3
4
5
6
7
8
9
10
11
ffwrd_mc.addEventListener(MouseEvent.CLICK, ffwrdTrack);

function ffwrdTrack(e:MouseEvent):void {
if (trackOn) {
trackPos = chan.position;
chan.stop();
chan.removeEventListener(Event.SOUND_COMPLETE, playNext);
chan = track.play(trackPos + SEARCH_RATE);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);
}
}

and the code for enabling rewind functionality is as follows:

1
2
3
4
5
6
7
8
9
10
11
rewind_mc.addEventListener(MouseEvent.CLICK, rwndTrack);

function rwndTrack(e:MouseEvent):void {
if (trackOn) {
trackPos = chan.position;
chan.stop();
chan.removeEventListener(Event.SOUND_COMPLETE, playNext);
chan = track.play(trackPos - SEARCH_RATE);

}
}

It is important to add play next function to our fastforward button so that when the track reach the end next track starts, so make changes to ffwrdTrack function as shown by adding chan.addEventListener(Event.SOUND_COMPLETE, playNext); and add the following playNext function as well:

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
function rwndTrack(e:MouseEvent):void {
if (trackOn) {
trackPos = chan.position;
chan.stop();
chan.removeEventListener(Event.SOUND_COMPLETE, playNext);
chan = track.play(trackPos - SEARCH_RATE);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);
}
}

function playNext(e:Event):void {

if (index < trackList.length() - 1) {
index++;
}
else {
index = 0;
}
trackPos = 0;
chan.stop();
chan.removeEventListener(Event.SOUND_COMPLETE, playNext);
newUrlRequest = new URLRequest(trackList[index].path);
newTrack = new Sound;
newTrack.addEventListener(Event.COMPLETE, trackCompleteHandler);
newTrack.addEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
newTrack.load(newUrlRequest, context);
chan = newTrack.play(trackPos);

track = newTrack;
play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
}

where necessary in playTrack, nextTrack, prevTrack, and playNext functions. The complete code after re-arranging and adding  is shown below:

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
// rewind and fast forward rate
const SEARCH_RATE:int = 1500;
// XML file that holds reference to the mp3 files and used to load the tracks
const XML_FILE:String = "tracks.xml";

var index:Number = 0;
var trackPos:Number = 0;
var trackOn:Boolean = false;
var trackXML:XML;
var trackList:XMLList;
var urlRequest:URLRequest;
var urlLoader:URLLoader;
var track:Sound = new Sound;
var newTrack:Sound;
var newUrlRequest:URLRequest;
var chan:SoundChannel = new SoundChannel;
var context:SoundLoaderContext = new SoundLoaderContext(7000, false);

// create a new URLRequest object and use to reference the XML file
urlRequest = new URLRequest(XML_FILE);
// create a new URLLoader object to load the XML file
urlLoader = new URLLoader(urlRequest);
urlLoader.addEventListener(Event.COMPLETE, onceLoaded);
urlLoader.load(urlRequest);

function onceLoaded(e:Event):void {
trackXML = new XML(e.target.data);
trackList = trackXML.track;
urlRequest = new URLRequest(trackList[index].path);
track.addEventListener(Event.COMPLETE, trackCompleteHandler);
track.addEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
track.load(urlRequest, context);
chan = track.play(trackPos);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);
}

function trackCompleteHandler(e:Event):void{
trackOn = true;
title_txt.text = trackList[index].title;
performer_txt.text = trackList[index].performer;

e.target.removeEventListener(Event.COMPLETE, trackCompleteHandler);
e.target.removeEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
}

function trackProgressHandler(pe:ProgressEvent):void{
var percent:int = (pe.target.bytesLoaded / pe.target.bytesTotal) * 100;
performer_txt.text = "Loading...";
title_txt.text = percent + "%";
}

play_mc.addEventListener(MouseEvent.CLICK, playTrack);
stop_mc.addEventListener(MouseEvent.CLICK, stopTrack);
next_mc.addEventListener(MouseEvent.CLICK, nextTrack);
prev_mc.addEventListener(MouseEvent.CLICK, prevTrack);
pause_mc.addEventListener(MouseEvent.CLICK, pauseTrack);
ffwrd_mc.addEventListener(MouseEvent.CLICK, ffwrdTrack);
rewind_mc.addEventListener(MouseEvent.CLICK, rwndTrack);

function playTrack(e:MouseEvent):void {
if (!trackOn) {
newUrlRequest = new URLRequest(trackXML.track[index].path);
newTrack = new Sound;
newTrack.addEventListener(Event.COMPLETE, trackCompleteHandler);
newTrack.addEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
newTrack.load(newUrlRequest, context);
chan = newTrack.play(trackPos);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);

play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
}
}

function stopTrack(e:MouseEvent):void {
if (trackOn) {
chan.stop();
trackPos = 0;
trackOn = false;
play_mc.visible = true;

play_mc.addEventListener(MouseEvent.CLICK, playTrack);
}
}

function nextTrack(e:MouseEvent):void {
if (index < trackList.length() - 1) {
index++;
}
else {
index = 0;
}

trackPos = 0;
chan.stop();
newUrlRequest = new URLRequest(trackList[index].path);
newTrack = new Sound;
newTrack.addEventListener(Event.COMPLETE, trackCompleteHandler);
newTrack.addEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
newTrack.load(newUrlRequest, context);
chan = newTrack.play(trackPos);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);

track = newTrack;
play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
}

function prevTrack(e:MouseEvent):void {
if (index > 0) {
index--;
}
else {
index = trackList.length() - 1;
}

trackPos = 0;
chan.stop();
newUrlRequest = new URLRequest(trackList[index].path);
newTrack = new Sound;
newTrack.addEventListener(Event.COMPLETE, trackCompleteHandler);
newTrack.addEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
newTrack.load(newUrlRequest, context);
chan = newTrack.play(trackPos);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);

track = newTrack;
play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
}

function pauseTrack(e:MouseEvent):void {
if (trackOn) {
trackPos = chan.position;
chan.stop();
play_mc.visible = true;
play_mc.addEventListener(MouseEvent.CLICK, playTrack);
trackOn = false;
}
}

function ffwrdTrack(e:MouseEvent):void {
if (trackOn) {
trackPos = chan.position;
chan.stop();
chan.removeEventListener(Event.SOUND_COMPLETE, playNext);
chan = track.play(trackPos + SEARCH_RATE);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);
}
}

function rwndTrack(e:MouseEvent):void {
if (trackOn) {
trackPos = chan.position;
chan.stop();
chan.removeEventListener(Event.SOUND_COMPLETE, playNext);
chan = track.play(trackPos - SEARCH_RATE);
chan.addEventListener(Event.SOUND_COMPLETE, playNext);
}
}

function playNext(e:Event):void {

if (index < trackList.length() - 1) {
index++;
}
else {
index = 0;
}
trackPos = 0;
chan.stop();
chan.removeEventListener(Event.SOUND_COMPLETE, playNext);
newUrlRequest = new URLRequest(trackList[index].path);
newTrack = new Sound;
newTrack.addEventListener(Event.COMPLETE, trackCompleteHandler);
newTrack.addEventListener(ProgressEvent.PROGRESS, trackProgressHandler);
newTrack.load(newUrlRequest, context);
chan = newTrack.play(trackPos);

track = newTrack;
play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
}

Adding Spectrum

Our last task is to create a spectrum ……

Create a new layer and call it spectrum then press F8 to create a new empty movie clip call it spectrum. In the editing mode of this newly created movie clip name the first layer rectangle and the second actions. Draw a rectangle 40px wide and 18px high that we’ll use as a guide, so right click the rectangle layer and select Guide. Now add the following code. This is taken from the help file modified a little bit to suite our mp3 player:

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
addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(event:Event):void {

var bytes:ByteArray = new ByteArray();

const PLOT_HEIGHT:int = 9;

const CHANNEL_LENGTH:int = 20; //256;

SoundMixer.computeSpectrum(bytes, false, 0);

var g:Graphics = this.graphics;

g.clear();

g.lineStyle(0, 0xFF9933);

g.beginFill(0xFF9933);

g.moveTo(0, PLOT_HEIGHT);

var n:Number = 0;

for (var i:int = 0; i < CHANNEL_LENGTH; i++) {

n = (bytes.readFloat() * PLOT_HEIGHT);

g.lineTo(i * 2, PLOT_HEIGHT - n);

}

g.lineTo(CHANNEL_LENGTH * 2, PLOT_HEIGHT);

g.endFill();

g.lineStyle(0, 0xFF9933);

g.beginFill(0xFF9933, 0.5);

g.moveTo(CHANNEL_LENGTH * 2, PLOT_HEIGHT);

for (i = CHANNEL_LENGTH; i > 0; i--) {

n = (bytes.readFloat() * PLOT_HEIGHT);

g.lineTo(i * 2, PLOT_HEIGHT - n);

}

g.lineTo(0, PLOT_HEIGHT);

g.endFill();

}

Back in the main time line just position the empty movie clip where it should and your player should work perfectly. Let me know if you have problems. Later I will upload the files for downloads.

That concludes our tutorial I hope it was clear and helpful to all who want to create fully functional mp3 players. Of course there are more features that can be added to make this player even better, such as track list, elapsed time, mute button, skin color button…etc. but for now this should be sufficient enough. I hope you enjoyed and please leave your comments.

Thank you for reading. More flash and actionscript tutorial via twitter, follow me here j000-avatar-sm

ActionScript-tuts, Featured, Flash-tuts

About the author

A designer wanna be who wants to quit day job to become a full time blogger and web designer. I also like to watch TV and movies a lot.

113 Responses to “How To Code A Full Functional MP3 Player Using ActionScript 3.0”

  1. j000 says:
    October 2, 2009 at 4:44 pm

    Ok I managed to fix all the bugs that were created by Color Code and WP visual/html mode. It’s best to use the code in the attached file.

    Guys I noticed that a lot of you have no Gravatars click this create your gravatar so your comments can look nice with your pic or avatar :)

  2. Erika Nilsson says:
    October 5, 2009 at 4:44 am

    Hi,
    Thanks for a very detailed tutorial!
    I seem to have some trouble getting the player to work, though. I get as far as adding the playTrack function (just copying and pasting code), and the script starts throwing “A term is undefined and has no properties” errors.

    If it makes any difference, this is what it says:
    TypeError: Error #1010: A term is undefined and has no properties.
    at Player_fla::MainTimeline/onceLoaded()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

    And when pressing the play button,
    TypeError: Error #1010: A term is undefined and has no properties.
    at Player_fla::MainTimeline/playTrack()

    Any ideas for what might be causing this? I’m running CS4 and my knowledge of ActionScript is rather limited, to say the least.

    • Erika Nilsson says:
      October 5, 2009 at 4:47 am

      Gah, please ignore the comment above. I had made a silly typo in the xml file – just like me to go blame someone else when it’s really my sleepiness that’s the culprit. :)

      Again, thanks for a great tutorial!!

  3. sami says:
    October 6, 2009 at 5:49 pm

    hi
    thanks for a great tutorial, and by the looks of it some very helpful comments/answers too. Thats really great. best flash mp3 tutorial I have found (despite no volume control), I guess I’ll try and squeeze one into my player bymyself.

    Sami

  4. johan nielsen says:
    October 11, 2009 at 3:31 pm

    Hey there,

    There is a Type0 in the stop button part.
    frame 1 line 76

    ffunction stopTrack(e:MouseEvent):void

    should be

    function stopTrack(e:MouseEvent):void

    :D

  5. johan nielsen says:
    October 11, 2009 at 4:52 pm

    Hi again,

    I get an error when i add the title, performer function.

    if i leave the function open like this:

    title_txt.text = trackList[index].title;

    performer_txt.text = trackList[index].performer;

    i get this error:

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at vtp_fla::MainTimeline/frame1()

    if i close it like this:

    title_txt.text = trackList[index].title;

    performer_txt.text = trackList[index].performer;

    }

    i get this error

    Frame 1 Line 244 1087: Syntax error: extra characters found after end of program.

    you then write:

    where necessary in playTrack, nextTrack, prevTrack, and playNext functions. The complete code after re-arranging and adding is shown below:

    I am not sure what you mean here, but if i add the complete code i will end up with a 9-10 line error log. It refers to alot of funktion duplicates and extra characters. Any ideas?

  6. johan nielsen says:
    October 11, 2009 at 6:27 pm

    if you are interested, i can forward the project files for you to evaluate?
    Send me a email if this is the case.

    Have a great Sunday :)

    johan

    • j000 says:
      October 11, 2009 at 7:27 pm

      Give me some time and I’ll come back to your problem but for now please use the code included in the attachment because I tested it and it works on both CS3 and CS4. You can send me the project at this email aljufaily@gmail.com

  7. johan nielsen says:
    October 11, 2009 at 8:56 pm

    By the way, inserting the code from your finished project into my own work swell.

    Very good tutorial and you have been stumbled with two thumbs up :)

    • j000 says:
      October 11, 2009 at 9:04 pm

      I’m glad it’s working fine for you and thanks for the comments and thumbs up. Spread the word more tutorials and inspiration coming your way :)

  8. Kopp says:
    October 21, 2009 at 5:40 am

    Hi,

    I was just wondering if it is possible do make the player change to the next song automatically. Just like a play list.
    I’ve try something like this :

    chan.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete);
    // This onPlaybackComplete fires off when tracks finish playing
    function onPlaybackComplete(e:MouseEvent):void {
    if (index < trackList.length() – 1) {
    index++;
    }else{
    index = 0;
    }
    chan.stop();
    newUrlRequest = new URLRequest(trackList[index].path);
    newTrack = new Sound(newUrlRequest);
    chan = newTrack.play();
    play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
    trackOn = true;
    track = newTrack;
    title_txt.text = trackList[index].title;
    performer_txt.text = trackList[index].performer;
    }

    and it didn't work :(

    Solutions?
    Thanks a lot. And this is the XML player tutorial on the net.

    Kopp

  9. Kopp says:
    October 21, 2009 at 5:40 am

    Hi,

    I was just wondering if it is possible do make the player change to the next song automatically. Just like a play list.
    I’ve tried something like this :

    chan.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete);
    // This onPlaybackComplete fires off when tracks finish playing
    function onPlaybackComplete(e:MouseEvent):void {
    if (index < trackList.length() – 1) {
    index++;
    }else{
    index = 0;
    }
    chan.stop();
    newUrlRequest = new URLRequest(trackList[index].path);
    newTrack = new Sound(newUrlRequest);
    chan = newTrack.play();
    play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
    trackOn = true;
    track = newTrack;
    title_txt.text = trackList[index].title;
    performer_txt.text = trackList[index].performer;
    }

    and it didn't work :(

    Solutions?
    Thanks a lot. And this is the XML player tutorial on the net.

    Kopp

  10. Bad Daddy says:
    October 25, 2009 at 9:54 am

    The sound wave is a nice touch-
    thanks for the great work!

  11. casio says:
    October 29, 2009 at 9:25 am

    How would I got about making the tracks buffer instead of having to load them all?
    -Mike

  12. Backslider says:
    November 1, 2009 at 4:42 pm

    How about loading the player using javascript? Any pointers with doing this?

    • j000 says:
      November 1, 2009 at 6:36 pm

      Maybe that can be done but I’m fairly new to the world of design and development and never touched javascript yet

  13. TREVOR GODINHO | PHOTOGRAPHER says:
    November 4, 2009 at 9:36 am

    hi j000 im currently in building my new website in flash. and i love your tutorial on the player its hard to find a good one on the web and ive been looking for a month. the problem im having is that i cant get the track to auto play once the first track is done.. what actionscript function should i use

  14. William says:
    November 5, 2009 at 9:03 am

    Hi. I was just wondering if there was a way to make the player go to the next track when one track is finished playing (just like a playlist). This is an amazing tutorial, but I am only using the play, pause, previous and next buttons, if that makes a difference. I am using this in a school project and could REALLY use some help. Any help is appreciated. I have it set up already so that it autoplays the first track when loaded.

    • j000 says:
      November 5, 2009 at 9:41 am

      Hi william I think I need to update the code that’s posted in the tutorial because the player does allow for next track to start once the previous is finished. You can check the demo or download the complete code here http://flashjourney.com/wp-content/uploads/2009/08/Creating-Simple-MP3-Player.rar the function you need to add to play.mc button is playNext function. See code available in downloaded file.

      • William says:
        November 5, 2009 at 9:52 am

        I guess what I was getting at is how do I reference that?

        Here is my code now:

        play_mc.addEventListener(MouseEvent.CLICK, playTrack);
        function playTrack(e:MouseEvent):void {
        if (!trackOn) {
        newUrlRequest = new URLRequest(trackXML.track[index].path);
        newTrack = new Sound(newUrlRequest);
        chan = newTrack.play(trackPos);
        play_mc.removeEventListener(MouseEvent.CLICK, playTrack);
        trackOn = true;
        title_txt.text = trackList[index].title;
        performer_txt.text = trackList[index].performer;
        }
        }

        I have the playNext function at the bottom of the code (copied and pasted from the sample document), I just don’t exactly know how to reference it since I am still new at actionscript. Thanks for all of your help!

  15. Joe Vasey says:
    November 10, 2009 at 4:16 pm

    Is there any way to have the fast forward and rewind continue to move while the mouse button is being held down. It seems you have to keep clicking it to keep the track moving forwards or backwards. When I remove the fastforward and rewind buttons to slim down the player the playNext function stops working. Is there any way to correct this? You are so awesome for helping out with such knowledge and tutorial. It seems I am having the same issues as William.

  16. Sebastian says:
    November 15, 2009 at 12:37 am

    Hi…..Really great player…Just one question though….Does the title scroll, or did i make a mistake in the script somewhere? …Thanks!

  17. Minable says:
    November 24, 2009 at 6:50 am

    To get the player to jump to the next track once the previous has finished, I added this to the last line of the playTrack function:

    chan.addEventListener(Event.SOUND_COMPLETE, playNext);

    Worked for me.

  18. ini says:
    January 12, 2010 at 4:50 pm

    Hi :-) I followed this tutorial, changed colours and ofcourse aletered the songs. But i get errormessage whe its been inserted in y cs4 created website (html). Every part is in the same folder and I even took your original file, with the same result:

    Error#2044:ej hanterad ioError:. text=Error#2032: Flödfesfel. URL: tracks.xml at mp3_player_fla::MainTimeline/frame1()

    And

    TypeError: Error #1009: Det går inte att få åtkomst till en egenskap eller metod för objektreferensen null. at mp3_player_fla::MainTimeline/playTrack()

    Yes, i know stuff is written in swedish but I’m pretty sure you get it anyway :-)

    • ini says:
      January 12, 2010 at 4:57 pm

      Maybe I should add that it works solo in a browser but not as its inserted in a Dreamweaverpage.

  19. henk says:
    January 13, 2010 at 5:34 pm

    hey I like your tutorial very much
    but I want to know were i put my music for it to work, because I didn’t get that part…
    please reply as fast as you can, because I want to finish it before the end of the week :D

    thx

  20. Justin says:
    January 18, 2010 at 11:46 pm

    like what i’m seeing so far.

    here’s an issue for you. i’m trying to modify this for my own website. I tried to remove the spectrum, but this has been crashing Flash. Any help would be appreciated.

    • j000 says:
      March 3, 2010 at 7:47 am

      Maybe the reason is that the code for the spectrum is still active and searching fo the spectrum movieclip

« Older Comments Newer Comments »