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.

36 comments:

TechnopodMan said...

Hi,

Your code it´s very interisting!!

it´s what i´m looking for but i don´t know much of coding and i need a little help...

How can i hidden the playlist and only show the song that are playing?

I have more than 1000 mp3 and i don´t whant to show it.

Thank you very much for this, and for your help!!

Regards,

Govinda said...

Very nice, I hope you continue with it!

nick c said...

@TechnopodMan
Thanks for the comments. The script is probably not your best bet...as it, by default, scans all the files in the target directory and get to work building a playlist.

The script could probably be modified to list all songs...and make each one link to play only that song on a page...but it would take some code work. Maybe you can try ZINA(http://www.pancake.org/zina) or SoundManager2 (http://www.schillmania.com/projects/soundmanager2/).

Good luck!

@Govinda
Thanks. I'm splitting my time between this and a JPlayer extension for ZINA that I'm now adding features to (scrobble to Last.FM, modify the playlist on the fly, etc.).

I'm enjoying it between paid gigs. Take care!

TechnopodMan said...

Thank you Nick!!

I try ZINA in the past and much others, but actually i´m using jwplayer in my site but i can´t use it with random playlist in the iphone or ipad.

Your solution work very fine, but i don´t want to show all the playlist, only the track that is playing in this moment...

Thank you very much again, i´ll investigate how to do it or other sollutions ;9

Scott said...

I was curious to know if you were continuing development as it seems jPlayer has been updated and doesn't work with your implementation. I tried using a different version of jQuery too, but the results remained the same.

nick c said...

Scott
I actually did update a while back. The update included, primarly, the following:



JPlayer Playlister v0.4 Changelog



1 - modified recursiveGetSongs function to fix double &raquo '>>' problem



2 - modified JS playlist creation to prevent root directory from being listed in the 'from' code



3 - added filter by folder option which lists (sub)folders with checkboxes for more advanced filtering and modified main function to add filtered folders to 'disallowed' when filter applied



4- corrected bug where sort option was lost when filter is applied



5- added check for overzealous filtering -- throw error and reset to no filter



6- updated to work with jplayer 2.0 (many changes // mostly in JS functions and source files)



...I never posted these changes, but really need to. I'll make a mental note to do so. Let me know if you are still interested (/waiting) and I'll make it a little more of a priority.

rob_in_da_hood said...

Simple question. Everything is great except my mp3 tag info is all being displayed in lower case. Any way to make the tag info display case sensitive?

Nick Chapman said...

*responded via email -- abbreviated here*

Hey, just remove the strtolower() functions in the source code and you'll be all set.

Sorry about that!

XXX XXX said...

Great little piece of software here. Impressed by ease of use. One question: how do you disable it from listing contents of all subfolders, and instead just make it list the contents of the current folder?

Nick Chapman said...

If I understand correctly, you want to disable recursion (subfolders) and just play songs in the root of the referenced directory?

If that is the case, remove the last 'else' clause in the 'recursiveGetSongs' function. In the source file, it should be around lines 885-898 you'd want to remove.

Let me know if you have trouble.

HTML5 Player said...

cool demonstration! eventhough HTML5 audio player might not pack all of the features it works well.. it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page, html5 music player

Jesse said...

Wow, this is awesome! Just what I've been looking for to replace my crappy flash player plugin.

One issue though: My "sort by" function appears to be broken. I set $useID3 to 'false' because I want to sort by track numbers, which I included in my filenames like this:

"01 - Artist X - Track C.mp3"
"02 - Artist Y - Track B.mp3"
"03 - Artist Z - Track A.mp3"

Since I set $useID3 to 'false' and $sortby is set to 'name', it should be sorting by file name, as listed above. But it is still sorting by track name, not file name, like this:

"03 - Artist Z - Track A.mp3"
"02 - Artist Y - Track B.mp3"
"01 - Artist X - Track C.mp3"

At first I thought it was just ignoring the numeric leading numbers in the filename, but that doesn't make sense because in that case it should sort by artist, because of how my files are named.

If I change $ID3sort from 'track' to 'artist', it sorts by artist -- even though I have $useID3 still set to false. So in actuality, it looks like it's not respecting $useID3='false' whatsoever.

Any ideas on why it is ignoring $useID3='false', or how to get my files sorted by filename and not ID3 info?

Alternatively, would it be hard to modify the code to have another ID3 sort option: Track Number (the track # field in the ID3 tag). That would be ideal!

Thanks for your work on this awesome tool!

Nick Chapman said...

*Replied via email*

In short, thanks for the feature request (ID3 track number sorting) and sorry for the buggy code (for non-ID3 sorting).

I've made a number of changes to the code to correct oversights. If you haven't done much work to the script, let me know and I'll send you the modified files (only a few) instead of walking you through the code corrections.

Simeon Reymond said...

Hello Nick,

Thank you so much for your awesome playlister! its really easy to use and customize.

I had a small issue with firefox video playback and I think I found the source of the problem. oddly as it seems, the video and audio file path is slightly different. I hope this little input can help other people!

for instance:
mp3: "media/artist_n1/song_n1.mp3"

m4v: "/playlister/media/artist_n1/video_n1.m4v"
so here the path start from the folder containing the index file if I am not mistaken.

cheers!

Nick Chapman said...

Thanks, Simeon!

I've made a few changes since v0.65 was released. A couple were Firefox specific (doesn't sound like this is the case)...but I'll definitely look into reproducing this problem and addressing it. The code that 'builds' the playlist should really discern between audio and video...just 'allowed' and 'disallowed' filetypes.

Wouldn't be the first bug I've coded. Thanks again for the information and hope the code works well for you. I hope to release an update (mostly bug-fixes -- possibly playlist caching to lighten the load when creating large playlists)

Simeon Reymond said...

Hello again,

I apologize because the previous post was incorrect.

In firefox videos and audio file path can be the same. But, the video file path must imperatively start from the root folder (I don't know why!). Infortunately, the jplayer_playlister/index.php $relMusicDir='media' can't start with a slash. So it is not possible to change it that way: $relMusicDir='/root_folder/media'

instead I fixed it in a weird way. I change these lines:

if($allowdownload=='true'){
//works for files with three character extensions only
$dl=','.$plspacer.'free:true,'.$plspacer.substr($value[path],-3).':"'.$value[path].'"';
}
else{
$dl=','.$plspacer.substr($value[path],-3).':"'.$value[path].'"';
}


into those lines (I just added the /root_folder/ twice):

if($allowdownload=='true'){
//works for files with three character extensions only
$dl=','.$plspacer.'free:true,'.$plspacer.substr($value[path],-3).':"/root_folder/'.$value[path].'"';
}
else{
$dl=','.$plspacer.substr($value[path],-3).':"/root_folder/'.$value[path].'"';
}

I am sure that there is a better way to fix it. But at least the video playback works in firefox now!
Again, thank you so much for your playlister!

Nick Chapman said...

Thanks for the tip! What version of FF are you using and what type of video file are you trying to watch?

Glad you got it to work. Hopefully, I can find a way to build the logic you mentioned in if it will prevent others from having to develop work-arounds like you did.

Simeon Reymond said...

Waou! That's a quick answer. Thank you!

I try to watch m4v files in FF 14 on macOS 10.7.3
Otherwise I use Safari 5, Opera 12, Safari on iOS 5.1

Regards

Nick Chapman said...

Ahhh...I see the problem. I've never encountered it since I've always placed my media files within the folder my player file resides in.

The variable ($RelMusicDir) is actually short for 'Relative Music Directory' and I had never even considered coding it alternate way...although it probably would be more flexible.

Out of curiousity, did you try entering a relative path like '../media'? I verified that it works with a pile of songs I have laying around...but didn't check video or cross browser compatibility.

Simeon Reymond said...

Hi again Nick!

I didn't try using ../. I feel so stupid

It works in safari but I still have the same problem in Firefox and Opera.

In fact I use a very similar folder structure as you did for your demo v065. And your demo works perfectly for audio but not for video. I am so sad I can't watch Nemo...

Nick Chapman said...

I wonder if it has to do with the flash player since (afaik) ff and opera don't support m4v natively?

I really thought i had everything working on FF last time I checked. hmm...

Thanks for pointing these problems out. Glad you were able to get them playing for your use!

macbroadcast said...

This really awsome, is there a way to reduce the amount of displayed tracks ? A scrollbar would be it !

Nick Chapman said...

Sure. It isn't really a feature (more of general web-design -- apply in-line CSS to a web element), but here ya go.

Find the following code:

<div class="jp-playlist">
(may appear twice -- once for 'a/v' mode, once for 'audio' mode -- you may not need both)

...and make it look like this:

<div class="jp-playlist" style="height:145px; overflow: auto;"
(additions in bold)

i've actually added that functionality (as a configurable variable) in the upcoming v0.67 release.

Otterboyy said...

I had to drop in and say thank you for this as I have just about zero knowledge of PHP or Java, tho I've played with PERL for awhile.

I had spent a few hours rummaging around starting to put my own code when I came across this and allows me to implement a flash free player by tomorrow on a pet project site that has taken off.

now I get to pick apart the code so I can understand it! the fun stuff!

Nick Chapman said...

Glad you like it! jPlayer does all the heavy listing...but I feel like jPlaylister (what I'm calling this, now) does help with initial implementation.

Who wants to hard-code audio files into a playlist? I guess it can make sense, depending on the need...but it seems like quite a few people can make use of the dynamic nature and convenience of being able to add/remove files from a folder and have the playlist reflect the changes, and I'm glad you are one of them.

My code is not the cleanest ever, or the most well-documented, so hopefully you won't have much trouble sifting through it. The php, for the most part controls the playlist creation and filtering options.

Straight From The Heart said...

wow great plugin .. thanks a lot ...I am really looking fwd to your new release.. here are 2 suggestion i would like to make.

1- if you can guide how to do a jquery mobile implimentation of this .. so in phones the playlist appears bigger..

2- and play list being shown only when the sub folder navigation reaches to the folder which has songs.. like if i have songs in media/genere/artist/album/abc.mp3

then the home page will show all first folder"gener" without play list being shown and then artist and then album .. now play list will be show as album is the folder which has songs now.

i think if you implement these 2 feature.. jplaylister can function as stand alone mobile music script .

thanks for all you hardwork.. much appreciated !!

Nick Chapman said...

Thanks for the comment and praise!

First of all, I think I misread your 2nd request. You want to only display the playlist at the album level? Otherwise, you just want 'current level' folder structure listed...like a file browser?

Sorry, but I don't think I'll be coding that unless I get tons of requests for it (and, only as a non default configurable variable). I understand that page loads can be slow when a big library is pointed at...but I don't think your request is one that many people would want.

For example, if I store my files as such:

artist/album/01 - song 1.mp3

...then I want to have the option to click 'artist' to play all three albums I have by that artist.

Regardless, I coded (a misread version of your request) the option (added a '$displayallfolders=TRUE' option which can be changed to FALSE) to only show folders which have content directly within them. This has the same downfall of your actual request, though...the ability to click a 'genre' or 'artist' is removed, and I like those options.

You could probably modify the code to do what you want with a little effort...namely, remove the recursion in my recursiveGetSongs() function -- literally, comment out the recursion call 10 lines from the bottom of the function. Then you'd just need to prevent the jPlayer code from displaying unless $fileinfo['count'] is > 0.

*shrugs*

As far as the first request, jPlayer is a little outside my comfort zone (I'm more of a PHP guy than JS)...but I'm surprised that there isn't a jPlayer theme for mobile...that could be applied to, literally, any implementation of jPlayer and it would be (more) mobile friendly. I may look into this later since phones/tablets are providing more and more general traffic.

That said, I don't have a release date for 0.67, because I keep adding more features. As often as I've been working lately, sometime in October may be realistic.

Take care!

Olivier Weiss said...

Thanks for that nice HTML5 player !

Is it possible to cutomize playlist ?

I mean, when selecting a folder all the files are listed in the playlist. Is there a way to delete some tracks from the playlist ?

Thanks,

Nick Chapman said...

Oliver,

Thanks for the feedback!

JPlayer did most of the heavy lifting, but I'm happy JPlaylister is useful to you.

There are a few options. While the intention is to display all music in a given directory, you can filter by directory (using the automatically generated links at the bottom, you can only view songs in a certain subfolder). If you just want some songs to be ignored, you can add them to the actual function [recursiveesongs()] exemption or exclusion array. It is somewhat documented, but checks the filename for a match, then ignores that file if it matches what is in the array

Of course, you could actually move the songs you don't want into an 'ignore' folder or something, then ignore/exclude that whole directory, I think.

Hope these options help! Let me know if I misunderstood.

tsika iaby said...

There is a little issue in the use of $skipdesc config variable : line# 868 of index.php should be : if(($skipdesc!=true) AND ($makesparse!='true') ){..}

tsika iaby said...

the variable $notice used at line# 862 of index.php is never initiailzed

Cassàinformació Cassà de la Selva said...

Hello again,
The location of the files to .. / podcasts / audio I've solved.
Try log errors discussed by email and I will explain.
I can disable this log? If it works I almost do not want to know if it has errors ... :)
And another question. accents and signs in file names can be solved, for example "cassà de la selva.mp3"

thanks for your help

Emissora de Cassà de la Selva said...

Hi, the issue of accents is simply that when an mp3 player has an accent does not recognize the letter and not rendered.
I pass a link of example

http://radiocassa.cat/web/podcast/butlletiportada/index1.php

regards

Fabio said...

Hello,
Great stuff!
Sometime we have to admit our limits and I really don't know hot to get some hints in order to implement the jPlayer Playlister.
:-) I know about telecommunications, microwave, Radio TV broadcast, but I am very poor in knowledge and skills in scripts and programming... and have no mentors.

I got the jPlayer online and working and still have no idea about the steps that can make me put in place the Playlister and add my mp3 files to a playlist.
...So here I am, humbly asking for some help, here , via e-mail or in any other way!

Thank you!
Fabio

Nick Chapman said...

@Fabio...

Hit me up@ thenickchapman[at_symbol]gmail.com

I'd be happy to help out. Is your attempted implementation on a public website? I'll be much more help if I can glance at it myself.

Thanks!

Cassà Selva said...

We're using with the help of Nick Chapman, if I can help with anything you say ...
Understand Spanish?
regards