Archive for the ‘HTML5’ Category

On Public Access to the Internet Archive’s Grateful Dead Collection   1 comment

Although I have covered this topic in a technical blog some time ago, the programmatic approach is not for everyone.  As one correspondent wrote:

Cloud,

I just want to listen to Dark Star on my IPOD, not get a computer science degree.

paul6

Well, if you just want to listen to Dark Star (or Fire On the Mountain for that matter) just go here or here.  Right Click on any track listed, select SAVE AS and Bear’s your Uncle.  But if your needs go deeper and you don’t want to write code; here dear reader is a simple explanation involving nothing more technical than a browser (Chrome will do fine but use Internet Explorer will work also) and a text editor (notepad for example).

Know Your Rights

The first thing we do, let’s kill all the lawyers…

                                              Shakespeare  ‘Henry VI,” Part II

Please read the statement from the Internet Archive on use of the Grateful Dead recordings stored on the Internet Archive here.  Understanding and interpretation of same is up to you, not me. I am not a lawyer, I don’t even play one on television, thank you.

PBS680505-01-FP

Doing a Single Track

Let’s say we like an early Dark Star, say:  Grateful Dead Live at Carousel Ballroom on 1968-01-17 for example.  Cursing to the Internet Archive we find the concert page for the Soundboard version we like the best:

image

Opps, No downloads on this concert. Let’s take a closer look at the browser screen, at the URL text box at the top:

Picture2

the “Https://archive.org/details” is the same on all concerts but the other part is the unique key for this particular version of this concert:

gd1968-01-17.sbd.jeff.3927.shnf

I will call this the IAKEY.  We will use this key to delve into the Internet Archive a little more deeply.  Copy this text string from the URL text box and copy it into a Notepad text document.  Now we need a list of all the mp3 files associated with this recording of this concert. Internet Archive stores these in an xml file uniquely defined for each recording. Copy the following template string into a second Notepad text document:

http://www.archive.org/download/{IAKEY}/{IAKEY}_files.xml

Now using text replace the string “{IAKEY} with the IAKey we got perviously.  When you are done the string will look like:

http://www.archive.org/download/gd1968-01-17.sbd.jeff.3927.shnf/gd1968-01-17.sbd.jeff.3927.shnf_files.xml

Open a new browser window and copy this new string into the URL text box and press enter.  Here is what you get back:

Picture3

Search for “Dark Star” on the screen and locate the mp3 file name I will call this the TrackMP3 (ignore any mp3 entries with the digits 64 in the mp3 file name).  In this case the mp3 for Dark Star is:

gd68-01-17d1t03_vbr.mp3

Open up your Notepad document as paste this string into it:

http://www.archive.org/download/{IAKEY}/{TrackMP3}

Now in this string replace {IAKEY} with gd1968-01-17.sbd.jeff.3927.shnf as we did before and replace {TrackMP3} with gd68-01-17d1t03_vbr.mp3

The final text string will now look like:

http://www.archive.org/download/gd1968-01-17.sbd.jeff.3927.shnf/gd68-01-17d1t03_vbr.mp3

Open up a new browser tab and paste this string into it and press enter.  There you are Dark Star will start playing and just RIGHT CLICK and Select “Save As” and Bear’s your uncle.

r733929_5943031

Doing a Group of Tracks

This gets tedious right away.  You can improve this process to skip the part where the file starts playing first by using a little HTML code.  I am not going to explain the whole process but it works like this:

follow the steps above and get a couple (or all) of the TrackMP3 strings.  “Turn on Your Love Light” has an TrackMP3 of gd68-01-17d1t01_vbr.mp3.  Cryptical Envelopment has a TrackMP3 of gd68-01-17d2t01_vbr.mp3 and  Dark Star we already know.

Open a text editor and enter the lines:

<html><body>

<a href=http://www.archive.org/download/{IAKEY}/{TrackMP3}> {title}</a>

<a href=http://www.archive.org/download/{IAKEY}/{TrackMP3}> {title}</a>

