Home » Code Samples, Flash, Tutorials

AS3 MP3 Player

5 September 2008 | 6,762 views | No Comment


I have an upcoming project that will require an mp3 player that can load multiple songs, and let users choose which track they would like to listen to. I created this as a test, and will be developing it further for use on the site itself.

The player loads in mp3’s from an external file based on xml settings.

Here’s the actionscript 3 that is involved:

var getMusic:URLRequest;
var music:Sound = new Sound();
var soundChannel:SoundChannel;
var currentSound:Sound = music;
var pos:Number;
var currentIndex:Number = 0;
var songPlaying:Boolean = false;
var xml:XML;
var songlist:XMLList;
//preloader
function loadProgress(event:ProgressEvent):void {
    var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);
	if(percentLoaded < 20){
		trace("loading");
	} else{
	}
}
function completeHandler(event):void {
    trace("DONE");
}
//load the xml
var loader:URLLoader = new URLLoader(); //create a new URLLoader Object
loader.addEventListener(Event.COMPLETE, whenLoaded); //add an event listener to that object
loader.load(new URLRequest("songs.xml")); //Requests our xml file that contains our song data
function whenLoaded(e:Event):void //WhenLoaded function(see line 50) runs when line 50 is complete
{
	xml = new XML(e.target.data);
	songlist = xml.song; //accesses our song tag in our xml file
	getMusic = new URLRequest(songlist[0].url);//get music from songlist
	music.load(getMusic);//load music
	soundChannel = music.play();//plays the music
	songTXT.text = songlist[0].title; //gets song name from xml
	artistTXT.text = songlist[0].artist; //gets artist name
	albumTXT.text = songlist[0].album;  //gets album name
	soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);//runs the next song function when a song completes
}
//add mouse events
next_btn.addEventListener(MouseEvent.CLICK, nextSong);
prev_btn.addEventListener(MouseEvent.CLICK, prevSong);
pause_btn.addEventListener(MouseEvent.CLICK,pauseSong);
/*--------Skips Songs----------------------------------------*/
function nextSong(e:Event):void
{
	if (currentIndex > (songlist.length() - 1))
	{
		currentIndex++;
	}
	else
	{
		currentIndex = 0;
	}
	var nextReq:URLRequest = new URLRequest(songlist[currentIndex].url);
	var nextTitle:Sound = new Sound(nextReq);
	soundChannel.stop();
	songTXT.text = songlist[currentIndex].title;
	artistTXT.text = songlist[currentIndex].artist;
	albumTXT.text = songlist[currentIndex].album;
	soundChannel = nextTitle.play();
	songPlaying = true;
	currentSound = nextTitle;
	soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
//manage songs, and load their info
function prevSong(e:Event):void
{
	if (currentIndex < 0)
	{
		currentIndex--;
	}
	else
	{
		currentIndex = songlist.length() - 1;
	}
	var nextReq:URLRequest = new URLRequest(songlist[currentIndex].url);
	var prevTitle:Sound = new Sound(nextReq);
	soundChannel.stop();
	songTXT.text = songlist[currentIndex].title;
	artistTXT.text = songlist[currentIndex].artist;
	albumTXT.text = songlist[currentIndex].album;
	soundChannel = prevTitle.play();
	songPlaying = true;
	currentSound = prevTitle;
	soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
function pauseSong(e:Event):void
{
	pos = soundChannel.position; //pause song at current position
	soundChannel.stop(); //stop sound
	songPlaying = false; // songPlaying is now equal to false
	play_btn.addEventListener(MouseEvent.CLICK,playSong);
}
function playSong(e:Event):void
{
	if(songPlaying == false) //if songplaying is equal to false run function below
	{
		soundChannel = currentSound.play(pos); //play from current position(used if it was paused)
		soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);//run nextSong function if current song is complete
		songPlaying = true; //songPlaying is now true
		play_btn.removeEventListener(MouseEvent.CLICK,playSong);
	}
}

Here is the xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<ipod>
	<song>
		<title>My Hero</title>
		<artist>Foo Fighters</artist>
		<album>The Colour And The Shape</album>
		<url>songs/Hero.mp3</url>
	</song>
	<song>
		<title>Learn To Fly</title>
		<artist>Foo Fighters</artist>
		<album>Theres Nothing Left To Lose</album>
		<url>songs/Fly.mp3</url>
	</song>
</ipod>

Download the source (Note: The mp3’s used are not included in the download)