Working with Drupal Audio in Flash (part 1)

Exclusive offer: get 50% off this eBook here
Flash with Drupal

Flash with Drupal — Save 50%

Build dynamic, content-rich Flash CS3 and CS4 applications for Drupal 6

$26.99    $13.50
by Travis Tidwell | May 2009 | MySQL Content Management Drupal Open Source PHP

In this 2-part article series by Travis Tidwell, we will cover all the necessary steps to integrate audio content into our Drupal web site by building a custom Flash application that works seamlessly with Drupal multimedia. Here is what we will learn in this article:

  • Working with audio in Drupal
  • Building a custom audio player for Drupal
  • Creating an audio-handling class using ActionScript 3.0
  • Loading and playing audio in Flash

Within the past five years, there has been a major change in the type of content found on the World Wide Web. In just a few short years, content has evolved from being primarily text and images, into a multimedia experience! Drupal contributors have put much effort in making this integration with multimedia as easy as possible. However, one issue still remains: in order to present multimedia to your users, you cannot rely on Drupal alone. You must have another application layer to present that media. This is most typically a Flash application that allows the user to listen or watch that media from within their web browser. This article explores how to use Drupal to manage a list of audio nodes and also builds a Flash application to play that music. When it comes to multimedia, Flash is the portal of choice for playing audio on a web sites.

Integrating audio in Drupal is surprisingly easy, thanks to the contribution of the Audio module. This module allows you to upload audio tracks to your Drupal website (typically in MP3 format), by creating an Audio node. It also comes with a very basic audio player that will play those audio tracks in the node that was created. To start, let's download and enable the Audio module along with the Token, Views, and getID3 modules, which are required for the Audio module. The modules that you will need to download and install are as follows:

At the time of writing this article, the Audio module was still considered "unstable". Because of this, I would recommend downloading the development version until a stable release has been made. It is also recommended to use the development or "unstable" versions for testing purposes only.

Once we have downloaded these modules and placed them in our site's modules folder, we can enable the Audio module by first navigating to the Administer | Modules section, and then enabling the checkboxes in the Audio group as follows:

Flash with Drupal

After you have enabled these modules, you will probably notice an error at the top of the Administrator section that says the following:

Flash with Drupal

This error is shown because we have not yet installed the necessary PHP library to extract the ID3 information from our audio files. The ID3 information is the track information that is embedded within each audio file, and can save us a lot of time from having to manually provide that information when attaching each audio file to our Audio nodes. So, our next step will be to install the getID3 library so that we can utilize this great feature.

Installing the getID3 library

The getID3 library is a very useful PHP library that will automatically extract audio information (called ID3) from any given audio track. We can install this useful utility by going to http://sourceforge.net/project/showfiles.php?group_id=55859, which is the getID3 library URL at SourceForge.net. Once we have done this, we should see the following:

Flash with Drupal

We can download this library by clicking on the Download link on the first row, which is the main release. This will then take us to a new page, where we can download the ZIP package for the latest release. We can download this package by clicking on the latest ZIP link, which at the time of writing this article was getid3-1.7.9.zip

Once this package has finished downloading, we then need to make sure that we place the extracted library on the server where the getID3 module can use it. The default location for the getID3 module, for this library, is within our site's modules/getid3 directory. Within this directory, we will need to create another directory called getid3, and then place the getid3 directory from the downloaded package into this directory. To verify that we have installed the library correctly, we should have the getid3.php at the following location:

Flash with Drupal

Our next task is to remove the demos folder from within the getid3 library, so that we do not present any unnecessary security holes in our system.

Once this library is in the correct spot, and the demos folder has been removed, we can refresh our Drupal Administrator section and see that the error has disappeared. If it hasn't, then verify that your getID3 library is in the correct location and try again. Now that we have the getID3 library installed, we are ready to set up the Audio content type.

Setting up the Audio content type

When we installed the Audio module, it automatically created an Audio content type that we can now use to add audio to our Drupal web site. But before we add any audio to our web site, let's take a few minutes to set up the Audio content type to the way we want it. We will do so by navigating to Administer | Content Types, and then clicking on the edit link, next to the Audio content type.

Our goal here is to set up the Audio content type so that the default fields make sense to the Audio content type. Drupal adds the Body field to all new content types, which doesn't make much sense when creating an Audio content. We can easily change this by simply expanding the Submission form settings. We can then replace the Body label with Description, since it is easily understood when adding new Audio tracks to our system.

Flash with Drupal

We will save this content type by clicking on the Save content type button at the bottom of the page. Now, we are ready to start adding audio content to our Drupal web site.

Creating an Audio node

We will add audio content by going to Create Content, and then clicking on Audio, where we should then see the following on the page:

Flash with Drupal

You will probably notice that the Title of this form has already been filled out with some strange looking text (as shown in the previous screenshot). This text is a series of tags, which are used to represent track information that is extracted using the getID3 module that we installed earlier. Once this ID3 information is extracted, these tags will be replaced with the Title and Artist of that track, and then combined to form the title of this node. This will save a lot of time because we do not have to manually provide this information when submitting a new audio track to our site. We can now upload any audio track by clicking on the Browse button next to the Add a new audio file field. After it adds the file to the field, we can submit this audio track to Drupal by clicking on the Save button at the bottom of the page, which will then show you something like the following screenshot:

