PXL MP3 Player updated with Rewind/FF buttons, Cairngorm 2.2 framework and Progressive Download

Feb 25th, 2008 by Dave

Thanks to Siddharth who posted on PXL Blog for the rewind/FF functions (can be seen here). I implemented the functionality in the EnterFrame function for the MP3 player and added rewind/FF states to the model locator.

Siddharth had asked what it would take to add support for the buttons, and very quickly afterwards he got his answer I also reset the hSlider thumb to 0 position when the stop button is hit.

Just another example of how quick and easy it is to add new functionality to your Flex app when using Cairngorm and keeping everything nice and OOP-friendly. Plus, this gave me an excuse to play with Flex 3 today!

I've updated MyStylez today for AIR 1.0 as well, but but I'm still waiting to get my Thawte cert so I can tie that up nicely, no more ugly red X and unknown author. Will get that posted with the new cert soon once I get it. Anyway, here's the link to the PXL MP3 Player v2.

Thanks Siddharth and enjoy!

Technorati Tags: Adobe Flex, cairngorm, code, pxl, pxl mp3 player

Posted in Adobe Flex | 21 Comments

21 Responses to “PXL MP3 Player updated with Rewind/FF buttons, Cairngorm 2.2 framework and Progressive Download”

on 25 Feb 2008 at 11:29 pm1Siddharth

Hey Dave,

Thanks for pointing me to the latest & greatest Cairngorm version of the code! This one’s the juice! I’ll be going through it in a bit and will post any improvements I make to you.

Cheers!
on 28 Feb 2008 at 1:02 pm2Dave

No problemo Siddharth, enjoy! Make some killer skins and send me the link to take a look
on 18 Mar 2008 at 9:11 pm3Chris

Dave this is really great - thanks for sharing. I’ve learned a lot looking at this.

Quick question - when you stop a song, is it unloaded or is playback just stopped?

What I mean is, will it be released from memory next time GC runs or would I need to implement something like Grant Skinner’s Janitor.as class to make sure everything is truly cleaned up and no longer referenced by anything?
on 18 Mar 2008 at 9:52 pm4Dave

Hey Chris,
Thanks, I’m glad you’re enjoying it!

The stop button will only stop playback. There’s no specific GC code going on in there, so you would have to implement something to ensure GC does it’s thing.

Even simply removing refs to objects only marks them as candidates for GC, so it won’t necessarily free up memory right away.

So the song channel is replace in memory with each new song. Most likely, the GC will free up memory on request of a new song, when it needs the space. But just hitting stop only stops playback.
on 19 Mar 2008 at 9:22 am5Chris

Thanks for the info

-Chris
on 08 Apr 2008 at 11:33 am6Jen Carling

Great Stuff!!

Is there any way I can control the columns - not showing artist and album? We want to put audio interviews in a format like this…

thanks!!
jen
on 08 Apr 2008 at 11:37 am7Jen Carling

Awesome stuff!!!

Is there any way I can set it to not show the artist and album columns - we want to use this kind of format to put audio interviews online for our police department.

Thank you!!!
on 08 Apr 2008 at 12:07 pm8Dave

Hi Jen,
There’s not a way by default, but in the code, rather, you would just comment out lines 325 and 326 on the MP3_Player.mxml in com/pxldesigns/PXL_MP3_Player folder.

Or you could just delete those lines too. There’s a much newer version of the code too, with a few tweaks and bug fixes, this is an older post.

I zipped up the latest code source with those columns removed already for you how’s that for service! You can download it here http://www.pxldesigns.com/p...
on 09 Apr 2008 at 6:47 am9Jen Carling

You’re the best!!!!
Thank you so much!!!

jen
on 09 Apr 2008 at 8:31 am10Dave

No problem Jen, enjoy, and feel free to use the Davey Ray Vaughan improv JK ha! Don’t do that, you might scare people away.

Is the police dept going to use the MP3 player on their public website? If so, that’s cool I’d like to see it in action when it’s up live! Send me a link if you can when it’s up there.
on 09 Apr 2008 at 9:33 am11Jen Carling

he he he

