This tutorial steps you through the process of creating an MP3 player with Adobe Flex.
VIEW THE DEMO
DOWNLOAD THE SOURCE CODE
The upcoming HTML5 standard has included audio and video as native HTML elements, but support for this new functionality is not consistent amongst the current browsers. In the mean time Flash provides a practical way to load and play MP3 files from within a web page. This tutorial will step you through the process of creating a simple MP3 player with Flex.
Create a new Flex project and add the following elements as children of the Application element.
<mx:Image click="stop()" source="@Embed('../media/stop.png')" width="50" height="50" verticalCenter="0" horizontalCenter="0"/>
<mx:Image click="play()" source="@Embed('../media/play.png')" width="50" height="50" verticalCenter="0" horizontalCenter="-58"/>
<mx:Image click="pause()" source="@Embed('../media/pause.png')" width="50" height="50" verticalCenter="0" horizontalCenter="58"/>
<mx:ProgressBar width="166" mode="manual" horizontalCenter="0" verticalCenter="47" id="loadingProgress"/>
This creates 3 "buttons" (actually Image elements that respond to a click event) and a progress bar to show the download progress of the MP3 file.
Add the following attribute to the Application element.
applicationComplete="appComplete()"
This sets the appComplete function to be called when the application is initialised.
Add a Script element to the Application element. This is where we will write the ActionScript code.
<mx:Script>
<![CDATA[
// code goes here
]]>
</mx:Script>
Inside this Script element import the packages and add the variables below.
import mx.controls.Alert;
private static const MP3_URL:String = "http://flashmediatuts.sourceforge.net/media/song.mp3";
private var sound:Sound = null;
private var soundChannel:SoundChannel = null;
private var playResumePosition:Number = 0;
private var loaded:Boolean = false;
Add a function called appComplete inside the Script element.
private function appComplete():void
{
sound = new Sound();
sound.load(new URLRequest(MP3_URL));
sound.addEventListener(IOErrorEvent.IO_ERROR, function(event:IOError):void
{
Alert.show("There was an error loading the MP3 file");
}
);
sound.addEventListener(Event.COMPLETE, function(event:Event):void
{
loadingProgress.visible = false;
loaded = true;
soundChannel = sound.play();
}
);
sound.addEventListener(ProgressEvent.PROGRESS, function(event:ProgressEvent):void
{
loadingProgress.setProgress(event.bytesLoaded, event.bytesTotal);
}
);
}
Here we create a new Sound object, and ask it to load the remote MP3. We also set up 3 event listeners. The first responds to the IOErrorEvent.IO_ERROR event, and display a message if the remote MP3 could not be downloaded. The second resoinds to the Event.COMPLETE event, and hides the download progress bar, sets the loaded flag to true and starts playing the song when the download is complete. The final one responds to the ProgressEvent.PROGRESS event, and updates the progress bar as the MP3 file is downloaded.
private function play():void
{
if (loaded)
{
soundChannel.stop();
soundChannel = sound.play(playResumePosition);
}
}
The play function is called when the Image that displays the play button picture is clicked. It stops any music that might currently be playing, and then restarts the song at the position held by the playResumePosition variable.
The Sound object can only be used to start the music playing. Once it is playing the SoundChannel object returned by the play function has to be used to manipulate the music playback. If you were to call the Sound.play function without first calling the stop function on the existing SoundChannel, you would end up with the song playing twice at the same time.
private function stop():void
{
if (loaded)
{
playResumePosition = 0;
soundChannel.stop();
}
}
The stop function uses the existing SoundChannel object to stop the playback. We also set the playResumePosition variable to 0, so that when the play button is clicked it will start from the beginning.
private function pause():void
{
if (loaded)
{
playResumePosition = soundChannel.position;
soundChannel.stop();
}
}
The pause function does the same as the stop function, except that it records the current playback position of the song before stopping the music. Now when the play button is pressed the music will resume from the current paused position.
By using a combination of the Sound and SoundChannel objects it is possible to create the standard play, pause and stop buttons that every media player has. This example could be easily modified for inclusion on your own site simply by modifying the location of the MP3 file referenced by the MP3_URL variable.
Go back to the Tutorial Index
Making a custom YouTube player with Flex
This tutorial shows you how to create a custom YouTube video player using Flex.