<a href=http://www.archive.org/download/{IAKEY}/{TrackMP3}> {title}</a> 

</body><html>

Now replace {IAKey} and {TrackMP3} and {title} in each line with the strings you got above and save the text file with the extension HTML (NOT as a txt file).  Load the HTML file into the browser (drag and drop will work) and you will see in the browser:

Turn on Your Love Light

Cryptical Envelopment

Dark Star

Right click on each of these in turn and click Save As… I hope you are getting the picture now.

tumblr_mg3mwmD25A1qabpu5o1_500

QCON 2011 San Francisco and Occupy California   2 comments

Let me say write off that I do not pay for my own ticket to QCON, my boss picks up the tag.  I love QCON.  It is definitely not MIX. I go there to see what is happening in the world which 6439629043_9a7e84a2bd_z is NOT Oracle and Not Microsoft.  That’s the same reason I read their online Zine: InfoQ.   QCon always provides a look at what is current and recent in the open stack world.  This year we looked closely at REST, Mobile development, Web API and NOSQL. As they did last  year QCON provides a nice look at what is open and emerging.  Big metal with always be with us but the desk top is looking6373613127_9780c7d60f very weak during the next few years while Mobile devices of all kinds and makers are exploding.  The biggest fall out is that while HTML5 is only slowly emerging on desktops in place, all new Mobile devices (which is to say most new systems) will be fully HTML5 compliant.  Not only that but with the exception of Windows Phones, the rendering engine for all mobile devices is based on WebKit.  What this mean for those of us in the cubes is that worrying about how to bridge to pre-HTML5 browsers with HTML5 code is a non-issue.  Mobile development is HTML5 development.  The big metal end of the supply chain is being segmented into Web API servers (which service JSON XHR2 data calls) and the NOSQL engines which serve the WEB API farms.  Remember a native mobile app     ideally has pre-loaded all of its pages its interactions are solely over JSON XHR2 for data (be it documents, data or HTML fragments).  The traditional JSP or ASPX web server is not really in play with native mobile apps and has and increasingly small role to play in “native like” or browser based mobile apps.  Let’s move on.

“IPad Light by cloud2013”

Speaking of moving on: There is an occupation going on in this country.  I visited occupations sites in San Francisco, UCal Berkeley and  Berkeley “Tent City”.  These are all very active and inspiring occupy sites.  Now if we can only get to Occupy Silicon Valley! 

I attended the REST in Practice tutorial this year and it was a very nice.  The authors were well informed and the agenda comprehensive.  I personally like the Richardson maturity model but think that people are not facing up to the fact that level three is rarely achieved in practice and the rules of web semantics necessary to interoperate at level 3 are almost non-existent. Remember the original REST model is client/server.  The basic model is a finite state machine and the browser (and the user) are in this model required to be dumb as fish.  Whether Javascript is a strong enough model and late binding semantics can be made clear enough to pull off level three is really an open question which no one has an answer to.  If we forget about interoperability (except for OAuth) things start to fall into place but we thought OPENNESS was important to REST.

Workshop: REST In Practice by the Authors: Ian Robinson & Jim Webber

Why REST? The claims:

· Scalable

· Fault Tolerant

· Recoverable

· Secure

· Loosely coupled6439625819_5705585c80

Questions / Comment:6380018433_9172323197

Do we agree with these goals?

Does REST achieve them?

Are there other ways to achieve the same goals?

REST design is important for serving AJAX requests and AJAX requests are becoming central to Mobile device development, as opposed to intra-corporate communication. See Web API section below.

Occupy Market Street (San Francisco)            

The new basic Document for REST: Richardson Maturity Model (with DLR modifications)

Level 0:

One URI endpoint

One HTTP method [Get]

SOAP, RPC

Level 1:

Multiple URI,

One HTTP Method [Get]

Century Level HTTP Codes (200,300,400,500)

Level 2:

Multiple URI,

Multiple HTTP Methods

