Build a Simple Flash MP3 Player in AS2

Making a MP3 player is really simple using Flash and AS2. First open up an FLA in Actionscript 2.0 format. In the first frame, open the actions window and write:

var simple_mp3:Sound = new Sound();

simple_mp3.loadSound( 'example.mp3', true );

Here we’re loading the MP3 ‘example.mp3’. The second variable in loadSound() is whether to stream the media. If you would like to wait until the MP3 loads completely, just set this to false.

Now let’s pass in a variable:

var simple_mp3:Sound = new Sound();

simple_mp3.loadSound( mp3_file, true );

Passing this mp3_file variable will allow us to control the MP3 file from outside the swf using flashvars.

Download example HTML and FLA files

Putting the MP3 Player on the Page

Now let’s write a function to load the MP3 player using swfobject2.1. Put this in the head of your document:

<script type="text/javascript" src="js/swfobject2.1.js"></script>

<script type="text/javascript">

function load_mp3() {
    var flashvars = {
        mp3_file: 'example.mp3'
	};

	var params = {
		menu: "false"
	};

	swfobject.embedSWF("simple-mp3-player.swf", "mp3-player", "0", "0", "8.0.0",
	"expressInstall.swf", flashvars, params);
}
</script>

This function will load the file example.mp3 into our MP3 player swf, which has the dimensions 0 x 0. This swf is embedded within a div with the id “mp3-player”, so make sure to include this and then call load_mp3() somewhere on your page:

<div id="mp3-player"></div>

<script type="text/javascript">load_mp3()</script>

Randomizing the MP3 that get’s played

Now with a slight modifcation and Javascript’s Math.random() method, we can randomize our MP3 easily:

<script type="text/javascript" src="js/swfobject2.1.js"></script>

<script type="text/javascript">

var mp3s = new Array(
    'track-1.mp3',
    'track-2.mp3',
    'track-3.mp3',
)

var the_mp3;

function load_random_mp3() {
    var randInt = Math.floor(Math.random()*mp3s.length);
	the_mp3 = mp3s[randInt];

    var flashvars = {
        mp3_file: the_mp3
	};

	var params = {
		menu: "false"
	};

	swfobject.embedSWF("simple-mp3-player.swf", "mp3-player", "0", "0", "8.0.0", 

	"expressInstall.swf", flashvars, params);

}

</script>



Now every time load_random_mp3() is called, a new MP3 plays.

Download example HTML and FLA files

Be Sociable, Share!

Tags: , , , , , ,

3 Responses to “Build a Simple Flash MP3 Player in AS2”

  1. Tiger K Says:

    Hi, I was wonder, now that you loaded this onto a Frame, How do you make or script to buttons to control the sound. Can one make nested movieclips and script them also? I would really love to know

    Thank You

  2. Tiger K Says:

    Hi, How would I have an mp3 fade from one section of a site to another. IE: Visitor types in URL to get to site, Intro page starts with music fading in. The intro animation plays with music. The enter button to enter the main page comes up. When the enter button(movieclip w/hit state)ia pressed then the music fades out quickly and the main page comes up with the title track mp3 for that page fades in…………..I know how to edit with the sound manager, but I’m talking about the transition from the intro page to the main page. Is this a possibility??

    I would love to know the script in AS2 for this if at all possible.

    Thank You

    Tiger K

  3. Maria Jose Says:

    Your tutorial saved my life!! I have no idea of action script, and this was extremely clear and simple!! Thanks!!