Audio in Drupal step-by-step instructions - excerpt from PacktPub's "Drupal Multimedia"

Date Submitted: August 19 2009 08:25 pm

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



Drupal Multimedia
 
Drupal Multimedia

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

  • Learn to integrate multimedia in your Drupal websites
  • Find your way round contributed modules for adding media to Drupal sites
  • Tackle media problems from all points of views: content editors, administrators, and developers
 http://www.packtpub.com/create-multimedia-website-with-drupal/book


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



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:

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:

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

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

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
 
Drupal Multimedia

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

  • Learn to integrate multimedia in your Drupal websites
  • Find your way round contributed modules for adding media to Drupal sites
  • Tackle media problems from all points of views: content editors, administrators, and developers
 http://www.packtpub.com/create-multimedia-website-with-drupal/book


Post A Comment

Name:
Comment:
Human Verifier:
(enter the 4 blue numbers you see above)
 
Error! Invalid human verify code
Thank you for your comment. After we have reviewed your comment (to make sure it is not spam) it will be posted below.

veery-contrast