Yes, they are doing a segment on one of our radio stations called Crack This Case - asking the public for info on a particular case. They want me to have all of these in one page on our site. Your player is perfect! I will send you a link when I have it in place. Right now I’m trying to get it into our template - width of 570px. Any hints would be greatly appreciated but I don’t want to take up too much of your time! I’m pretty good with DW and Flash and just learning CF.

jen
on 09 Apr 2008 at 9:49 am12Dave

Jen,
That’s cool, can’t wait to see it live!

You’ll need to edit a few of the sizes in Flex Builder, or any IDE you’re using to edit. Same with some xy coordinates for the view of the MP3 player.

The view for the MP3 player is currently larger than 700px wide. So you’d have to shorten it up and move the volume slider, position things to fit properly. That’s in the com/pxldesigns/PXL_MP3_Player/views folder. Then on Main.mxml you’d just have to make sure everything fits ok.

I could actually fit everything in under 570px quickly and repost the zip if you want? Not a problem.
on 09 Apr 2008 at 10:44 am13Dave

Matter of fact, I just reposted the same zip. It fits everything at 570px http://www.pxldesigns.com/pxlblog/media/PXL_MP3_Player_v2.0_Jen.zip

Let me know how that works out. It’s cool to think my MP3 player might help stomp crooks, I can add crime fighting to PXL’s services haha!
on 11 Apr 2008 at 6:39 pm14Derrick

I’m new to FLEX. I had this working at the office and now I can’t remember what I did. I’m getting errors.

Type was not found or was not a compile-time constant: PXLModelLocator. Then more errors follow.

Can you help?
on 11 Apr 2008 at 6:43 pm15Dave

Hey Derrick,
Most likely you don’t have the PXLModelLocator class imported on the file that popped the error. Make sure you have:

import com.pxldesigns.PXL_MP3_Player.model.PXLModelLocator;

at the top of the code. That’s the first thing I’d check.
on 20 May 2008 at 4:20 am16ridgeback

Hi there! nice one! I,m new in flex. how about there is no progress download and it automatically plays? thanks in advance. more power!
on 20 May 2008 at 7:05 am17ridgeback

hi again! what i mean is just like streaming mp3 player. thanks again!
on 20 May 2008 at 1:05 pm18Dave

Hey Ridgeback,
You can just remove the progress bar if you want, delete it and kill any code for it. Or turn it’s visible property to false, but then it’s still there in the background eating up memory.

For autoplay is a bit tougher, I’ll have to think about that one a bit more when I get some time. I was going to tell you to add an event listener for the PXLModelLocator.songsArray AC for the collection change event. That way, you can tell the first song in the list to play as soon as the xml is done loading, but apparently there’s a bug in the Flex framework http://bugs.adobe.com/jira/browse/SDK-14253 and it’s not behaving.

If anyone else out there has worked in autoplay with the PXL MP3 player, speak up Otherwise, I’ll have to think of a little work around when I get time.

For the streaming, you’ll need to use Flash Media Player (for real streaming) but the code is currently set for progressive download, it’ll start playing right away and download as it’s going. You just won’t be able to pick anywhere in the song and play it (true streaming) without FMS.
on 20 May 2008 at 11:43 pm19ridgeback

Thanks! But there still a delay in playing sound after we removed the progress bar. Please help. thanks again!
on 05 Sep 2008 at 12:10 pm20Nico Perez

Hey Dave,
This is a great player, thanks for putting it out!

I’m building a site for DJ mixes so I’m mostly working with single mp3s which have long tracklistings. I’m interested in trying to tweak your design to read JSON data instead of XML (using the corelib library) and maybe using flashvars to create widget players.

Any suggestions for the best approach to tackle those tasks?

cheers,

nico
on 05 Sep 2008 at 6:52 pm21Dave

Hey Nico,
Charlie Key has an awesome article on the Flex Dev center about using PHP/Flex/JSON http://www.adobe.com/devnet/flex/articles/flex_php_json.html

I think it would involve minimal effort to take advantage of the corelib’s JSON functionality in Flex with the MP3 code based on that article. I haven’t tried that one myself yet, but it looks like cake from what I’ve seen. If you go ahead and update the code, let me know how it went. I wish I had more time to delve into it myself