Documentation for the Drupal 6 and 7 AudioField module.

For the Drupal 8 documentation, see https://www.drupal.org/docs/8/modules/audiofield

Install

Install and enable the Audiofield module in the usual way. Learn about installing Drupal modules.

Configure

Configure the AudioField module at Administration > Configuration > Media, or /admin/config/media/audiofield. In Drupal 6, configure the audio field at /admin/settings/audiofield. You can choose the default player and set the folder where the module can find the players. The player you select will be used as default player for all audio files.

Add an audio field to the content type

You can add an audiofield to any entity (content type, user, taxonomy et cetera).

  • Add a field via the Manage fields tabs
  • Select field type "File"
  • Select widget "Audio Upload"

If you need further help managing fields read more about fields in Drupal.

Players

  1. Audiofield's default is Google Reader MP3 Player CURRENTLY BROKEN [#2033375‎]
  2. The Standalone WordPress player. Not Recommended-Adobe Flash Based
  3. XSPF Slim Player
  4. XSPF button Player
  5. Soundmanager2
  6. FlowPlayer
  7. jPlayer Now supports Drupal Jplayer module (7.x-1.0 only)

Where to extract the players?

Once you have any of the above audio players, you have to create a new folder called "player" at this directory: "sites/all/libraries". Now you can unzip the audio players directly into the "player" folder.

Note: If you wish to save players in a different folder, you can set a new path in the "Audio Players Directory" field on the audiofield settings page.

If using the default settings, the resulting folder structure should resemble the following
(*you will probably need to rename the extracted folders and files to match):

  • The Standalone WordPress player should be at: /sites/all/libraries/player/audio-player/player.swf
  • The XSPF player should be at: /sites/all/libraries/player/xspf_player_slim.swf
  • Soundmanager2 should be at: /sites/all/libraries/player/soundmanager2/script/soundmanager2.js
  • The jPlayer: see Drupal Jplayer module

How to upload and play anvaudio file

After adding an audiofield to a content type, you can upload audio files when creating new nodes. Uploaded audio files will be rendered in default player you selected in admin form.

API

This module supports only MP3 audio files. However, other modules may extend this support by implementing hook_audiofield_players() in their modules.

For example to implement support for a new example player you would implement:

/* Example of creating additional players through hook_audiofield_players() */
function example_module_audiofield_players(){
	$players['example']=array(
		'path' => drupal_get_path('module','example_module').'/players/player.swf', //relative path to the player
		'name' => 'Example player',
		'download_link' => 'http://example.com/download',
		'filetypes' => array('mp3','wav','wma'),   //List of audio files your player can play
		'callback' =>'example_module_example_player',
                'external' => FALSE, // TRUE if this player library is loaded from cloud, for example Google Reader
                'module' => NULL, //or project name of the module, for example jplayer
	);
	
	return $players;
}

function example_module_example_player($player_path,$audio_file, $options){
  return '<object><param name="autoplay" value="true" />
            <param name="controller"value="true" /> 
            <embed src="' . $player_path . '"  width="65" height="21" float="left" wmode="transparent" flashvars="mediaPath=' . $audio_file .'&defaultVolume=100" autostart="true" loop="false"  controller="true" bgcolor="#FF9900" pluginspage="http://www.macromedia.com/go/getflashplayer" >
            </embed></object>';
}
AttachmentSize
Audiofield Configuration Example75.61 KB

Comments

chandantyagi’s picture

chandantyagi commented

Thanks for explaination....
now working fine

BertienBoon’s picture

BertienBoon commented

I installed the 7.x-1.x-dev version, with a few players.
After enabling the module I don't see any "audiofield" at admin/settings...

FrequenceBanane’s picture

FrequenceBanane commented

It's because it is at admin/config/audioplayer

tamerzg’s picture

tamerzg commented

Drupal 7.x is still dev version and currently doesn't work. Please use 6.x version.

--------------
zoubi.me

lionheart8’s picture

lionheart8 commented

Hi

Does this still not work for DRUPAL 7?
After trying to follow the instructions & having selected a player, in the edit section, I just have the audio file link & on the view page, just the text in body field.

I do not see what else to do.
Does one need to do anything to code & if so what??

I have also extracted 4 players to the player folder, but I only see 2 at admin/config/media/audiofield

=>
MP3 Audio Players:
XSPF Slim Player
Premium Beat Thin Player

What could the problem be? I assume one only moves the extracted contents of the player folders & not the folders + their contents.

Is this a good way to make podcasts or there is a better method?

Thanks & regards

pardalman’s picture

pardalman commented

Same problem...

rotarydial’s picture

rotarydial commented

Any ETA on when this will work for Drupal 7? Or a recommended alternative module?

jason.schlotta’s picture

jason.schlotta commented

Thanks for helping a noob! This worked great and now I can post some fun stuff.

emid’s picture

emid commented

I've done everything as above and it still doesn't show on page. I uploaded one mp3 file to test it and nothing happened. As if I didn't upload it at all. Trying to find out what happened I got this message:
/home/......../public_html/sites/all/modules/audiofield/audio.field.inc on line 276

prettylines’s picture

prettylines commented

I am also facing the same issue.

I installed PB thin player, PB single player, and Jplayer. Then created a node and uploaded a mp3 file. But only the PB thin player will play the track. The other two players do not play the track...

TomD_Iburg’s picture

TomD_Iburg commented

Hi there

Has anyone tried getting the Mini flash mp3 player playing songs automatically when entering a page ?

I've created a node with an MP3 attached, and used a View to create a block showing only the Mini player.
This all works, and the player is showing, and the buttons are working as they should.

But I'd like to make the song play automatically when someone enters the page...

Anyone have any idea, how I can achieve this ?

I've tried the CUSTOMIZATION link at premiumbeat.com, and have tried copying the generated code into the .html files, that came with the MINI player. But I can't get this to work.

Hopefully someone can help me :-)

Sincerly
Tom

PoolBum’s picture

PoolBum commented

After numerous D6 sites, I have my first D7 site. I did everything as you directed me to do successfully, as best as I can tell. In any case, everything looked as I expected. And ultimately when at a "Create Audiofield" page there is a box at the bottom labeled: "MP3 Player" along with a browser button and "Files must be less than 10MB" and "Allowed file types: mp3." I identify the file (5MB) on my hard drive and click upload. It takes about 5-10 minutes and then I get an error message telling me that "The file could not be uploaded." Sadly, there is no other information

I'm not sure what to do and have tried a variety of fixes. At this point if I could manually embed the XSPF slim player & mp3 file, I would be delighted. I have tried numerous html commands such as . Nothing shows up.

Any suggestions? Thanks for your time and for the player.
David

Anthony Pero’s picture

Anthony Pero commented

First of all, always get your installation instructions from the README.txt file that ships with the module version you are using. Installation instructions change from version to version and the documentation on drupal.org is always behind. Instructions that ship with modules are the only "official" instructions.

Installation steps:

  1. Download the module the way you normally do. (As of 8/28/11, both the Beta and Dev versions for D7 work)
  2. Do not install the module.
  3. Download your player of choice (either XSPF, jPlayer or Wordpress Standalone). Read the README.txt file for download locations.
  4. Make sure sites/all/libraries exists. Create a new folder named player inside libraries.
  5. Upload your player to the player folder (sites/all/libraries/player/) so that each player has a path like this:
    • Wordpress: sites/all/libraries/player/audio-player/player.swf *make sure you upload the entire folder to this location
    • XSPF: sites/all/libraries/player/xspf_player_slim.swf
    • jPlayer: sites/all/libraries/player/jquery.jplayer.min.js *make sure both files are uploaded here.
  6. Now, go install the module on the module page.
  7. Navigate to admin/config/media/audiofield and select your default player
  8. Create a new content type and add a File field with the new Audio Upload widget.
  9. Set your settings as you see fit.
  10. Create a new peice of content with your new content type and upload your audio.
  11. There you go.

Please note that the author of the module has chosen a horrible color scheme for the Wordpress Audio Plugin and given you no way to edit it from the admin screen.

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

Kallen5k’s picture

Kallen5k commented

I love that i read no where prior to installs that i should not install the operating modules before the players themselves, so i had installed the modules first, then the players. The players did not show up when i went to choose them, as is explained to happen here, so I removed the modules and jplayer and installed them the way suggested above and still, when i get to step 7, no players are listed and i get the message "You must install and select at least one player to be able to play the audio". This message is spammed across my whole site...

Can someone assist with some steps how to actually make the players appear so i can select them and proceed with adding them to a content type. The ui360 player (which i assume is part of the jplayer) is quite attractive and trying to get that on my D7 site. I'm not quite sure what Soundmanager2 is, if it's not a player, but i installed that and its module as well, but nothing shows up in audiofield config for players to add.

