How do you create an MP3 player using MXML? I want the player to have PLAY, PAUSE, and STOP functionality. I want it to be simple and play only one song stored on my server.
Flex provides a few classes and components that allow you to load and use mp3 audio files. In this solution I will show you how to take advantage of three of them using MXML and a little bit of inline Actionscript. First take a look at the code to get an idea of what we are about to create.
1) <?xml version=";1.0"; encoding=";utf-8";?> 2) <mx:Application xmlns:mx=<a href="http://www.adobe.com/2006/mxml">http://www.adobe.com/2006/mxml</a> layout=";absolute"; xmlns:net=";flash.net.*"; xmlns:media=";flash.media.*"; creationComplete=";mySound.load(myURLReq);";> 3) <mx:Number id=";myPos";>0</mx:Number> 4) <net:URLRequest id=";myURLReq"; url=";Track01.mp3"; /> 5) <media:SoundChannel id=";mySoundChannel"; /> 6) <media:Sound id=";mySound"; progress=";prog.text = 'Loading ' + String(Sound(event.target).bytesLoaded)"; complete=";prog.text = 'Completed'"; /> 7) <mx:Panel title=";MP3 Player";> 8) <mx:Text id=";prog"; /> 9) <mx:ControlBar> 10) <mx:Button id=";play"; label=";PLAY"; click=";mySoundChannel = mySound.play(myPos, 0, null);;prog.text = 'Playing'"; /> 11) <mx:Button id=";pause"; label=";PAUSE"; click=";myPos = mySoundChannel.position;mySoundChannel.stop();prog.text = 'Paused'"; /> 12) <mx:Button id=";stop"; label=";STOP"; click=";mySoundChannel.stop();prog.text = 'Stopped'"; /> 13) </mx:ControlBar> 14) </mx:Panel> 15) </mx:Application>
OK. Now let's break down the code.
Lines 1, 2, and 15 should look very familiar. We make the XML declaration and define our Application. Within the Application tag we call a method of the mySound instance once the Application's creation is complete. You can also see a few extra name spaces (xmlns) defined. I'll come back to those a bit later.
On line 3 we define a Number variable called myPos. We initialize the variable to zero.
On line 4 we use the URLRequest tag called myURLReq to define the location of our audio file. In this example, the file resides in the same directory as our source document. This tag uses the net name space that was defined in the Application tag (line 2). The net namespace includes all classes in the flash.net packages (just think subdirectories).
On line 5 we use the SoundChannel tag called mySoundChannel to define … well a channel. The SoundChannel class allows us to stop and pause the audio, among other things.
On line 6 we use the Sound tag called mySound to define the … yep you guessed it, the sound we'll be playing. We are using two of the several events available to the Sound class, progress and complete. The progress event is broadcast as the sound is loaded by the application. The complete event is broadcast once the loading is complete. We will be populating a Text component with text that shows the loading progress and completion. Now back up to the Application tag on line 1. Once the Application has been created we tell the Sound component to load the mp3 file specified on line 4.
Lines 7 and 14 defines our Panel component.
Line 8 defines the Text component that will display the current status.
Lines 9 and 13 define the ControlBar for our Panel. The ControlBar will contain the next three Button components.
The PLAY Button is defined on line 10. We tell the application to do two things when clicked. We instruct the Sound component to play the sound and assign the resulting SoundChannel to our SoundChannel component. Then we set the myStatus Text component to the word “Playing”.
On line 11 we define the PAUSE Button. When the PAUSE Button component is clicked we assign the current SoundChannel position to our myPos variable. We then tell the SoundChannel component to stop playing the sound. Finally we set the myState Text component to the word “Paused”.
Our STOP Button component on line 12 instructs the SoundChannel to stop playing the sound when clicked. The we set the myState Text component to the word “Stopped”.
So find yourself a mp3 file, make sure the name you use is specified in the url property on line 4, and RUN!