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: AS2, audio, Flash, flashvars, media player, randomize, swfobject

This entry was posted on Tuesday, January 6th, 2009 at 9:15 pm and is filed under Flash.