A jukebox icon (Photo credit: Wikipedia)
Here’s a piece of work I did on a freelance basis back in early 2012 for a client who allowed me to retain the full rights to the code as a “library” which I could distribute. (I offered them two prices of course, one cheaper rate where I retain the rights and one premium rate in which the code was exclusive to them and I would not distribute). After explaining that based on their request, I would be building it as HTML5/CSS3/JS front-end code that lives in the browser client and regardless of which choice they made it would be entirely possible for someone else to simply hit “view source” and/or sniff out raw traffic packets to copy it in full, they of course chose the cheaper option; they knew from all the hype around HTML5 in 2012 that they wanted it done in HTML5 and browser-based without relying on Flash (using Flash as a fallback only). Of course, the ease with which it would be copyable would depend entirely upon how well they protect their site through SSL-certs/code-signing/code-obsfucation/disabling-ViewSource or for example, put it behind a web viewer in a Mobile App or RIA viewer (Flex/Silverlight/JavaFX) and hiding URLs, if they really want it private. But that’s another point altogether!
They chose the cheaper option so I’ve been sitting on the code and until now I had been a combination of “too lazy”, “too busy” and “out-of-respect-for-them” not bothering to release or advertise the existince of said code. However, the time has come to unleash it! For those who’ve been at this for as long as me or longer, you may recognize that it is inspired heavily by some earlier 2009-2010 HTML5 audio demos done by the Mozilla development team as far as the look & feel; but I’ve added quite a few new features to it (for example the Flash-based fallback for old browsers like IE 5-8), CSS for a slick flat direct-link playlist if both HTML5 & Flash are missing, and the main feature which is support for both XSPF and JSPF playlist formats, which are by far the most popular open playlist data formats which really should be supported by all Online Music services (but that’s another story).
Ironically enough (as I blogged about benefits and annoyances of skeumorphs last year) it is more of a skeumorph for my old iPod shuffle which had two simple arrows (left for “previous”, right for “next”) than it is for an actual Jukebox, but I’m still calling it a jukebox where you can pick from multiple albums as long as they are all aggregated to the same XSPF/JSPF Playlist. Either way, I rather like it and think it borderline qualifies as a flat-design, web-based version of a Jukebox. It was also a disproportionately lot of work to put together considering I did the work for quite cheap and it was ultimately only going to be used to play a specific band’s few albums they had at the time online. As mentioned, it can pretty much support up to 1000’s of songs at a time (though I haven’t tested its limits or ran any browser comparison benchmarks or anything fancy-pantsy like that). Either way, it should theoretically fit as many as could fit into a single XML/JSON file without bringing your browser to a griding halt when trying to fetch, load and parse it, which is definitely in the hundreds if not thousands of lines of items.
Here it is, with a modest 4 sample albums (only one song per album for rights purposes) with royalty-free music I downloaded from Jamendo before they went under and/or re-focused their “open music community”.
Model
The Model is a standard XSPF playlist in XML format is simple enough to create by hand or even easier by using a Playlist Generator. The included “playlist.php” script optionally also generates a playlist based on your directories, where files are stored in “Artist/Album/
Playlist (XML):
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?> <playlist version="1" xmlns="http://xspf.org/ns/0/"> <title>Example Playlist</title> <creator>bcmoney</creator> <annotation>4 tracks in this playlist</annotation> <info>http://localhost/audio/</info> <location>http://localhost/audio/playlist.xml</location> <identifier>example:playlist.xspf</identifier> <image>http://localhost/audio/img/logo.jpg</image> <date>2010-06-24T09:36:02</date> <license>http://creativecommons.org/licenses/by-nc-sa/2.5/</license> <trackList> <track> <location>http://localhost/audio/songs/Kendra%20Springer/Hope/Hope.mp3</location> <identifier>http://musicbrainz.org/track/324f2713-0134-4ffb-9774-7c1b3613ab8c.html</identifier> <title>Hope</title> <creator>Kendra Springer</creator> <annotation>Lyrical piano music to lift your spirits</annotation> <info>http://www.jamendo.com/en/track/469312</info> <image>http://localhost/audio/img/album-covers/Kendra%20Springer%20-%20Hope.jpg</image> <album>Hope</album> <trackNum>1</trackNum> <duration>187</duration> </track> <track> <location>http://localhost/audio/songs/DEUS/There%27s%20nothing%20impossible/There%27s%20nothing%20impossible.mp3</location> <identifier>http://musicbrainz.org/track/dbaa6332-cb93-41b4-8060-b86bd54626e1.html</identifier> <title>There's Nothing Impossible</title> <creator>DEUS</creator> <annotation>Electronic techno instrumental chillout, made famous by the "Web2.0 - The Web Is/Using Us" viral video by Professor Michael Wesch</annotation> <info>http://www.jamendo.com/en/track/620</info> <image>http://localhost/audio/img/alb/-covers/DEUS%20-%20There%27s%20nothing%20impossible.jpg</image> <album>There's Nothing Impossible</album> <trackNum>2</trackNum> <duration>262</duration> </track> <track> <location>http://localhost/audio/songs/The%20Kyoto%20Connection/The%20Kyoto%20Connection%20II/Right%20time%20wrong%20universe.mp3</location> <identifier>http://musicbrainz.org/track/cf52b003-7e58-4f4e-9473-0ac5c7aa51cd.html</identifier> <title>Right time Wrong Universe</title> <creator>The Kyoto Connection</creator> <annotation>The Kyoto Connection is a musical Voyage. It's sweet electronic music, with a Japanese feeling.</annotation> <info>http://www.jamendo.com/en/track/212294</info> <image>http://localhost/audio/img/album-covers/The%20Kyoto%20Connection%20-%20The%20Kyoto%20Connection%20II.jpg</image> <album>The Kyoto Connection II</album> <trackNum>3</trackNum> <duration>246</duration> </track> <track> <location>http://localhost/audio/songs/Azoora/The%20Big%20Bang%20EP/Cruise%20Control.mp3</location> <identifier>http://musicbrainz.org/track/db18f325-399e-49a2-ab19-8ae533a1b7ef.html</identifier> <title>Cruise Control</title> <creator>Azoora</creator> <annotation>6 brilliant songs that takes you deeper into the deep. A true psychedelic journey through space and time...</annotation> <info>http://www.jamendo.com/en/track/254187</info> <image>http://localhost/audio/img/album-covers/Azoora%20-%20The%20Big%20Bang%20EP.jpg</image> <album>The Big Bang EP</album> <trackNum>4</trackNum> <duration>174</duration> </track> </trackList> </playlist>
That same playlist represented as JSON (you can convert back and forth with XML2JSON).
Playlist (JSON):
{
"playlist": {
"title": "Example Playlist",
"creator": "bcmoney",
"annotation": "4 tracks in this playlist",
"info": "http://localhost/audio/",
"location": "http://localhost/audio/playlist.xml",
"identifier": "example:playlist.xspf",
"image": "http://localhost/audio/img/logo.jpg",
"date": "2010-06-24T09:36:02",
"link": [],
"meta": [],
"license": "http://creativecommons.org/licenses/by-nc-sa/2.5/",
"extension": {},
"track": [
{
"annotation": "Lyrical piano music to lift your spirits",
"title": "Hope",
"creator": "Kendra Springer",
"info": "http://www.jamendo.com/en/track/469312",
"image": "http://localhost/audio/img/album-covers/Kendra%20Springer%20-%20Hope.jpg",
"album": "Hope",
"trackNum": 1,
"duration": 187,
"location": [
"http://localhost/audio/songs/Kendra%20Springer/Hope/Hope.mp3"
],
"identifier": [
"http://musicbrainz.org/track/324f2713-0134-4ffb-9774-7c1b3613ab8c.html"
],
"link": [],
"meta": [],
"extension": {}
},
{
"annotation": "Electronic techno instrumental chillout, made famous by the "Web2.0 - The Web Is/Using Us" viral video by Professor Michael Wesch",
"title": "There's Nothing Impossible",
"creator": "DEUS",
"info": "http://www.jamendo.com/en/track/620",
"image": "http://localhost/audio/img/album-covers/DEUS%20-%20There%27s%20nothing%20impossible.jpg",
"album": "There's Nothing Impossible",
"trackNum": 2,
"duration": 262,
"location": [
"http://localhost/audio/songs/DEUS/There%27s%20nothing%20impossible/There%27s%20nothing%20impossible.mp3"
],
"identifier": [
"http://musicbrainz.org/track/dbaa6332-cb93-41b4-8060-b86bd54626e1.html"
],
"link": [],
"meta": [],
"extension": {}
},
{
"annotation": "The Kyoto Connection is a musical Voyage. It's sweet electronic music, with a Japanese feeling.",
"title": "Right time Wrong Universe",
"creator": "The Kyoto Connection",
"info": "http://www.jamendo.com/en/track/212294",
"image": "http://localhost/audio/img/album-covers/The%20Kyoto%20Connection%20-%20Right%20time%20wrong%20universe.jpg",
"album": "The Kyoto Connection II",
"trackNum": 3,
"duration": 246,
"location": [
"http://localhost/audio/songs/The%20Kyoto%20Connection/The%20Kyoto%20Connection%20II/Right%20time%20wrong%20universe.mp3"
],
"identifier": [
"http://musicbrainz.org/track/cf52b003-7e58-4f4e-9473-0ac5c7aa51cd.html"
],
"link": [],
"meta": [],
"extension": {}
},
{
"annotation": "6 brilliant songs that takes you deeper into the deep. A true psychedelic journey through space and time...",
"title": "Cruise Control",
"creator": "Azoora",
"info": "http://www.jamendo.com/en/track/254187",
"image": "http://localhost/audio/img/album-covers/Azoora%20-%20The%20Big%20Bang%20EP.jpg",
"album": "The Big Bang EP",
"trackNum": 4,
"duration": 174,
"location": [
"http://localhost/audio/songs/Azoora/The%20Big%20Bang%20EP/Cruise%20Control.mp3"
],
"identifier": [
"http://musicbrainz.org/track/db18f325-399e-49a2-ab19-8ae533a1b7ef.html"
],
"link": [],
"meta": [],
"extension": {}
}
]
}
}
View
The structure for the View (page) is as simple as possible, to make it easy to style and script all on the client-side.
HTML:
...
Next, the basic CSS to style the View (layout) in a relatively simple manner.
CSS:
...
Controller
Lastly, the JavaScript that parses the playlist and outputs a corresponding human-readable playlist to be displayed as HTML in a browser is essentially the Controller for the web application.
JavaScript:
...
-or-
Make sure you’re passing the playlist file as a GET parameter to the player by the name of “url”, and with a value that points out the full or relative path to your “playlist.xml” or “playlist.json” file.
So if I’m running it on my own local dev environment, I would use:
http://localhost/audio/?url=http://localhost/audio/playlist.xml
The really cool part of this is that it doesn’t have to be a static XML or JSON playlist file, the playlist URL could point to a dynamic local script or an external Web Service that generates or exports playlists in the XSPF (or JSPF) format.
That’s all there is to it!
Feel free to include it in your own projects or modify it as you see fit. License is MIT like the Mozilla examples and guides I was inspired by.