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. b_gates says:
    February 26, 2010 at 12:06 am

    This is a FANTASTIC tutorial. I’m so grateful for your hard work.

    On estimate I shaved off about 3 buttons, however with your easy-step guide
    it made the process very easy to dissect. More importantly though, it was
    a huge help for putting anyone in the RIGHT Direction, myself especially.

    I actually have a question, once I leave the office I’ll be sure to respond.

    Thanks again!

  2. b_gates says:
    February 27, 2010 at 6:27 am

    Again, excellent tutorial.

    Once I complete my finished product I will post another link for people to view the example. However, i have a quick question. Perhaps you can help me sir.

    • I’m looking to insert a “shuffle feature”, please point me in right direction
    • I’m looking to insert a “title text scrolling” effect, where should I start?

    So far so great, I hope to hear from ya.

    Thanks.

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

      Hi b_gates

      The features you spoke about are what I want to do next it is just that we’ve beeb busy with work and other unrelated businesses. Keep checking the blog for updates on the mp3 player. We want to do video player next :)

  3. Disfunctional DJ says:
    March 11, 2010 at 3:00 am

    Excellent tutorial. And I Have Had No Problems Modifying This File To My Need, But One. I Have Been Trying To Figure Out How To Stop The Sound When A User Leaves One Page To Another In Flash, My Site I’m Building Now Will Be All Flash And When I Chang The Page The Player Is Still Playing And When I Return To The Page That I Have it On It Will Not Stop even If I Press The Stop Button, How Do I Make It Stop Playing When a user changes The Page? Please, let Me Know As I Really Like This Player And I’m No Good At Action Script To Begin With. I’ll Be Placing A Link To This tutorial On Two Of My Web Sites, And Again Thanks For The Really Excellent tutorial.

    • j000 says:
      March 11, 2010 at 12:02 pm

      Hi there try to use this code to stop all sounds
      flash.media.SoundMixer.stopAll()

      or this
      import flash.media.SoundMixer;
      SoundMixer.stopAll();

      Attach the code to your page buttons so whenever you click a button all sounds playing will stop

      Let me know if it works

  4. Disfunctional DJ says:
    March 11, 2010 at 3:24 pm

    Yes It Did, Work The Only Problem With It Is I Have Sound On My Buttons, When They Mouse Over, But It Only Stops The Sound On Click So I Can Live With That, Thanks So Mutch, One More Thing? Can You Help Me With The Volume Bar Thats In The Components Pannel? The One From The Video? This Would Really Help As Well, As I Can Not Find A Tutorial On It. And You, Will Get The Credit On This For Sure As This Was Really Cool The Player, I Spent The Last Year Just Trying To Figure Out The Basics Of Flash And Have Created One Site So Far, See http://www.goldenrobotonline.com Thanks Again As This Was A Big Help.

    • j000 says:
      March 11, 2010 at 9:47 pm

      I’m glad it worked even slightly :P and I like when people like you are doing something such as taking flash seriously. I’m sure you become a very good actionscripter in no time. I didn’t understand your question about the volume bar, what video are we talking about here?

      • Disfunctional DJ says:
        March 11, 2010 at 11:11 pm

        Oh! No Video Just The Volume Component In The Video Components Of The Components In CS3, I Want it To Go On This Player You Made, The One I Modified For My Site. Wow, I Think That Makes Sence, Now Reading It I Wonder. Hit Me Back. Also You Will Be On Two Of My Site’s With In The Next Two Weeks One Is A Tech Site, That I’ve Made About Five Years Ago. But Thanks As I’m Still Learning This Action Script Stuf. Realy Big Help And to All Others Reading This Post This Is The Best Player I Found On The Web, I looked For A Week Trying Over 30 Tutorials And Only This One Was The Best.

  5. Terraform says:
    March 16, 2010 at 5:41 am

    Hey First off thanks for the tutorial. really nice.

    Is there a way to “cache” the files so they don’t need to be re downloaded every time the
    track is invoked? that is a lot of unnecessary bandwidth usage.

    other than that I am really loving the code.
    thanks

  6. Jason Wilding says:
    May 18, 2010 at 1:30 am

    This is great, I think I am missing something though, I’m trying to make the info scrollable but I can’t, even when the box is set to scroll… please help..!!

    • MAD says:
      June 27, 2010 at 1:16 pm

      This feature will be added in the future :) I am working on adding more features to the player. So far I have re-write the code to add more functionality, especially the track download information; check the updated tutorial. :)

  7. Max says:
    July 14, 2010 at 2:08 am

    Why my first song start automatically, did I somthing wrong? I don’t want my first song will start automatically.

  8. Leo says:
    October 5, 2010 at 12:28 am

    Thanks! Really nice your job. I wanna use “load movie” to load this in my project, but it doesn’t work. Could you help me?

  9. JC says:
    May 9, 2011 at 9:52 pm

    as for loading songs of your choice does the path have to be web related? or can it come directly off of one’s computer?
    Getting songs in it and then saving will sometimes give me an error code when i try to replay it in flash.

    • MAD says:
      July 26, 2011 at 10:22 pm

      JC I beleive you specify your files path as absolute or relative. Let me know if you still have issues.

  10. MAC says:
    July 7, 2011 at 1:13 am

    Thanks for the very nice player… Is there anyway to have different songs on the xml list play. Like a random list so the first same song does not always play. Thanks in advance.

    • MAD says:
      July 26, 2011 at 10:17 pm

      It has been almost two years since I touched Flash and ActionScript. I will have to look into the old code and enhance it. This might take some time as I know the old code has some flows that I would like to correct. Keep checking and an improved mp3 player post ill be published.

  11. DavyRocket says:
    July 14, 2011 at 4:37 pm

    First off, Great tutorial, very easy to re configure. I made my own graphics. Was very easy to swap from yours to mine. Few questions though. 1. How do you stop it from auto play? 2. Is it possible to add volume? Last. Your DEMO, and DOWNLOAD buttons are wrong. DEMO downloads, DOWNLOAD takes you to the DEMO. It would also be great to have text auto scroll. Oh Ialso found some typo’s that made your player play the songs all funky. 1. In the PAUSE layer name its Pasue. Also one of the instance names is wrong. I can’t remember which one it is. I will post it later when I find it in the original fla. Basically what would happen when you press rewind, it would rewind,, if you keep pressing it, it keeps rewinding faster. Then the stop button is non functional, none of the other buttons work. That is because of the typo in the instance name of the “REWIND” button I believe. However I did not use the rewind/fastforward for my player. Again THANK YOU for this.

    • MAD says:
      July 26, 2011 at 10:20 pm

      Thanks for your valuable feedback. I will look into your comments and post a reply soon. I will however, need to refresh my Flash and ActionScript skills as I have been working for the last two years on WordPress and PHP Dynamic Sites. But, this will give me good memory refreshing exercise.

  12. khaler says:
    August 6, 2011 at 7:29 pm

    hey, awesome tutorial. really comprehensive and easy to understand, even for a flash/scripting novice like me.
    i followed the instructions as closely as i could, but flash keeps reporting several (15) problems, all of them with the description: “1120: Access of undefined property play_mc. etc.”
    i think if i was able to solve the problem of one, i could solve them all since all the errors seem to pertain to play_mc and all say ’1120.’.
    maybe i encoded that part wrongly, but flash does not report any errors with the script until after i’ve pressed publish. i also redid the tutorial before because it had not been working.
    apart from that, really good tutorial. i’m pretty sure i’m only one of a few who found problems trying to follow it.

    • MAD says:
      August 26, 2011 at 2:44 pm

      Did you check the previous post on how to design the Flash player interface before writing the code. It seems to me that the play_mc movie clip is missing. You need to follow the previous post to create al the assets that are needed in this tutorial. Let me know if this helps solving your issues!!

    • MAD says:
      August 26, 2011 at 4:00 pm

      I followed the tutorial again and recreated the player from code within the post. The only problems I found are: pause_mc instance was incorrectly spelled. In the Flash design it is called pasue_mc instead pause_mc. So changing the instance name would resolve this issue.
      The other problem I found when using Flash CS5, is the spectrum is displayed on the top left corner instead on the intended position. This problem was not there when the player was created using Flash CS3. I will investigate and post a solution soon.

  13. Knutars says:
    August 16, 2011 at 9:34 am

    Thanks for the instructive tutorial.

    I have a request.

    Would you be so kind and describe how to make the fast forward and rewind buttons simply jump a pre-specified length of time, for instance 60 and 20 seconds.

    When I think of it, perhaps the play and pause buttons would be better off combined into one single dual action button?

    • MAD says:
      August 26, 2011 at 5:46 pm

      Knutars,
      Currently the search rate is set as follows:
      const SEARCH_RATE:int = 1500;

      This will move the track by 1.5 seconds. To change it for 60 seconds or 20 second set it as follows:
      const SEARCH_RATE:int = 60000;
      or
      const SEARCH_RATE:int = 20000;

      To combine the two buttons, you can move the code in the pause function into the play function. You will need to hide/display the appropriate button for each action.

  14. Dave Lawrence says:
    August 20, 2011 at 6:18 am

    I have been trying to figure out how to disable the autoplay behavior when a page loads. I tried modifying the onceLaoded function like this:

    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);
    // Comment out the next two lines of the original function
    // chan = track.play(trackPos);
    // chan.addEventListener(Event.SOUND_COMPLETE, playNext);
    //
    // New code added to disable auto play
    //
    chan.stop();
    trackPos = 0;
    trackOn = false;
    play_mc.visible = true;
    play_mc.addEventListener(MouseEvent.CLICK, playTrack);
    //
    // End new code
    //
    }

    This successfully disables the autoplay behavior. Unfortunately, hitting the “Play” button does not activate the player. Hitting the “Fast Forward,” “Play Next,” or “Play Previous” buttons do activate the player and it plays normally afterward. Any ideas how to fix this to:

    a) disable auto play;
    b) begin play properly by hitting the “Play” button first.

    • MAD says:
      August 26, 2011 at 4:03 pm

      Hi Dave,
      Originally the player did not play automatically. However some people requested for this to be automated. I am glad you found your own way to disable it :)

    • Loco says:
      February 21, 2012 at 5:06 pm

      I was concerned too about that, I think u should put an if … else statement but i dont know how to work that out as soon as i do i might help.

  15. Dave Lawrence says:
    August 20, 2011 at 6:40 am

    In another matter, the spectrum player looks fine in Flash preview, but is invisible on the live page, as on here: http://ramsites.net/~dmlawrence/noise_signal.html

    Any ideas what the problem is? Other than the color scheme, the ActionScript code is identical to the tutorial.

    • MAD says:
      August 26, 2011 at 4:05 pm

      I had a problem with the spectrum too, when I recreated the player using FLash CS5. The spectrum shows on top left corner of the screen. So what you need to do is create a new layer under the actions layer. Call this layer spectrum. Then create within the first frame an empty movie clip. Call the movie clip “spectrum”. Then follow the last steps on this tutorial for adding the spectrum, you would have your spectrum displayed as intended.

  16. ed says:
    January 16, 2012 at 10:42 am

    Has anyone figured out how to make the autoplay stop yet?

« Older Comments