Flash with Drupal

After this node has been added, you will notice that there is a player already provided to play the audio track. Although this player is really cool, there are some key differences between the player provided by the Audio module and the player that we will create later in this article.

How our player will be different (and better)

The main difference between the player that is provided by the Audio module and the player that we are getting ready to build is how it determines which file to play. In the default player, it uses flash variables passed to the player to determine which file to play. This type of player-web site interaction places the burden on Drupal to provide the file that needs to be played. In a way, the default player is passive, where it does nothing unless someone tells it to do something.

The player that we will be building is different because instead of Drupal telling our player what to play, we will take an active approach and query Drupal for the file we wish to play. This has several benefits, such as that the file path does not have to be exposed to the public in order for it to be played. So, let's create our custom player!

Flash with Drupal Build dynamic, content-rich Flash CS3 and CS4 applications for Drupal 6
Published: May 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Building a custom audio player for Drupal

Once we have our new directory set up, we will need to open up both the chapter5.fla and the main.as file within our Flash IDE, where we will then direct our attention once again to the main.as file.

Click here to access all the codes used in this article.

The first thing we will need to do is temporarily change the nodeId variable at the top of this script to the node ID of the audio node that we just created as follows:

// Declare our variables
var baseURL:String = "http://localhost/drupal6";
var gateway:String = baseURL + "/services/amfphp";
var sessionId:String = "";
var nodeId:Number = 8;

Now that this node ID is set to the correct node, our next task is to determine what data we are looking for when we load the node. This will bring us back to our Drupal web site, where we will take advantage of the Services Administrator to investigate the data from our audio node.

Examining the Audio node using Services Administrator

For this section, we will navigate back to our Services Administrator section by going to Administer |Services in our Drupal web site. Once we are there, we will then click on the node.get link, which will let us load any node in our system to examine the data that will be passed to our Flash Application. We will then need to provide the node ID for the audio node we created—where it says nid, and then click on the button below that says Call method.

Flash with Drupal

Looking at the results from this call, the data that we are looking for is all contained within the audio tag in the node object, which should look similar to the following screenshot:

Flash with Drupal

From looking at this data structure, we determine that we can access the filepath of our audio no de within our onNodeLoad function. So, let's test this out by modifying our "Hello World" code to replace the node title with the filepath to our audio file.

Referencing the audio file path

Using the knowledge that we gained from the Services Administrator, we should be able to now reference the audio filepath for any given audio node within our Drupal web site. If we observe the node object data returned from our Services Administrator, we can determine how to access the file path to our song by using the following code:

node.audio.file.filepath

We can easily test this out by opening up our main.as file, and then placing a trace statement to display this file path within the onNodeLoad function:

// Called when Drupal returns with our node.
function onNodeLoad( node:Object )
{
// Print out the node title.
title.text = node.title;
// Trace the audio file path.
trace( node.audio.file.filepath );
}

The output should then show the correct filepath to the node that we just loaded (as shown in the following screenshot).

Flash with Drupal

We have now successfully referenced the audio file path. Our next task will be to create an audio class that will use this path to play some music!

Writing a custom AudioPlayer class

Writing a custom AudioPlayer class When working with ActionScript 3, it is highly recommended to use the object-oriented features that are built into the language using the class construct. By creating a class for our custom audio functionality, we will be encapsulating the code, which makes our code more maintainable, expandable, and portable. This is also referred to as componentization. This section assumes that you already have some previous experience with object-oriented techniques, but in case you do not, I will try my best to explain the concepts as we move forward. If you are just beginning with object-oriented programming, then I would also highly recommend reading the Wikipedia article at http://en.wikipedia.org/wiki/Object-oriented_programming, which describes in great detail the concepts behind object-oriented programming. With that said, let's begin building our AudioPlayer class.

In Flash , there is already a class called Sound that was built to play audio files, and we can build our class to utilize this functionality to play audio. So, let's begin by creating a blank file next to your chapter5.fla project file called AudioPlayer.as. We will then open up this file and write the following:

package
{
// Import all dependencies
import flash.media.Sound;
// Declare our class
public class AudioPlayer
{
// Constructor function.
// Called when someone creates a new AudioPlayer
public function AudioPlayer()
{
// Make sure to create our sound object
sound = new Sound();
// Let us know that we created this player.
trace( "AudioPlayer created!" );
}
// Declare our sound variable.
private var sound:Sound;
}
}

Here we have created a new class that we will use to place all of our custom Audio player functionality. Currently, this doesn't really do much, other than send a trace to the output to notify us that the player has been created. To help track our progress, we can test this out by going back to our main.as file, and within the onNodeLoad function, we can place the following code to create our custom AudioPlayer:

