Ruby On Rails, CouchDB and Me – Part 7 – JQUERY,JPlayer and HTML5

Part 0 – REST, Ruby On Rails, CouchDB and Me

Part 1 – Ruby, The Command Line Version

Part 2 – Aptana IDE For Ruby

Part 3 CouchDB Up and Running on Windows

Part 4 – CouchDB, Curl and RUBY

Part 5 – Getting The Data Ready for CouchDB  

Part 6 – Getting The Data Into And Out Of CouchDB

Part 7 – JQUERY,JPlayer and HTML5

We have two missions in the current post:

• Getting Our browser side chops together: Using Javascript, DHTML, CSS Level 3, JQUERY against our JSON feed
• 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:

• Eliminating (or at least simplifying) DHTML coding differences between all main stream browsers (and most non-mainstream ones);
• Simplifying and abstracting the operations necessary to drive DHTML via Javascript.

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.

We start with two EMPTY HTML tags on our page:

<div id=”concertdiv“>

<lu id=’track’></lu>

We can iterate this object  using javascript as:

ConcertList2(gdData);

where ConcertList2 is defined as:

function ConcertList2(o){
var iaURL=”http://www.archive.org/details/”
for (ndx = o["rows"].length – 1; ndx !=-1; ndx–) {
var cdate = o["rows"][ndx].id;
var venue = o["rows"][ndx]["value"][0];
var itemID=ndx.toString();
var uri= iaURL +o["rows"][ndx]["value"][1]
var href=”<a id=”href” href=”"+uri+”" target=”_BLANK”>”+” – IA -” +”";
var className=’normal’;
if (ndx==0){
className=’hilite’;
}
var item=”

” + cdate + ‘ – ‘ + venue + href + ‘

‘ ;
$(‘#concertdiv’).after(item);
}
}

The javascript variable “item” for a given concert would contain a string of HTML:

<p id=’0’ class=’concert normal’>1969-08-16 – Woodstock Music <a href=http://www.archive.org/details/gd1969-08-16.sbd.gmbfixed.95918.flac16’/>-IA-</p>

Note that this tag contains two class: ‘concert’ and ‘normal’.

The JQuery code line:

$(‘#concertdiv’).after(item);

consists of a selector:

#concertdiv

an action verb:

after

and an argument:

item

The selector uses CSS 3 syntax so it selects the SET of all tags with the ID of ‘concertdiv’.  In our page this is a set of one item.

Iterating through our JSON object will post-pend our items after the tag associated with concertdiv

The results  looks like this on the Browser Page:

1969-08-16 – Woodstock Music – IA -

1980-08-16 – Mississippi River Festival – IA -

1981-08-16 – MacArthur Court – University of Oregon – IA -

1987-08-16 – Town Park – IA -

1991-08-16 – Shoreline Amphitheatre – IA -

Simple, no?

We can iterate and display the tracks as:

TrackList(gdData,ndx);

where TrackList is defined as:

function TrackList(o,ndx){
$(‘li’).remove();
var ndx1=0;
for(ndx1=o["rows"][ndx]["value"][2].length – 1;ndx1!=-1;ndx1–){
var title=o["rows"][ndx]["value"][2][ndx1].title;
var time=o["rows"][ndx]["value"][2][ndx1].time
var track=o["rows"][ndx]["value"][2][ndx1].track
var uri=o["rows"][ndx]["value"][2][ndx1].uri
var item=”<li>” + track + ‘ ‘+ time +’ ‘+title+ ‘</li>’;
$(‘#track’).after(item);
}

}

In this case our ‘item’ variable contains a simple HTML string like:

<li>01 03:08 Stage Announcements, Introduction</li?

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:
  

  function bindClick(){
  $(‘.concert’).click(function() {
  removehilite();
  $(this).toggleClass(‘hilite’,true);
  TrackList(gdData,$(this).attr(‘id’));
  });
  }

• This bound function uses the pre-defined function ‘removehilite’ to swap

• function removehilite(){
  $(‘.concert’).toggleClass(‘hilite’,false);
  $(‘.concert’).toggleClass(‘normal’,true);
  }

  and a simple inline CCS definition:

  <style>
  .normal {color:#0B559B;}
  .hilite {color:#FF0000;}
  </style>

  We pull this all together into a simple driver as:

              gdData=<%=  @parm  %> ;
  $(document).ready(function(){
  ConcertList2(gdData);
  bindClick();
  TrackList(gdData,”0″);
  });

  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:

  <audio controls=”controls”>
  <source src=”horse.mp3″ type=”audio/mp3″ />
  Your browser does not support the audio element.
  </audio>

  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

  • Is a JQuery widget
  • Works with JQuery Themeroller
  • Has a very active user community
  • Displays graphics and video as well as audio tracks

  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:

  <link href=”/skin/jplayer.blue.monday.css” rel=”stylesheet” type=”text/css” />

  <script type=”text/// <![CDATA[
  javascript" src="
  // ]]>http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js“></script>

  <script type=”text/// <![CDATA[
  javascript" src="
  // ]]>/javascripts/jquery.jplayer.min.js“></script>

  <script type=”text/// <![CDATA[
  javascript" src="
  // ]]>/javascripts/Playlist.js“></script>

  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:

  function makePlayList(selected){

  var ndx1=0;

  var tList=new Array();

  for (ndx1 = gdData["rows"][selected]["value"][2].length – 1; ndx1 != -1; ndx1–) {

  tList[ndx1] = buildTrack(gdData["rows"][selected]["value"][2][ndx1].track, gdData["rows"][selected]["value"][2][ndx1].time, gdData["rows"][selected]["value"][2][ndx1].title, gdData["rows"][selected]["value"][2][ndx1].uri, gdData["rows"][selected].id.substring(0, 4));

  }

  return tList;

  }

  In turn, buildTrack looks like:

  var buildTrack=function(num,time,title,ref,cYear){
  var dwnldicon=’pic/download.png’;
  var    nameFMT=”$0     $1     $2<img src=’$4′>“;   
  var track=new Object();
  var name=nameFMT.replace(“$0″,num);
  name=name.replace(“$1″,time);
  name=name.replace(“$2″,title);
  name=name.replace(“$3″,ref);
  name=name.replace(“$4″,dwnldicon);
  track.name=name;
  track.mp3=ref;
  track.poster=”/pic/”+cYear+”.png”;
  return track;
  };

  All of which is returned to JPlayer as:

  mediaPlaylist.playlist = makePlayList(selected);

  Our core Javascript code now looks like:

  var mediaPlayer=null;

  $(document).ready(function(){

  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):

  The Sad IE 8 Track Display

  What more can I say?