PXL Blog

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!

Posted in Adobe Flex | 40 Comments

40 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
on 09 Feb 2009 at 6:47 pm22MechanisM

Hello!! can anyone provide correct link for all player’s files??
on 09 Feb 2009 at 7:09 pm23All opensource Flex mp3 Players (which I’d used) | MechanisM

[...] v.2 with MusicVisualizer by Taras Novak Example (right click for source) based on Playr PXL MP3 Player Download Axel’s Flex MP3XSPF Player more to come.. var addthis_pub = ‘mechanism’; [...]
on 10 Feb 2009 at 7:13 pm24Dave

Hi MechanisM,
This is the link to the latest and greatest http://www.pxldesigns.com/pxlblog/media/PXL_MP3_Player_v2.0.zip

It’s also on the right nav –> for everyone going forward. Enjoy!
on 03 Apr 2009 at 11:19 pm25Tyler Smith

Any update on autoplay? I see you had an idea, but the Framework was buggy.
on 03 Apr 2009 at 11:30 pm26Tyler Smith

I figured a hackish way to autoplay:
In MP3_Player.mxml

private function init():void {
songsList.addEventListener(FlexEvent.UPDATE_COMPLETE, autoPlay);
}

public function autoPlay(e:Event):void{
PXLModelLocator.currentSong = PXLModelLocator.songsArray[0];
playSound();
}
on 20 Aug 2009 at 8:48 am27John

Hi Dave, THanks for the MP3 player it has come in handy, Ive been developing a site and your player works a treat, I mixed it with some audio visualisation(which was working with all the custom controls, but is now broke)
The visualisation example normally plays with a ‘get url’ which does autoplay, but I prefare your component to only play when requested.
I have yet to get my one page example to work/get called from another app, as module or component, but hopefully will have this done soon and update you with the newer link.

http://www.visual-image.co.uk/dev/mp3/
on 20 Aug 2009 at 9:04 am28Dave

Hey John,
Very cool work, I just checked it out! Did you use this viz component? http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1034708

I’ve had that working fine on http://www.mezzyshredder.com but took it down to make room in the new MP3 player. I also removed some of the functionality to switch visualizations (just stripped it down a bit).

Not sure if that’s the one you’re using though. Is that whats broken? Or the MP3 player?
on 21 Aug 2009 at 5:42 am29MechanisM

I see you talking about visualisation..
so best Flex visualisation I’d ever seen was in Taras Novak’s player/
Check it here: http://tarasnovak.com/blog/2009/01/15/flex-music-player-v2/
on 21 Aug 2009 at 9:42 am30John

Hi Dave, Yes the viz component was from Ben Stuki’s site, which is apparently based on someone else’s code. In his example there are options to change the render events, but it also calls a song, via URL, when mixed with your script which calls the xml, yours takes preference, which for me is better, but as you can see in this new example http://www.visual-image.co.uk/beat1/TestPopUpToolbar.html 2 options for the render FX dont seem to be being populated with the effects? I know this isn’t your component, but if you have any advice to help for me to strip out any conflicting code that would be great. (I can post my code if required.

I am not sure if I am using your 2.0 code, most of my testing was done locally so performance was pretty resposive, but I will have to see if I can get the new version working the same as I have here.

But thanks also to Mechanism for the other info, the visualisation on that looks really nice, will have to try that one too.
on 22 Aug 2009 at 1:26 pm31Dave

@MechanisM – awesome viz, that one looks very cool! Thanks for posting

@John – I know I had Ben Stucki’s working with the PXL MP3 player no problem at one point. I removed it for the latest mezzyshredder.com because now that the player is draggable, i figured i didnt want to overload user’s CPUs. But i had stripped it down to a very basic visualizer with no extra features. Just play along with the music when it starts. I still have the code somewhere if you want it, but I have to dig it up out of the archives

Let me know how the coding’s going and I’ll see if I can find that old version.
on 24 Nov 2009 at 7:18 am32Gavin

HI,

Has anyone or does anyone know how to add code to make this autoplay the first song?. I tried Tyler’s idea above but that didn’t seem to trigger an autoplay?

Thanks
on 21 Jan 2010 at 2:03 pm33Bill

When I click a song to play, the entire player seems to be stuck until the loading bar completes. Is there a way to stop this and allow the user to click a different track in case they choose the wrong one and don’t want to wait for it to load?
on 21 Jan 2010 at 7:15 pm34Dave

@Bill, It’s been a while since I saw the code, but I believe I turned mouseChildren off during preload (at least on an older version). You can comment those pieces out, but you’ll need to watch out for errors if someone wants to scrub the song before it’s loaded. I remember there being issues with null object refs.

@Gavin, I’ll reply in email shortly.
on 22 Jan 2010 at 10:04 am35Bill

Me again. I figured it out. Prevent the buttons from being disabled on the player file.
on 17 Apr 2010 at 4:18 pm36John

Hi Dave, John here again from a while back, been using the mp3 player again, created more music, still adding to the text but can be viewed here: http://www.videopool.co.uk

I too would be interested in in trying to implement a basic DJ Mixing type setup within site. Maybe just 2 seperate lists & cross fader, tempo adjust at a push, or jog rewind, anyone know of further experimentation please update me.

Cheers Johnvid
on 11 May 2010 at 10:35 am37rxeno

Hi thnx for the player code, excellent!

I am trying in FB4 to bring the playlist from data services.
I did it, the datagrid shows the database results and all names are same as original vo pairs.

Problem is, it is reading the xml file and I thought the services would replace that but it doesnt.

Anyone have this player pulling from data and set up to play that way?
Sure need it.
Thanks again!
on 11 May 2010 at 10:41 am38Dave

@rxeno
Very cool. I’m not sure what the problem is though, can you share the code? Did you try connecting to server-side code through the new data/connectivity features? Sounds like you’re saying it did connect, but behind the scenes the player is still reading the XML file, is that right?
on 11 May 2010 at 10:47 am39rxeno

Thnx for teh uber super fast reply Dave.
Yes sir, data services all workign correctly, datagrid (unchanged) showing my database record set correctly.
I just dont know how to change the cairngorm call from the httpservicew for the xml to the I thought maybe webservice for the remote object call… but I suspect mucho changes for the retst of the code to change the xml .

Your example is the ONLY one thatr ocks, all others sadly are little broken things that tease.
Yes I can send code or is it easier than my little brain is supposing?
on 11 May 2010 at 10:58 am40Dave

@rxeno
No problemo, I’m glad it’s still kicking after all these years. I plan on updating it soon as I can to Flex 4 and getting all the requested features (like auto play) in it.

In the meantime, the URL for the XML file is in the com.pxldesigns.PXL_MP3_Player.business Services.mxml class.

url="data/songsXML.xml"
resultFormat="e4x"
/>
I would have to take a look at the code you have to see what it’s currently doing. The DataGrid is currently bound to the Model’s songsArray property, which is populated with the result of the SongsDelegate (in the business folder) call to the server.

So you’d have to make sure the FX3 code isn’t overriding what you’re doing with FX4. If you used a drag/drop, for example, in Flash Builder for the call to the server, you’ll have to make sure the DG isn’t still bound to the Cairngorm result.

If you want to send the code, I’d be glad to take a look dave AT pxldesigns DOT com.

@Everyone else looking for new features, let me know what you’re looking for because I’ll try to get some free time soon and update the whole component to FX4 and I’ll scale it down so it’s far less code, cleaner, and easier to work with. Get some more options in there for the data.