Anthony Pero’s picture

Anthony Pero commented

Can you take screenshots? Completely uninstall the module (including uninstalling it from the database), delete it, delete the players, run update.php, re-download the module, re-download the player of your choice. Take a screenshot of where you are installing the PLAYER. Install the module. Go to the admin page of the module where you select a player. Take a screen shot. Upload these somewhere I can see them and give me links.

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

Kallen5k’s picture

Kallen5k commented

http://postimage.org/image/26oh2x0is/
http://postimage.org/image/26opclqzo/

Neither Jplayer nor Soundmanager2 show up. I deleted the modules out of 'system' in the database and off the site and my computer. Setup as you directed. same problem, Audiofield doesn't find any players, does not offer any to select.

Anthony Pero’s picture

Anthony Pero commented

Have you tried XSPF or Wordpress Player yet?

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

Kallen5k’s picture

Kallen5k commented

Sorry for the delay, had some things to take care of irl.

I have not tried them, I tried the other to see if it was just the Jplayer, but it's not giving me any option to select a player, yet it broadcasts that I need to across my whole site to myself and other web users.(live, i dont have the facility to run a test server). I'd really like to implement this, and it's written that it supposedly works with Drupal 7, but i'm not having any luck, and out of ideas for things to try.

Anthony Pero’s picture

Anthony Pero commented

There is another solution here: http://mustardseedmedia.com/podcast/episode50

Maybe it will work better for you.

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

Kallen5k’s picture

Kallen5k commented

it doesn't see the libraries for this either. I checked the Media Element page, and did a google search and didn't find any workable solution. I figure this is something broken with D7? But then, if others get it to work... wtf... Is there something I have to do to Drupal 7 to let these modules access and 'know' the libraries location?

Kallen5k’s picture

Kallen5k commented

Media Element lists this module as a dependency, is this also the case for Audio Field and the players that have library files (not listed as a dependency and not on any steps for installation of these...). Could be the root issue I've been having, I'm moving forward with trying to get Media Element working instead/first.

BEGRAFX’s picture

BEGRAFX commented

-

cord1’s picture

cord1 commented

Hi,
running linux OpenSuse 11.4
Drupal 7.x-dev (7.10 of 2012-jan-14)
clean install

jPlayer 2.1.0
audiofield 7.x-1.0-beta3 (2011-apr-18)

download and unpack jplayer so it matches audiofield.module:
line 177: sites/all/libraries/player/jplayer/jquery.jplayer.min.js

line 178: asks for sites/all/libraries/player/jplayer/jplayer.css
file do not exist

downloads and unpack audiofield to
sites/all/module/contrib/audiofield

enables audiofield
going to admin/config/media/audiofield
and get a white screen

Going back to frontpage following message is given:
You must install and select at least one player to be able to play the audio.

Can you give me a solution?

notdodgy’s picture

notdodgy commented

I want to be able to use the player but with the MP3 held on an external source.
(Hosting media consumes a lot of disk space and bandwidth, I am using links to dropbox.com, which provides 2 gig of space and a folder which is accessable publically).

e.g. I want to simply enter the URL to the remote file without it triggering an upload.

I have experience of modifying php code, so cold possible modify a copy of this module, however it would make more sense to have this feature implemented as another field type in or property in audiofield.

ericwenger’s picture

ericwenger commented

Did you make this modification? I would like to also link to an external file (Rackspace Cloud Files in my case). How you described above would really meet my needs. Or do you have a recommendation for another module that may do the same thing? I need the audio player linked to an external source. Thanks!

Anthony Pero’s picture

Anthony Pero commented

You can use the theme layer to do this already. Add a link to your file as a text field, and follow these instructions: http://drupal.org/node/524344

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

Maximchick’s picture

Maximchick commented

Hi!

First of all thank you for the great module. I've installed it and it worked out of the box on my Drupal 7 installation.

But the problem is that i see wpaudio player appears at the bottom of ARTICLES, but if i want to attach audio to BOOK i see only attached file without player. I tried to debug and figure out that for the BOOK content type "audiofield" module doesn't even called and this field is handled by the "file" module.

How can i solve this problem?

craigkendall’s picture

craigkendall commented

