Audio Fields in Drupal

Exclusive offer: get 50% off this eBook here
Drupal Multimedia

Drupal Multimedia — Save 50%

Create media-rich Drupal sites by learning to embed and manipulate images, video, and audio

$23.99    $12.00
by Aaron Winborn | July 2009 | Drupal Open Source

In this article by Aaron Winborn, we'll go through the FileField module. This is a useful module if you want to have an easily configured solution, in many situations, there are some benefits from using the FileField module instead. It's light-weight, it's flexible, and it's easy to customize. It may also be easier to add support for players other than the 1PixelOut and XSPF players distributed with Audio.

Additionally, as of this writing, the Drupal 6 version of the Audio module wasn't quite ready for production. But I am confident it will be soon, if not already.

Finally, there may be specific reasons for wanting to choose a FileField solution over the Audio module. Similar to the quandary of whether to use the Image module or Image Field, the most common reason would probably be to allow multiple audio files to be attached to a node, or to allow audio fields to be associated with other types of nodes. (Note that the Audio module is also bundled with the Audio Attach module, which might be a solution for that as well.)

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:

Audio Fields in Drupal

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:

Audio Fields in Drupal

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

Audio Fields in Drupal

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:

Audio Fields in Drupal

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:

Audio Fields in Drupal

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".

Audio Fields in Drupal

Drupal Multimedia Create media-rich Drupal sites by learning to embed and manipulate images, video, and audio
Published: October 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

External audio

As with images and videos, there are a growing number of third-party providers of audio who offer their content to be embedded on external sites. To this end, the Embedded Audio Field module, included in the Embedded Media Field package, supports several providers. In a similar method to the others in that package, you may paste the URL or embed code from a supported provider and the desired audio content will be parsed and displayed appropriately.

Download and install the Embedded Media Field module from http://drupal.org/project/emfield/. You'll also need to enable the Embedded Audio Field.

Create a new content type, which we'll call EmAudio for this example (so that it doesn't conflict with the Audio module, if that's installed). To do this, browse to Content management | Content types | Add content type (at /admin/content/types/add).

Next, add an Embedded Audio/3rd Party Audio field, also named Embedded Audio, by selecting that radio and pressing the Create field button. You can do that by editing the new content type and hitting the Add field tab (at /admin/content/types/emaudio/add_field).

On the following page, you can change any required settings. But it's OK to leave them blank for now. If you leave the Providers checkboxes unchecked, they'll all be supported. If you check one or more, then only those providers will be allowed for this content type:

Audio Fields in Drupal

The other sections of this page control the display of embedded audio content. You can control the size of the player, whether it will Autoplay during display, and how thumbnails will appear, if provided. Note that if you have Embedded Media Thumbnail installed, you will be able to provide custom thumbnails, in case a provider doesn't supply thumbnails with their service:

Audio Fields in Drupal

If you're not User 1, then make certain that you have permission to add content by going to Administer | User management | Access rules (at /admin/user/rules), and checking Create embedded audio content for the desired user role.

Now, you'll just go to an external provider such as Odeo, find a podcast or clip you want to feature, and click and drag the URL to the Embedded Audio field of your node creation page (by browsing to /node/add/emaudio):

Audio Fields in Drupal

Submit your node, and you have your new podcast nicely displayed:

Audio Fields in Drupal

Summary

We have branched away from the Audio module, discovering the power of FileField to create custom audio fields. We have also learned to use jQuery Media to give better browser support. We've also explored embedding third-party audio content with Embedded Audio Field.

Drupal Multimedia Create media-rich Drupal sites by learning to embed and manipulate images, video, and audio
Published: October 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Aaron Winborn

 

Aaron Winborn has been developing websites since the mid-90s. Beginning as a freelancer while teaching at a Sudbury school (a democratic and age-mixed model for young people), his clients demanded more and more features, until he (like everyone and their grandmother) realized he had built a full-featured content management system that required more work to develop and maintain than he was able in his spare time.

He realized at some point that somewhere in the world of Open Source, someone had to have created and released something to the community. Of course, the wonderful news was Drupal.

After converting the existing sites of his clients to Drupal, he continued learning and began to contribute back to the community. About this time, Advomatic, a company with similar interests and a commitment to the Drupal community, began expanding beyond the initial partners who formed it in the wake of Howard Dean's presidential campaign of 2004. Aaron realized that his own goals of creating great sites with a team would be better matched there, and he was hired as their first employee.

Since that time, he has helped to develop some excellent sites, with clients such as Air America Radio, TPM Cafe, NRDC, Greenopia, Mountain News, Viacom, and Bioneers. He has also contributed several modules to Drupal, mostly stemming from his work with multimedia, including Embedded Media Field (for third-party Video, Audio, and Images), Views Slideshow (to create slide shows out of any content), and the RPG module (for online gaming, still in progress).

Books From Packt

  Drools JBoss Rules 5.0 Developer's Guide
Drools JBoss Rules 5.0 Developer's Guide

Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

ASP.NET 3.5 CMS Development
ASP.NET 3.5 CMS Development

Drupal 6 Content Administration
Drupal 6 Content Administration

Flash with Drupal
Flash with Drupal

Drupal 5 Views Recipes
Drupal 5 Views Recipes

Blender 3D Architecture, Buildings, and Scenery
Blender 3D Architecture, Buildings, and Scenery

Alfresco 3 Enterprise Content Management Implementation
Alfresco 3 Enterprise Content Management Implementation

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software