Wednesday, September 8, 2010

JPlayer Audio Playlist Generator (JPlayer Playlister)

The CD that launched 1000...lines of code

Update

[2014.11.23]
The new jPlaylister v0.70 was built on jPlayer 2.8.2, because 2.6 had some recent serious issues with mobile browsers. Fixing those and implementing a more mobile friendly theme for the fs/mobile mode.

[2014.08.31]
The new jPlaylister v0.68 adds support for auto-scrolling playlists and full-screen/mobile mode. Previous releases added playlist caching (a feature that significantly decreases load times on large playlists) and support for displaying album art, in case you missed them.

/update...resume original post

My brother sent me a CD full of MP3s when I was in Kuwait -- cut off from the internet -- and going into withdrawals from not being able to download music. It was a good mix and has turned me on to a few artists that I knew nothing about.

A week ago, my wife has to take my car for something and, realizing that my radio sucks (shhh...i didn't hook up the antennae so my radio-listening experience would be less than inviting), flipped down my sunvisor CD holder and picked the fabled blue cd from the small selection. She made it 20 tracks or so into the CD (love MP3 CDs..if only it had any type of anti-skip) before arriving home and not using my car again for as long as she lives if it was up to her.

I hop in the car the next morning and A Tribe Called Quest welcomes me to the drive to work. A nice way to start the day. I re-affirm my love for my wife due solely to this incident and decide to facebook about it later that day. I did (may have been the following day) and that was that, but someone mentioned that hearing the mix would be fun. All to eager to oblige, I start devising ways to make it happen. So what if I spend 30 hours on a project and only 2 people give a crap (me and me). I had made web pages that incorporated flash based audio players before...but that was before the up and coming HTML5, and the somewhat supported audio tag.

Let's get a web player

A quick internet search later and I see JPlayer, which looks familiar. I glance at the demos and one has a playlist -- perfect. It supports OGG Audio and MP3's via HTML5 and will fallback to Flash for unsupportive browsers, bras, or family members. Perfect.

Initial implementation (derived from the JPlayer with playlist demo) wasn't that bad. I took the demo code and just added the ability to automatically generate a playlist from all the files in a given location. I think it took me a couple of hours...taking snack breaks and probably food breaks and almost certainly bathroom, crying baby, and phlebotomy breaks.

I went to bed last night with a working player. In addition to deriving the playlist from the files at the location specified, I was also able to add the option of displaying filenames or ID3 information (via getID3 -- a PHP class)

I put a link on fb and probably got thousands of views.

Revisions / Additions

Tonight, I pushed back the list of things I need to do and worked more on this little project. At some point during the day, I had decided that the first song on the playlist was wearing on me. I usually paused within 5 seconds of loading the page, but it doesn't take much to wear a song out, for me. That's another reason I don't do the radio...20 songs on a loop with advertisements and lame DJs. No thanks. So I added the option to 'randomize' list via a clickable link on the page. It caused me to rewrite a fair amount of code. But, I am pretty happy with the turnout.

Current Situation

See 'Update' at the top of this article to link to the current version of JPlaylister. Thanks for your interest and support.