// Called when Drupal returns with our node.
function onNodeLoad( node:Object )
{
// Print out the node title.
title.text = node.title;
// Create our AudioPlayer.
var player:AudioPlayer = new AudioPlayer();
// Trace the audio file path.
trace( node.audio.file.filepath );
}

Now, when we run this application, we will get a very pleasant surprise when our trace statement from within our custom AudioPlayer gets called to reveal that we really did create our custom audio player!

Flash with Drupal

Our next step will be to add functionality to our custom audio class to play any audio track passed to our player.

Playing audio in Flash

In order to play an audio track, we will need to first create a public function within our custom class, that will be used to play any given file passed to our routine. This function will be used to play any given audio file path provided as the file string passed as an argument to the play function. Since we have already included the sound object in our custom class, we can now use that to load and play our file.

To do this , we will need to import the URLRequest class, because that class is used to pass a URL string to the load routine of the sound object. After this, we can then call the load routine on the sound object using this URLRequest object, and then play the file after it has been loaded. This will look as follows:

package
{
// Import all dependencies
import flash.media.Sound;
import flash.net.URLRequest;
// Declare our class
public function AudioPlayer
{
// Constructor function.
// Called when someone creates a new AudioPlayer
public function AudioPlayer()
{
// Make sure to create our sound object
sound = new Sound();
// Let us know that we created this player.
trace( "AudioPlayer created!" );
}
// Play an audio file
public function playFile( file:String )
{
// Print out what file is playing...
trace( "Playing file " + file );
// Load our sound file.
sound.load( new URLRequest( file ) );
// Play our sound file.
sound.play();
}
// Declare our sound variable.
private var sound:Sound;
}
}

We have finished setting up our audio class to play an audio file. We can now direct our attention to the main.as file, where we will play the audio file from Drupal using our new custom audio class.

Using our AudioPlayer class to play audio

Now that we have our main.as file opened, we can direct our attention once again to the onNodeLoad function, where we will pass the correct file path from Drupal to our custom AudioPlayer class. Since the path to our audio file, given to us from the node object, is relative to the base URL of our Drupal web site, we will need to add the base URL of our web site to the front of this path before we send it to the play function of our custom class. We can do this pretty easily by creating a variable called fileURL, which will hold the baseURL to our web site, and then add that to the audio file path before sending it to the play function of our custom class. The code to do this should look like the following:

// Called when Drupal returns with our node.
function onNodeLoad( node:Object )
{
// Print out the node title.
title.text = node.title;
// Create our AudioPlayer.
var player:AudioPlayer = new AudioPlayer();
// Declare our base URL.
var fileURL:String = baseURL;
// Add our file's relative path.
fileURL += "/";
fileURL += node.audio.file.filepath;
// Play our audio file
player.playFile( fileURL );
}

Now, when we run our application, we should be greeted with the sweet sound of success! We will now expand our audio player to include some controls, so that your site visitors can start and stop the music while playing.

Summary

In this article we saw how audio is handled within Drupal and how to build a custom application that can play audio content created through Drupal.

Playing music by itself is pretty cool, but is not very useful unless we give our users a way to interact with the playback of that audio track. In the next part of the article we will create some very basic controls that will allow our users to do just that.


If you have read this article you may be interested to view :

Flash with Drupal Build dynamic, content-rich Flash CS3 and CS4 applications for Drupal 6
Published: May 2009
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Travis Tidwell

Travis Tidwell is the founder and CTO for TMT Digital (http://www.tmtdigital.com), a company that specializes in the development of Flash applications for the Drupal content management system. He is also the sole developer for the Dash Media Player (http://www.tmtdigital.com/project/dash_player, http://www.drupal.org/project/dashplayer), which is a media player built specifically for Drupal. As well as contributing this media player, Travis is also the author and co-maintainer for the FlashVideo module (http://www.drupal.org/project/flashvideo), which is a complete video solution for Drupal.

Travis graduated with a Bachelors of Science in Electrical and Computer Engineering from Oklahoma State University and has worked as an Embedded Systems Engineer for companies specializing in automotive and agricultural GPS products. Travis then fell in love with web development and more specifically with Drupal and Flash, where he has developed numerous sites including http://www.delicioso.com for Food Network's Ingrid Hoffmann.

Travis is happily married to his beautiful wife, Erin, and is the proud parent of a feisty one-year-old named Brycen. When Travis isn't working on the computer (which is rare these days), he enjoys the performing arts including playing guitar, singing, and tap dancing (Search for "Soul Man Tap" at http://www.youtube.com to see him in action).

Books From Packt


Drupal Multimedia
Drupal Multimedia

Drupal 5 Views Recipes
Drupal 5 Views Recipes

Magento: Beginner's Guide
Magento: Beginner's Guide

Spring Web Flow 2 Web Development
Spring Web Flow 2 Web Development

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

Django 1.0 Website Development
Django 1.0 Website Development

Learning jQuery 1.3
Learning jQuery 1.3

Moodle Course Conversion: Beginner's Guide
Moodle Course Conversion: Beginner's Guide


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
h
G
b
a
i
6
Enter the code without spaces and pay attention to upper/lower case.
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