iD Tech Bloggers

Making a Flex MP3 Player

This entry I’ll be showcasing a simple MP3 player written in Adobe Flex. Full source code is available here.

Also included in this project is a wonderful Flex visualizer written by Ben Stucki. The player loads an MP3, either local or remote. An event listener then calls a function when loading is complete that will pull ID3 tag information. In this project I’m only pulling the Title, Artist, and Album tags, but you can pull any associated tag you need. We also create a visualizer component and link it to a playing sound channel, which produces the lovely visualizer.

You can also load remote MP3s just as easily (the default MP3 is local). Simply paste the URL for an mp3 into the text box and then hit the play button.

In addition I’ve incorporated a rather hackish Flex ProgressBar as a “seek” bar. The percentage of play progress is calculated and then applied to the progress bar regularly, and a MouseListener is placed on the progress bar that allows the user to click at various points along the bar. The coordinates of the mouse click are then translated into a percentage of the song length. The song is then stopped and play is started from the new location.

The music sample used is from Wired’s Creative Commons CD. Tracks from this album can also be used to test the remote playing functionality.

8 Responses to “Making a Flex MP3 Player”

1. Dave, on March 17th, 2009 at 12:14 pm Said:

   This really looks cool as H*ll, so I’m trying to open it in Flex but it’s not allowing me to do so. What am I doing wrong?

2. KenK, on March 17th, 2009 at 12:46 pm Said:

   I double-checked the source zip file and it looks correct. Is there a particular error message you are getting?

3. JayB, on April 14th, 2009 at 1:53 pm Said:

   Seems that the zip file is corupted..
   awesome player..

4. JayB, on April 14th, 2009 at 1:57 pm Said:

   why doesn’t the source include the visuals?

5. KenK, on April 14th, 2009 at 2:08 pm Said:

   Hey Jay,

   Are you still having trouble with the zip file? The visualization library is located in Mp3Player\src\com\fusiox\ui\Visualization.as – it’s simply an Actionscript file that you can include in projects. Check out the mxml to see how it is used:

   Make sure it is added to your namespace by adding xmlns:fx=”com.fusiox.ui.*” to your mx:Application tag.

6. mnieves, on April 25th, 2009 at 9:15 pm Said:

   Nice Sample,
   work like a charm!
   how to add some loop to repeat the mp3?

7. KenK, on April 29th, 2009 at 10:36 am Said:

   @mnieves:

   You would use an event listener to test for the end of the song and have it play again and reset the event listener. Here’s the appropriate page in the API for monitoring playback:

   http://livedocs.adobe.com/flex/3/html/help.html?content=Working_with_Sound_09.html

8. Jack, on May 26th, 2009 at 4:50 am Said:

   Yep no visuals, added everything correctly, but when it starts plays no visuals show up.

Leave a Reply

Tags: Actionscript, Adobe, event listener, flex, mouselistener, mp3 player, mp3s, progress bar, progressbar, simple mp3, source code, visualizer

This entry was posted on Wednesday, March 11th, 2009 at 1:28 pm and is filed under iD Tech Bloggers. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.