Using JQuery UI and a JQuery UI Plugin: JPlayer to play songs from Internet Archive based on our JSON feed

Recall that our JSON feed provides concert and track data for concerts preformed on an arbitrary date. The top level data of the feed can be visualized like this:

The field total row refers to the total number of records in the database not the number of rows in this feed. The field offset indicates the entry point in the b-tree of the view used for this feed. Beats me why these would be useful to the calling program! Following this ‘header’ data we have each concert listed in Key order. The offsets and values are

0: Venue

1: IAKey

2: Array of Track Data

We can visualize the expanded track data array as:

Within each offset of the array we have the fields:

uri – The pointer into IA for the mp3 file

track – order in the concert of this track

title – track name

time – Track length as MM:SS

We clearly could iterate through these fields and list the concerts and tracks statically on the web page using standard ROR tools but lets be more dynamic. Let’s first display the concert dates and venues and then display the tracks for a concert when the user click on a concert without a round trip to the server (and ROR).

Do You Do JAVASCIPT?

Someone once said that Javascript is the only languare that people use without knowning how. Don’t be one of those people. The cleanest approach to learning Javascript is Crockfords: Javascript: The Good Parts – Simple, clean Javascript fun. (Steal This Book Here) Read this even if you ‘know’ Javascript. If you don’t like to read, try the movie:

JQUERY: It Puts the Dynamic into DHTML.

JQuery is my favorite Javascript library. Not necessarily the best or the most common. Just my favorite. JQuery accomplishes two goals very well:

The design of JQUERY leverages the CSS 3 selector syntax so you will need to understand modern CSS selectors.

DHTML was first introduced as a Microsoft extension. Netscape (remember Netscape?) soon followed with a similar, but not exact DHTML API of its own. Further each of these browsers also tended to render certain edge cases differently. And the CSS Level 3 Selectors and HTML5 specifications were coming down the pike. Both CSS3 and HTML5 are now a reality on Chrome, Foxfire and Safari (and some day, real soon) on IE9. What to do? John Resiq had an idea and the idea was called JQUERY. The BASIC idea is to use the CSS Level 3 selectors to selects sets of HTML Tags and then to preform actions on those tags using a common API which would mask the differences between Browsers (and differences between versions of browsers). Along the way JQUERY attempts to provide features not available in some browsers as long as those features would appear in the (then emergent) HTML5 specification. Learning JQUERY is difficult only because the API is abstract and their is no BEST text on JQUERY. Here is how John explains JQUERY:

OK So Lets See Some Code Already!

Iterating The JSON Object In Javascript And Display Using JQUERY

Please refer to our prior post for a description of how the JSON object is delivered to the page via the Rails mark up in our rb file. Basically we had a single line:

gdData=<%= @parm %> ;

Let’s work with this data to display the structure on the browser screen.

The results on the browser page for a given concert will look like this:

01 03:08 Stage Announcements, Introduction

02 02:04 Saint Stephen >

03 02:42 Mama Tried >

04 00:38 High Time false start

05 10:28 Stage Banter. Technical Difficulties

06 19:05 Dark Star >

07 06:10 High Time

08 38:32 Turn On Your Lovelight

09 01:52 Applause, Stage AnnouncementsWe can bind these two display routines together with two simple Javascript functions so that when we click on a concert name the page will refresh the track list without a visit back to the web server.First we will use JQUERY to BIND a function to a click event to the concert class:

Got it? Good. Now let’s use a JQUERY UI plug in allow us to play concerts from our browser page.

JQUERY UI and JQUERY UI Widgets

As useful as JQUERY is for dynamic web pages let’s go further use the JQuery UI system and the UI Widget: JPlayer, to allow us to play the mp3 files which reside on Internet Archive. JQuery UI is a system built on top of JQUERY to allow the systematic development of UI Widgets which page developers can deploy which minimize un wanted interactions between widgets. Further the JQuery UI system (and widgets developed within that system) can use a systematic set of theme classes whose color scheme can be generated with a nice tool called ThemeRoller. I will not have a lot to say about these products in general (except to say they are free and work great) and you will need to visit the links noted in this paragraph to learn more about these tools.

HTML5 Audio Tag

HTML5 has introduced a new tag to allow playing audio without using a plug in. There are some issues still being worked out since there is NOT common agreement yet about whether the standard should universally support MP4 or OGG files universally. Currently MP3 is supported by all browsers which support HTML5. Nominally the new tag looks like this:

Note that the line after the “source” tags is what is rendered if your browser does NOT support HTML5. If we replace this line with appropriate code to support a plug-in like Flash we have a control which will play well in both HTML5 and HTM4 environments. We could develop our own solution but I have been working with JPlayer a very nice JQUERY UI widget and will use that for this post. I like this widget because JPlayer

I developed my final browser page in this series using a modified version of the ‘demo 2’ code example which is downloaded along with JPlayer. Here is the plan:

Display the Concert list the same way as above (with a few extras for visual appeal). Prepare the track list in a way similar to that used above but modified to put it in a form that JPlayer can both display the tracklist for us and load the track list into JPlayer (more on this below). We are going to modify the RoR rb file but not the underlying R0R code. We will let the browser do the work. I follow this strategy since our next phase of the project will allow the user to select the date for which concert data is to be displayed and played using AJAX calls in a RESTful manner (more on this next time) rather than round tripping to the server when we want to load a new date (or date range).

What changes?

Two new Javascript files: one for JPlayer and one to handle preparing the track list for JPlayer to consume; and a reference to the themeroller prepared CSS file:

Playlist.js is the new file I am contributing to the mix the others are JQuery and JPlayer Javascript files.

Using Themeroller styles I can generate a completely different style for the page and only chang the link reference to the CSS page to change how the page appears. There are NO embedded style elements on the page.

Rather than calling the TrackList method I am going to call a new method makePlayList when a concert is selected. This code looks like this:

ConcertList2(gdData); //displays the concert list at the top of the page

bindClick(); //binds a click event on a concert to loading a new playlist to JPlayer

mediaPlaylist = new Playlist(“1”,makePlayList(0) , //jump start with the first concert item

{

ready: function() {

mediaPlaylist.displayPlaylist(); //show the playlist

mediaPlaylist.playlistInit(false);

},

ended: function() {

mediaPlaylist.playlistNext();

},

swfPath: “javascripts”, //jplayer option

solution: “flash, html”, //jplayer option

supplied: “mp3” //jplayer option

});

});

Most of our HTML tags are stolen directly from the JPlayer ‘demo 2’ code and mostly deal with setting up the player controls (play, pause, stop, next, etc).

OK. The new browser page looks like this (in two Parts):

Concert Listing Section:

I am using icons for hyperlinks to the Internet Archive Grateful Dead Collection: and the smaller icons to link to all recordings for a given date:. The bottom half of the screen contains the JPlayer and its user controls as well as a user selectable track list:

The image is associated with the track selected (there is a JPlayer bug with the images. If the same image is associated with two seccesive tracks the second picture will not be displayed – they are working on this). I use the selected Concert text (in this case “Madison Square Garden: 1987-09-16” as a hyperlink to the page containing the concert recording on Internet Archive.

These screen captures are from Chrome (Safari and FireFox look the same). On IE 8 (and lower) HTML5 is not supported and the player reverts to Flash. The track list on IE8 is not as pretty and is no longer selectable (although the player controls still work):