I'm a bit stymied here... I solved the immediate problem by customizing the code in audiofield.module, but know that is a visual-catastrophe-upon-update waiting to happen. It looks like there is supposed to be a way to customize the coloring of the player that should be update-proof, but for the life of me I cannot figure out how to make it work... and there is no real documentation I can find to help... HELP?

DravenDev’s picture

DravenDev commented

el problema es el siguiente:
instalo correctamente el modulo AudioField correctamente, incluyo en la librería el reproductor de Wordpress y sus scripts correctamente, lo direcciono el path para el jugador al momento de agregar una campo a un tipo de contenido se lo hace correctamente field_audio tipo Archivo y Audio upload todo bien hasta ahí pero al momento de publicar en el tipo de contenido me sale este error: Notice: Undefined index: progress_indicator en file_field_widget_form() (línea 466 de /home/erbolco/public_html/ultimahora/modules/file/file.field.inc).

como puedo solucionar esto agradeceré mucho una respuesta o guía gracias.

snevins’s picture

snevins commented

See the bug report at: http://drupal.org/node/1433326

There is a work-around posted there as well.

Victoria Welby’s picture

Victoria Welby commented

The premiumbeat.com players are not longer available. Maybe they could be removed from the installation information.

kappaluppa’s picture

kappaluppa commented

are there any suggestions for other players?
I'm trying to use dewplayer... I've created a folder in player called dewplayer and have the swf files in there.
So its...
sites/all/libraries/player/dewplayer/dewplayer.swf
sites/all/libraries/player/dewplayer/dewplayer-bubble.swf
sites/all/libraries/player/dewplayer/dewplayer-mini.swf
etc.

but none of these are options in the audio field settings.

MarkU’s picture

MarkU commented

The following makefile extract may be of use to others, works OK for me on Drupal 7.

; AUDIOFIELD & JPLAYER MODULES
projects[audiofield][version] = 1.0-beta5
projects[audiofield][type] = "module"
projects[jplayer][version] = 2.0-beta1
projects[jplayer][type] = "module"
; PLAYER LIBRARIES
;XSPF Slim Player
libraries[player][download][type] = "file"
libraries[player][download][url] = http://sourceforge.net/projects/musicplayer/files/musicplayer/slim-playe...
;WordPress Audio Player
libraries[audio-player][download][type] = "file"
libraries[audio-player][download][url] = http://wpaudioplayer.com/wp-content/downloads/audio-player-standalone.zip
libraries[audio-player][subdir] = "player"
;Sound Manager 2
libraries[soundmanager2][download][type] = "file"
libraries[soundmanager2][download][url] = https://github.com/scottschiller/SoundManager2/zipball/master
libraries[soundmanager2][subdir] = "player"
;JPlayer
libraries[jplayer][download][type] = "file"
libraries[jplayer][download][url] = http://www.jplayer.org/latest/jQuery.jPlayer.2.1.0.zip
libraries[jplayer][subdir] = "player"

After which, the JPlayer Module will need configuring, to point to the location of the player library ……… sites/all/libraries/player/jplayer

enskai’s picture

enskai commented

Hi there,
I have a problem with changing the size of uploading music files.
Even if I have changed to 10 MB as Maximed Upload Size, there is still 2 MB that I can upload.
Why?
I use Drupal 7

fairysdad’s picture

fairysdad commented

You will need to edit your php.ini file for this - search for the two lines that say something like:

upload_max_filesize = 2M
post_max_size = 8M

(the 2M and the 8M were the default ones on my install) - the minimum you will need is to set them both to 10M, but it might be an idea to set them to more, the max_size one perhaps moreso.

fairysdad’s picture

fairysdad commented

Is there anyway to remove the link to download the audio file, ie so it's only displaying the audio player? I apologise if it's something that's staring me right in the face - I'm fairly new to Drupal, and have spent the best part of the day getting the server working (it was working a while ago, then decided to stop accepting any network connections when I went to use it yesterday... anyway, that is completely irrelevant!) so am probably getting slightly screen-blind!

Thanks in advance!

tars16’s picture

tars16 commented

If you'd like to remove the download link regardless of the user permissions settings add the following code to your template.php file in your theme and clear your caches.

Remember to replace theme_ with the the name of your theme.

/**
 * Theme function for 'embedded' audio.
 * Overriden to remove the download link regardless of user permissions.
 * This ignores any of the permissions settings!
 */
