Drupal + XSPF

Having worked on many Drupal sites with music players I have used a number of solutions but never quite found something that worked perfectly for me. Recently I have done a number of sites that required the ability to have a play list that is easily managed by the client without messing around with xml files and ftp uploads. There are a couple solutions for this but i am going to focus on one solution which is using the XSPF Playlist module.

Step 1: Enable the modules.

- XSPF Player - http://prdownloads.sourceforge.net/musicplayer/xspf_player-0.2.3.zip?dow...
- XSPF Playlist Module - http://drupal.org/project/xspf_playlist
- Views 2 - http://drupal.org/project/views
- CCK - http://drupal.org/project/cck
- Upload - Comes in Drupal core.

Step 2: Create your content type.

next you'll want to create a custom content type to upload the mp3 files to(admin/content/types/add) , I named mine playlist items.
You can get rid of the body since you won't need it unless you want to use the node in another page then pop down to "Workflow Settings" and turn on file attachments. All you are going to need is a title and the Standard file attachment.
Also note that the file size is going to be constrained by what your server settings will let you upload so if you want to add large size mp3's that will need to be tweaked. Your ability to do this will depend on your hosting situation.

Step 3: Configure XSPF Playlist.

After you have created your content type you will need to enable it in XSPF to allow the module to create playlists from the nodes (admin/settings/xspf_playlist).
Here you can title the playlist that will be created as well. In content settings you select your CCK and click save. Now there's a little bit of a trick i found, if you are using the admin menu module you will need to flush your cache on it for the playlist settings to show in the menu. You can then go to this link through admin menu or /admin/settings/xspf_playlist/name-of_your_content_type. Here you will select the field that contains the mp3 and thumbnail to show in the player for this setup you will want "Drupal: Upload Attached Files". (Please note that currently there seems to be a problem in the D6 version with correctly pulling the thumbnail. You can, however, set a default cover to show for all tracks.

Step 4: Create your view.

Once you have your content type and your XSPF settings done you will need to create a view to generate the xml for the player to read. Start by creating a new node view, the main display you will need is the FEED display.
here's a list of the basic settings to get it going.
- items to display:Unlimited
- Style:XSPF Playlist
- Row Style: Node XSPF

You'll need to give it a path i just used /playlist for mine and then as always you'll need some filters so select node type and as a rule i always add node published: Yes

you can then sort the view however you choose and save your work.

Note: This view does not utilize any fields so other than the couple style settings, path, sorts and filters there is not much to set up.

Step 5: Embed the player in a block/page.

The last thing to do is set up the actual player. To do that you will need to place the downloaded swf somewhere in your drupal install's file structure. I like to place all my swf's in my themes directory to keep things clean. Once you have done that you will need to either create a page or a block, set the input format to full HTML and enter the following embed code in in the body:

<object type="application/x-shockwave-flash" width="400" height="170"
data="location-of-the-player-swf?playlist_url=feed-url">
<param name="movie" 
value="location-of-the-player-swf?playlist_url=feed-url" />
</object>

Set the location for the swf to the path from the root of your install and enter the path to the feed you set up for the playlist_url and that's it. You have an audio player that requires no xml knowledge to maintain.

This will get you started with a basic set up from there you can use views sorting, filters and arguments to control your playlists however you want. Depending on your ability there are many players out there to skin and use on your site that accept XSPF playlists.

niall / Drupal Themer & Developer
A proud son of Richmond, ardent cycle-racer and Drupal wizard, Niall often dreams of re-enacting the bicycle dancing scene from his favourite Kevin Bacon film, Quicksilver. He just needs a partner with access to a leotard....

Comments

Hi Niall,
After much head scratching and some troubleshooting and a lot of web searching I found and tried you tutorial. Unfortunately I'm a drupal newbie, fortunately I'm a average php developper, but I find that your tuto is a little bit light.

For me some things are missing, not a lot but which can help people to use the xspf playlist module, so I crawl your tuto step by step :

- Step 1 is quite easy no problem with that,
- Step 2 : Content type, I always have an Audio File content type defined for a podcast node type. This type only have one field field_audio_file which is have a file type, I think this is ok.
- Step 3: Configure XSPF Playlist, in my xspf playlist/name-of_my_content_type module settings I have the "Build playlist from files" I choosed "Drupal: Upload attached files" is it the good one ? I think but not sure.
- Step 4: Create your view, which type this new view needs ? Node or File or something else ? (by default I choose Node). You don't talk at all about the Default Parameters of this view, why ? If I don't change the default parameters, if I do not define a field this view won't be effective. (so in my case I used Content: Audio File (field_audio_file) with a generic files format). I also define the filters in this default parameters view (published and type). After that I create a new view for the feed with the xspf specifications you described. Is this correct ?

After that I've a swf player but nothing inside and a xspf feed with nothing...

I've noticed that my audio files are uploaded into sites/default/files/
(I've also a sites/default/files/playlists/ folder but with nothing inside...)

If you can say to me what I did in the wronfg way...

Hi reno,

I think your problem lies in the content type you have created, there is no need to add a upload field to the content type as there is already the file attach field. The way to get this field is under look in Workflow Settings in /admin/content/types/your_content_type/edit , there should be an attachments option that you'll want to enable. So basically you will have a title field and a bunch of minimized admin fields. You'll find File Attachment between Comment Settings and URL Path Settings. That is where you want to upload your file to.

So in step three when you set it for "Drupal: Upload attached files" your file will be attached to the node in the appropriate location.

As for the view settings you want a Node View, on the far left you'll select "feed" and click "add display". Then you need to set the style to "XSPF Playlist" and the row style to "Node XSPF". Give the display a path and add whatever sorting and filters you want. These settings don't utilize any fields so that is as much as you'll need to do. Save it and then you just have to feed the path of your view to XSPF.

I hope that helps clear up a few questions. if you have anymore feel free to contact me at niall [at] fuseinteractive [dot] ca

Just a trick : seems that for me if I try to save a view without any field in the default params the view is not saved, so I configure a field, save the view, and reedit the view to delete the field. Strange no ?

Ok Niall. First thanks for this prompt reply.
I've made all the modifications you suggest, the main one was to delete the Audio File field from the content type and from the view.
All works well now, thanks a lot.

By the way I've a another question : Do you know if there is a way to let visitors to create a personal playlist by choosing tracks from a podcast listing ?

The only example of this type I have is the arte-radio.com flash website (http://www.arteradio.com/tuner.html) where visitors are able to manage their own playlist.

The idea is not necessarily to use flash to do this, but that visitor could select, deselect a multiselect list and save or download it as a xspf or m3u playlist.

Glad you got everything working, I edited a few parts of my posts to address some of the issues you were having. Thanks for taking the time to comment. As for your second question, I haven't found anything that provides that kind of functionality out of the box but you could probably get something like that working with a combination of modules or creating your own custom module. We have done similar stuff like enabling users to compile a list of their favorite recipes. They are basically compiling a list of nodes that they have favorited so i suppose you could do something like that and then use an argument in the xspf view to output their list. It really depends on whether you want people to register a user account, that's always going to be the easier way but maybe not ideal for casual users.
Hopefully that gives you some direction, sorry i don't have a specific solution for you.
Drop me a line if you figure something out I'm always interested in audio stuff done in Drupal.

Thanks a lot Niall.
I'll explore this way, for the moment I need a better uderstanding of drupal before developping my own module. I'll inform you if I find something usefull.

Post a new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <p>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <pre>, <c>, <cpp>, <css>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Insert Google Map macro.
  • Each email address will be obfuscated in a human readable fashion or (if JavaScript is enabled) replaced with a spamproof clickable link.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.