Fine Grain HTTP Codes (“Any code below 500 is not an error, it’s an event”)

URI Templates

Media Format Negotiation (Accept request-header)

Headers become major players in the interaction between client and server

Level 3:  The Semantic Web

Level 2 plus

Links and Forms Tags (Hypermedia as the engine of state)

Plus emergent semantics

<shop xmlns=”http://schemas.restbucks.com/shop&#8221;

xmlns:rb=”http://relations.restbucks.com/”&gt;

<items>

<item>…</item>

<item>…</item>

</items>

<link rel=”self” href=http://restbucks.com/quotes/1234 type=”application/restbucks+xml”/>

<link rel=”rb:order-form” href=”http://restbucks.com/order-forms/1234″ type=”application/restbucks+xml”/&gt;

</shop>

6439622787_7b614f312c

Think of the browser (user) as a finite State Machine where the workflow is driven by link tags which direct the client as to which states it may transition to and the URI associated with each state transition.6380028389_e64c6a826f

The classic design paper on applied REST architecture is here: How To GET a Cup Of Coffee. Moving beyond level 1 requires fine grain usage of HTTP Status Codes, Link tags, the change headers and media type negotiation. Media formats beyond POX and JSON are required to use level 3 efficiently (OData and ATOM.PUB for example).

Dude, where’s my two phase commit? Not supported directly, use the change headers (if-modified, if-non-match, etag headers) or architectural redesign (redefine resources or workflow). Strategic choice is design of the finite state machine and defining resource granularity.

clip_image002

(Slide from Rest in Practice)

Architectural Choices:

The Bad Old Days: One resource many, many ‘verbs’.

The Happy Future: Many, many resources, few verbs.

The Hand Cuff Era: Few Resources, Few verbs.

The Greater Verbs:

GET: Retrieve a representation of a resource

POST: Create a new resource (Server sets the key)

PUT: Create new resource (Client sets the key); ( or Update an existing resource ?)

DELETE: Delete an existing resource

Comment: The proper use of PUT vs. POST is still subject to controversy and indicates (to me) that level 3 is still not well defined.

Typically they say POST to create a blog entry and PUT at append a comment to a blog. In Couchdb we POST to create a document and PUT to add a revision (not a delta) and get back a new version number. The difference here is how the resource is being defined, which is an architectural choice.

6439621853_3275941633

The Lesser Verbs:

OPTIONS: See which verbs a resource understands

HEAD: Return only the header (no response body)

PATCH: Does not exist in HTML5. This would be a delta Verb but no one could agree on a specification for the content.  Microsoft did some early work on this with their XML Diffgram but no one else followed suit.

Security

Authentication (in order of increased security)

Basic Auth

Basic Auth + SSL

Digest

WSSE Authentication (ATOM uses this)

Message Security:

Message Level Encrypt (WS-SEC)

For the Microsoft coders I highly recommend