function theme_audiofield_formatter_audiofield_embedded($variables) {
  global $user;
  $file = $variables['file'];

  if (!$file) {
    return '';
  }

  $audiofile=file_create_url($file->uri);
  $info = pathinfo($audiofile);
  $op = $info['extension'];
  $output = audiofield_get_player($audiofile, $op); 

  return $output;
}
oma378501’s picture

oma378501 commented

Hi

I'm use the module AudioField, it's great but this label: Download

this understood.

Regards
Omar

mo-seph’s picture

mo-seph commented

When I was using the Audio module, I set up views which would display a full size player for use in body text, and other views with tiny players for use in sidebars.

Is this possible with AudioField?

mo-seph’s picture

mo-seph commented

I'm using Audiofield 7.x-1.0-beta8. I've installed all the libraries suggested, and they show up in /admin/config/media/audiofield, and I can select them. However, some of them work, and some of them don't.

WP: works, but hurts my eyes with the crazy colours
XSPF Slim: works fine
XSPF Button: doesn't work - does't try to display any flash
Sound Manager: displays a non-functioning button
Google Reader: works fine.
jPlayer: textual interface only (maybe I haven't understood how to set it up)

Anthony Pero’s picture

Anthony Pero commented

On the WP player, the author hard coded the color of the player into the module. You can change this by hacking the module. Not elegant, but it works.

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

Yaazkal’s picture

Yaazkal commented

If you want to change the WP colors, Just copy/paste this code to your template.php and change the colors as you want:

Note: you have to replace THEME with your theme's name.

function THEME_audiofield_players_wpaudioplayer($variables) {
  $player_path = $variables['player_path'];
  $audio_file = $variables['audio_file'];
  return '<object class="audioplayer2" height="24" width="290" data="' . $player_path . '" type="application/x-shockwave-flash">
                          <param value="' . $player_path . '" name="movie"/>
                          <param value="playerID=2&amp;bg=0xCDDFF3&amp;leftbg=0x357DCE&amp;lefticon=0xF2F2F2&amp;rightbg=0xF06A51&amp;rightbghover=0xAF2910&amp;righticon=0xF2F2F2&amp;righticonhover=0xFFFFFF&amp;text=0x357DCE&amp;slider=0x357DCE&amp;track=0xFFFFFF&amp;border=0xFFFFFF&amp;loader=0xAF2910&amp;soundFile=' . $audio_file . '" name="FlashVars"/>
                          <param value="high" name="quality"/>
                          <param value="false" name="menu"/>
                          <param value="transparent" name="wmode"/>
                          </object>';
}

You can find the code for other players on file audiofield.players.inc that comes with this module.

joncjordan’s picture

joncjordan commented

You have to download the Jplayer skin which includes a css file and a few images. You can simply copy these files to your theme folder and it should start looking more like an audio player.

ronald’s picture

ronald commented

Thank you for the write-up, that helped a lot to eventually get it working.

A note and a question...

Note:
I had the same issue as a previous commenter, that Soundmanager only showed a non-functional button. The fix for that was for me to add the site to the Flashblock whitelist. (Flashblock optionally also blocks HTML5 video.) Normally, clicking the button should unblock it, but that didn't happen—no idea whether that's due to a problem with Flashblock or one with Soundmanager. (The mechanism does work for me with the Flash-based players.)
As far as I can tell, Soundmanager seems to be the only one of the options that offers a non-Flash option, i.e. one that works on iOS devices.

Question:
I have created an audio content type and created a node using that, which does what I'd expect in showing the player (with the limitation noted above). Is there a way to reference that field from another node such that the player is embedded there? Preferably similar to how image_filter works with images, but I'd be happy to hear about any way that works.

Thanks in advance for any hints! :-)

Edit: added image_filter link, changed subject, and I'm using Drupal 7.26.

mahsandu’s picture

mahsandu commented

I have tried but failed, I need to display the file name > then player for every file . If there is a way to display playlist then welcome. I have multiple files in a single page. Please help me. I am out of my mind now.

mlanning’s picture

mlanning commented

When using Soundmanager2, the only option I see available is the "360 UI". I'd really like to use the "Inline MP3 Player Button" as it looks here: Inline MP3 Player Button

How would I go about doing that? Is this what hook_audiofield_players() is for?

mlanning’s picture

mlanning commented

There is a SoundManager2 module. I didn't know this existed, but it solves my problem... or at least gives me options.