Installation and Theming for jPlayer for Drupal 6: An HTML5-based mp3 player

One of my clients' website viewers are moving from desktop to mobile devices. And of course, he is showcasing a lot of music on his website, currently being displayed using a Flash frontend player, which can't be viewed on iOS devices. To fix that, I recommended switching to jPlayer, a HTML5-based player that uses Flash as a fallback for browsers that don't support it yet. This post is intended to provide the missing pieces of information for those of us still, ahem, stuck with a Drupal 6 installation (the jPlayer documentation primarily focuses on Drupal 7).

Installation

Here's a quick overview on how getting jPlayer running on your Drupal 6 installation:
  1. Install Jplayer module for Drupal 6 and enable it like any usual module
  2. Download the jPlayer plugin version 1.2.0 from here or directly here. The most current version (jPlayer 2.0.0) is not compatible with the Drupal 6 jPlayer module. Extract the contents in 'sites/all/libraries/jplayer'
  3. Go to the configuration page of the jPlayer Drupal module (admin/config/media/jplayer) and specify the path for the jPlayer library as configured above ('sites/all/libraries/jplayer')
This should be all that's involved. You should be good to go to use jPlayer in your content types (select it under "Display Fields" for your content types that have MP3 files uploaded) or use it in Views.

Theming

Of course, it would be great if we could use jPlayer for just any node that has an MP3 file attached to it, either in our theme files or anywhere else we want to manually display an MP3 file using jPlayer. I wasn't able to find the theming documentation for it on the module page, so here's a quick code snippet to get you going. For this example, I'm assuming that you have a content type called 'song' setup, every song node has 1 MP3 file associated with it.

$nid = 100;                       // Example node id 100
$node = node_load($nid);          // Loading the full song node
$type_name = 'song';              // Machine-name of the node content type
$field_name = 'field_song_file';  // Machine-name of the CCK field you use to store the MP3 file
$jplayer_data = array(
  '#field_name' => $field_name,
  '#node' => $node,
  '#type_name' => $type_name,
  '#theme' => 'jplayer_formatter_single',
  '#item' => $node->{$field_name}[0],
);
print theme('jplayer_formatter_single', $jplayer_data);

jPlayer