RESTful .Net (WCF For REST (Framework 3.5) Jon Flanders

There are significant advantages to building your RESTful services using .Net.  Here is a comparison table to get you oriented:

DLR’s Cross Reference:
Web Service Standard REST Service WCF For REST (Framework 3.5)
1 TCP/IP + others TCP/IP TCP/IP
2 SOAP Wrapper HTTP HTTP
3 SOAP Headers HTTP Headers HTTP Headers
4 WS*Security Basic Auth/SSL Basic Auth/SSL or WS*Security
5 Early Binding Late Binding Late Binding
6 XSD WADL XSD, WADL
7 XML Media Negotiation Media Negotiation
8 SOAP FAULTS HTTP Response Codes HTTP Response Codes
9 Single Endpoint Multiple Endpoints, URI Templates Multiple Endpoints, URI Templates
10 Client Proxy Custom auto-generated Javascript proxy

6439623457_d2599a85eb_m

The REST of the Week

Wednesday is more or less vendor day at QCON and the sessions are a step down from the tutorials but the session quality6373577519_b3a8be078c picked up again on Thursday and Friday.  XXX XXXX who gave an excellent tutorial last year gave an informative talk on ‘good code’.  The Mobile Development and HTML5 tracks were well attended and quite informative.  The fie   ld is wild open with many supporting systems being free to the developer (support will cost you extra) and the choices are broad: from browser ‘responsive design’ application to native appearing applications to native apps ( and someone threw in “hybrid app” into the mix).  The Mobile panel of IBM DOJO, JQuery.Mobil and Sencha was hot.  I am new (to say the least) to Mobile development but here are my (somewhat) random notes on these sessions:

MOBILE Development is HTML5 Development

HTML5 is the stack. Phone and Tablet applications use WebKit based rendering engines and HTML5 conformant browsers only (Windows Phone 7 is the exception here). HTML5 has its own new security concerns ( New Security Concerns)

Three major application development approaches are:

· Browser Applications;

· Native like Applications;

· Hybrid Applications; and

· Native Applications.

Browser applications may emulate the screens seen on the parallel desk top browser versions on the front end but in practice the major players (Facebook, YouTube, Gmail) make substantial modifications to at least the non-visual parts of the Mobile experience making extensive use of local storage and the HTML5 manifest standard for performance and to allow for a reasonable off line experience. Browser applications fall under the guidelines of Responsive Design (aka adaptive Design) and tend to be used when content will appear similarly between desktop and Mobile devices.

“Native like” applications use:

· The Browser in full screen Mode with no browser ‘chrome’; and

· Widgets are created using CSS, JS and HTML5 which simulate the ‘look and feel’ of a native application;

· No Access to Native Functionality (GPS, Camera, etc)6380026599_db3ba709db

· Tend to use, but does not require use of HTML5 manifest or local storage but it is strongly encouraged. 6439624411_22b452613f

A Native application is still an HTML5 application with the following characteristics:

· All JS Libraries, CSS and HTML are packaged and pre-loaded using a vendor specific MSI/Setup package;

· AJAX type calls for data are allowed;

· Access to Native Widgets and/or Widgets are created using CSS, JS and HTML5

· Access to Native Functionality (GPS, Camera, etc)

· Standard HTTP GET or POST are NOT allowed

A Hybrid Application is a “Native Like” Application” placed within a wrapper which allows access to device hardware and software (like the camera) via a special JavaScript interface and, with additional special coding, can be packaged within a MSI/Setup and distributed as a pure Native application.

AJAX calls are made via XHR2 (aka XMLHttpRequest Level 2) which among other things relaxes the single domain requirement of XHR and processing Blob and File interfaces.

The following major vendors offer free libraries and IDE for development:

Native Apps: PhoneGap, Appcelerator

Native App Like: Sencha, PhoneGap, IBM Dojo

Browser App: JQuery.Mobile

PhoneGap does NOT require replacement of Sencha, JQuery.Mobil, Dojo.Mobile JQuery libraries.

PhoneGap allows JavaScript to call PhoneGap JavaScript libraries which abstract access to device hardware (camera, GPS, etc).

Sencha does not require replacement of the JQuery.Mobil, Dojo.Mobile JQuery libraries.

Although it is theoretically possible to create “Native like” applications with only JQuery.Mobile this is NOT encouraged.6439625143_caa6996f39 6337926187_91ca36793d

Local Storage

This is a major area of performance efforts and is still very much open in terms of how best to approach the problem:

The major elements are:

App Cache (for pre-fetch. and Native App Approach)

DOM Storage (aka Web Storage)

IndexedDB (vs. Web SQL)

File API (this is really part of XHR2)

Storing Large Amounts of Data Locally

If you are looking to store many Megabytes – or more, beware that there are limits in place, which are handled in different ways depending on the browser and the particular API we’re talking about. In most cases, there is a magic number of 5MB. For Application Cache and the various offline stores, there will be no problem if your domain stores under 5MB. When you go above that, various things can happen: (a) it won’t work; (b) the browser will request the user for more space; (c) the browser will check for special configuration (as with the “unlimited_storage” permission in the Chrome extension manifest).

IndexedDB:

clip_image002

Web SQL Database is a web page API for storing data in databases that can be queried using a variant of SQL.

Storage Non-Support as of two weeks ago.

IE Chrome Safari Firefox iOS BBX[RIM] Android
IndexedDB Supported Supported No Support Supported No Support No Support No Support
WEB SQL No Support Supported Supported No Support Supported Supported Supported

6439626605_ee7b664332

Doing HTML5 on non-HTML5 Browsers: If you are doing responsive design and need to work with Desktop and6380016957_4c6b5e7345_z Mobil using the same code base: JQuery.Mobile, DOJO and , Modernizr(strong Microsoft support for this JavaScript library).

WEB API

What is it? Just a name for breaking out the AJAX servers from the web server. This is an expansion of REST into just serving data for XHR. It is a helpful way to specialize our design discussions by separating serving pages (with MVC or whatever) from serving data calls from the web page. Except for security the two can be architecturally separated.

Web APIs Technology Stack

clip_image002[6]

Look familiarr? Looks like our old web server stack to me.

NOSQL

The CAP Theorem  (and Here)

  • Consistency: (all nodes have the same data at the same time)
  • Availability: (every request receives a response – no timeouts, offline)
  • Partition tolerance: (the system continues to operate despite arbitrary message loss)

Pick Any Two6439627917_7f88626477_z

If some of the data you are serving can tolerate Eventual Consistency then NOSQL is much faster.6380029445_0e0ecf7d53

If you need two phase commit, either use a SQL database OR redefine your resource to eliminate the need for the 2Phase Commit.

NoSQL databases come in two basic flavors:

Key/Value: This are popular with content management and where response time must be minimal. In general you define what btrees you want to use before the fact. There are no on the fly Joins or projects. MongoDB and CouchDB are typical leaders in this area.

Column Map: This is what Google calls Big Table. This is better for delivering groups of records based on criteria which may be defined ‘on the fly’. Cassandra is the leader in this group.

Web Sockets:

6439628517_6c7955df1f_zSad to say this is still not standardized and preliminary support libraries are still a little rough.  Things do not seem to have moved along much since the Microsoft sessions I attended at MIX 11.

Photos: All Photos by Cloud2013

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

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:

clip_image001

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:

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

    clip_image001[1]

    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:

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

    image The Sad IE 8 Track Display

    What more can I say?

Grateful Dead 1989 Perfomances   2 comments

Table of Contents

1989 Tour Statistics & Notes

Spring 1989 California

Spring 1989 East Coast

Dead.Net Releases From 1989

  • 890704 Truckin’ Up To Buffalo Rich Stadium
  • 891016 Nightfall Of Diamonds  Meadowlands Arena
  • 890707  Crimson White & Indigo – JFK Stadium
  • 1989 – 1990 Without a Net
  • Alpine Valley Music Theater in 1989  DVD

West L.A. Fadeaway Alpine Valley Music Theater in 1989

The Buffalo and Meadowlands concerts are not, in my opinion, the best of 1989.  Nightfall of Diamonds in particular falls short of being a great show.   However, like all Dead.Net releases the sound remixing is great.  The vocals are far richer on these releases than on the more raw tapes found on the Internet Archive.   Crimson White & Indigo is based on the  89/07/07 JFK Stadium Concert.   This is a Dead.Net release which I do not own, so I am going on what I hear on the raw non-sound board recordings on the Internet Archive.  The show includes a  nice Scarlet Begonia ->Fire On The Mountain combination and a ‘big arena’ sound that some may find exciting.  Without A Net was produced by Phil.  Three cuts are from 1989.    The production seems a little ‘cold’ to me.  There is a DVD concert video which is a lot of fun: Alpine Valley Music Theater in 1989 DVD you can rent this at many video stores (or watch clips of the concert DVD available on YouTube and elsewhere).

Internet Archive Dead Soundboard Recordings – 1989

There are some interesting shows here and some fantastic (and unique)  performances of individual songs.  Brent and Jerry are interacting with amazing grace.  Phil is flying.  Jerry is in fine voice and guitar form.  I am listing in this section only shows on the Internet Archive with sound board recordings for 1989.  There are other gems out there on the Internet Archive which are available only in audience recordings.  I have concentrated here on Soundboard (and where possible, Matrix) recordings of these two tours.

Internet Archive Usage Notes

In a prior post I explained two ways to capture “streaming media” off the Internet Archive.  In this post I will give some pointers on finding Grateful Dead recordings on the Internet Archive.  A good place to start is the Grateful Dead Collection Home Page.  Try the link:  Grateful Dead Shows on This Day in History.  Listen to what others are downloading.

The Internet Archive supports an advanced search option.  You can use the search templates provided here to narrow your search.  Just change the date and/or target song phrases to match your needs and paste the text into the search Box.

Template:

collection:(GratefulDead) AND date:1989-??-??

returns all Grateful Dead recordings for 1989

Template:

collection:(GratefulDead) AND date:1989-??-?? AND (subject:”Soundboard” OR subject:”Matrix”)

returns all Grateful Dead recordings for 1989 in either soundboard or Matrix format

Template:

collection:(GratefulDead) AND date:1989-??-?? AND (subject:”Soundboard” OR subject:”Matrix”) AND “Fire On The Mountain”

returns all Grateful Dead recordings for 1989 in either soundboard or Matrix format of Fire On The Mountain

Scarlet Begonias -> Fire On The Mountain in 1989

In general this song series is not as strong here as in the golden years (1977-1981), but interesting none the less.


Fantasy Dead Sets: 1989.  What’s On My IPOD

  • California Earthquake: The Spectrum 891020
  • Touch Of Gray: Truckin’Up To Buffalo
  • I’m A Man: Great Western LA Forum 891210
  • Feels Like A Stranger: Cal Expo Amphitheater 890806
  • West L.A. Fadaway:  Giants Stadium 890708
  • Bird Song: Cal Expo Amphitheater (Hear Jerry ‘play’ the flute – guitar driven Synclavier. Unbelievable!!) 891209
  • The Wheel: Great Western LA Forum 891210
  • The Other One: The Spectrum 891020
  • Scarlet Begonias -> Fire On The Mountain:  Cal Expo Amphitheater 890806
  • Estimated Prophet: The Omni 890327
  • Not Fade Away: Truckin’Up To Buffalo
  • Build To Last: Nightfall Of Diamonds
  • All Along The Watchtower: Truckin’Up To Buffalo
  • Around And Around: Crisler Arena 890406
  • Breakdown Palace: Crisler Arena 890406
  • West L.A. Fadeaway :  Shoreline 891020
  • Feels Like A Stranger: Hampton Collage 891009

  • The Grateful Dead: Fire On The Mountain   2 comments

    if mercy’s in business

    i wish it for you:

    more than just ashes

    when your dreams come true.

    Dead Heads in the Twenty First Century

    Back in the old daze, Dead Heads traded concert tapes (a primitive early non-digital recording technology).  Some of these were recorded by fans and others where sound board recordings made by the Dead organization which found their way into general circulation (i.e. stolen).  Eventually, the Dead organization began to publish selected concert tapes as LP records (another primitive non-digital recording technology) and later as CDs and internet downloads.  For more information on the history of the Dead recordings see this article.  Online you can buy recordings of Dead concerts at the official Dead $ite.  Recording information is also available ( and in a more organized format) here. But what if: you don’t like the concerts released by the Dead Organization or if you just want MORE.

    The Internet Archive

    There is a unique organization and web site called The Internet Archive.  TheInternet Archive isa truly vast catalog of public domain audio and video recording which are in the public domain.  There is no internet collection which is larger.  Their slogan is simply: Universal Access To All Knowledge.  The Dead organization has released a vast number of Dead concert recordings to The Internet Archive, to which are added the large number of fan recordings.  In all there are over 7,000 Grateful Dead Recordings in their collection.  Let me write that again, 7,000 concerts recordings. Fan recordings are often available for direct download and most sound board recording are available in streaming (only) format.  But see my note at the end of this post for a resent development.  The only exception is that concerts which were the basis for Grateful Dead official releases or which concerts which have been commercially released on Dead.Net.  These are not available on the archive.  Sound quality ranges from ok to GREAT, mono to full stereo.  The search facilities of the archive are well thought out.  Search by song, venue and/or date.  The only problem is that there are so many recordings over such a long period (1968 – 1995) that you may not know where to begin.  You could focus on a particular year (when did you first attend a Dead concert) or a favorite song.  The Internet archive does provide some help with a “Recently Reviewed Concert” link; and a “Dead Concerts on this Day in History” link.  You can also look for postings by Chris Miller and “Matrix” or the key word: soundboard.

    What’s on my IPod Right Now

    Well, let me by honest here:  I am obsessed with the song sequence:

    Scarlet Begonias followed by Fire On The Mountain

    The Dead played this combination over 250 times between 1977 and 1994.  This sequence runs from 20 to 30 minuets in length (tending towards the high end in the 1990’s).  From my samples the best tours for this sequence are 1977, 1978, and 1989-1992.  There are some bad versions (typically during the 1982-1988 tours and the 1977 tour when Donna signs off key many nights!).  Here is my very subjective list of good to great versions based on what I have listened to so far.

    The Offical Releases:

    Dick’s Picks #18 (Jerry and both Godchauxs are on this night).

    Dick’s Picks #13 (This is a hidden track.  Put on Disc 2, Track 4 “Saint of Circumstance” at the end of this track is 20 seconds of dead air after that comes a November 1, 1979 version of Scarlet Bagonias -> Fire on the Mountain.  The rest of Dick’s Picks #13 was based on records made May 6, 1981.  This is a kick ass version and is my reference track for the best version of this particular sequence).

    Dick’s Pick #06 (skip this one, slow and lack luster)

    From the Internet Archives (these are all streaming only version but see my notes at the end of this blog on how to make a local copy:

    Great Versions:

    1977-05-08

    1988-03-31

    1989-08-06

    1990-03-22

    1991-06-25

    1992-05-21

    Not So Great but worth a listen:

    1978-04-11

    1978-04-24

    1978-09-02

    1981-02-27

    1981-10-21

    1983-10-21

    1988-03-31

    1990-03-22

    1990-10-19

    1994-10-14

    1994-06-19

    Making Local Copies Of Streaming Media

    There are several different free or inexpensive programs which will grab the audio stream and save it to an mp3 (or other) format.  I have had good luck with Replay Music 3 ($19.95) combined with the Google Chrome Browser.  Replay Music will allow saving to WAV format in addition to MP3.  The downside of this approach is, of course, that this is real time recording only.

    There is a Better Way

    If you run the Chrome Browser and access the Internet Arhive, when you go to a stream only Dead concert the screen will look something like these before and after pictures:

    With the Chrome (and maybe Safari) browser, Internet Archive will offer you the ability to convert to the HTML5 Audio tag  in place of the embedded browser (which uses the Object tag). Say YES to this offer. Having done so follow these steps to allow SAVING of the audio files directly WITHOUT streaming.

    • Start playing a track you wish to save
    • Right click on the time slider bar at the top of the music player,
    • select “Save Audio file”
    • select a save location
    • click ok

    That’s it.  Here is what the right click drop down list looks like:

    Thank you HTML5 Audio Tag.  Jerry would be proud.

    Remember you must start playing a track for this technique to work.

    Question:

    Does the Internet Archive know that using the Audio tag defeats the intend of streaming media only?

    Will they plug the hole?

    Can they plug the hole or is this basic to the nature of the HTML5 audio tag?

    Save now while you can!!

    %d bloggers like this: