FileField remixed

If you haven’t examined FileField, you’ll have to do so by downloading the FileField module from http://drupal.org/project/filefield and enable it on the Modules administration page (by browsing to Administer | Site building | Modules, at /admin/build/modules).

Now create a new content type named Album by going to Administer | Content management | Content types | Add content type (at /admin/content/types/add). We’ll next add a FileField to this by editing the new Album type and selecting the Add field tab (at /admin/content/types/album/add_field). Call it Song, select the File for the Field type, press Continue, and press Continue again (leaving the Widget type as File Upload).

In the Permitted upload file extensions, enter mp3 for now.

If you wish, you may enter a new File path as well such as audio. Uploaded files would then be saved to that path. Note that you have access to the Token module’s features here. So, for instance you may enter something like audio/[user-raw], which will replace [user-raw] with the username of the node’s creator:

Finally, select Unlimited for the Number of values, since we’ll allow a single album to contain many songs. We’ll also check the Required checkbox so that each album will hold at least one song. Finally, we will ensure that the Default listed value is Listed, and that we select the Enforce Default radio button for How should the list value be handled? This will force a node to always list files when displayed. We need to list our files, although we plan ultimately to control display of an album’s songs in the player:

Now we can add an album node with a few songs by going to Create content | Album (at /node/add/album). Uploading is simple.

At this point, we only have a link displayed for our files. Our next task is to create an inline player for the audio. One possibility would be to override the theme function. However, we have other tools available that will make our job easier and even ensure cross-browser compatibility, better accessibility, and valid HTML:

jQuery Media to the rescue

The jQuery Media plug-in, written by Mike Alsup at http://www.malsup.com/jquery/media/, is a perfect solution. It will convert any link to media into the browser-specific code required for displaying the media. The jQuery Media module is a configurable wrapper for this plug-in.

We’ll also need a media player. For this exercise, we’ll again use the JW FLV Media Player developed by Jeroen Wijering. This excellent player is free for non-commercial use, and has a very inexpensive licensing fee for other uses.

First, download that player from http://jeroenwijering.com/ and install the player.swf file somewhere in your site’s directory tree. If you install it in the site’s www root folder, the module will work with little extra configuration. But you can install it in the files directory, your theme folder, or another convenient place if you need it for your environment. Just remember where you put it for future reference.

Next, download and enable the jQuery Media module from http://drupal.org/project/jquery_media. You may wish to also install the jQ module from http://drupal.org/project/jq, which consolidates jQuery plug-ins installed on your site.

The configuration is simple. You’ll just need to enter the filepath of your media player, which can be different than the Flash Video player entered earlier, if desired. Go to the jQuery Media Administration page by browsing to Administer | Site configuration | jQuery Media Administration (at /admin/settings/jquery_media). Open the Default players (within Extra settings) and enter the filepath of your media player in the MP3 Player (mp3Player) text field:

Now just check the Album box in Node types, and set the width and height within Default settings. In most cases, you would be done and the audio would be displayed automatically with no further configuration.

However, we’re assuming you plan to use this module in conjunction with videos, which may have already set a width and height. That means we’ll need to do some more customization.

Note: You do not need to do any of this, unless you have video and audio files on the site both using jQuery Media.

We need to change the class of our field and add a new invocation script. However, we don’t want to affect the class of our existing video files. So add the following somewhere in the phptemplate_preprocess_filefield_file function, creating that function if necessary. (If you haven’t already done that, then create function phptemplate_preprocess_filefield_file(&$variables) in template.php.

$node = node_load($file['nid']);
if ($node->type == 'album') {
 $variables['classes'] = 'filefield-file-song';
 if (module_exists('jquery_media')) {
 jquery_media_add(array('media class' => '.filefield-file-song
 a', 'media height' => 20, 'media width' => 200));
 }
}
else {
 $variables['classes'] = 'filefield-file';
}

Then you’ll need to change a line in filefield_file.tpl.php. (If you haven’t already created that file, create it in your theme directory, and copy the code from the theme_filefield_file function that is found in /sites/all/modules/filefield/filefield_formater.inc.)

The original line in question reads as follows:

return '<div class="filefield-file clear-block">'. $icon . 
l($file['filename'], $url) .'</div>';

However, we can rewrite that line to read:

<div id="filefield-file-file-<?php print $id; ?>" 
class="filefield-file clear-block" <?php print $style; ?> >

In either case, simply replace class=”filefield-file clear-block” with class=” clear-block”.