Last updated 2 February 2016. Created on 17 March 2011.
Edited by yan, drupalshrek, add1sun, HongPong. Log in to edit this page.

The jPlayer module provides a wrapper around the jPlayer JavaScript library.

This library provides an HTML5-based player, that uses a Flash fallback for browsers that do not support it. This module provides a default presentation for the player, as well as integration with file fields. This makes it possible to easily convert the display of any file field into an audio player.

This player will only work with MP3 files, so please be sure to restrict the file upload extensions on your file fields to only allow the mp3 extension.

Installation instructions for Drupal 7

  1. Install jPlayer as usual
  2. Download the jPlayer library and extract the zip or tar.gz file and then copy the dist/jplayer folder to sites/all/libraries/jplayer/. Make sure that jquery.jplayer.min.js can be found at sites/all/libraries/jplayer/jquery.jplayer.min.js
  3. Go to the configuration page of Jplayer in the "Media" section of the administration interface (admin/config/media/jplayer). Specify the path that contains the jPlayer library. Default path for the jPlayer library directory is "sites/all/libraries/jplayer".

jPlayer should now be available as a format for your media fields.

To use jPlayer as a field format:

  1. Make your content type and make your field.
  2. As of D7, you can select the default format "File", as well as the "File Widget".
    • (Tip: Make sure to limit the type of files that can be uploaded to file formats compatible with jPlayer: m4v for video and mp3 for audio. mp4s can be renaved with .m4v extensions with no ill effect.)
    • (Tip: Optionally, the Audiofield module can be used to make it easier to select between various players).
  3. Go to your display page and use the "jplayer" option. The basic version of jPlayer will be used to display your audio files.

Gotchas: When setting up your field in the "Manage Display" tab, make sure your theme is compatible with the "Preferred Solution" (Flash or HTML5). For example, as of D7, Bartik is not written in HTML5. You should therefore use the Flash version, or an HTML5 compatible theme.

Installation instructions for Drupal 6

1) Install jPlayer, CCK and FileField as usual

2) Download the jPlayer library. The downloaded directory only contains 2 files, jplayer.jquery.js and Jplayer.swf. Place these two files in sites/all/libraries/jplayer. Note jplayer 1.2.0 is the compatible version at this time, not the 2.x series. (see #1359716: Player appears paused and in uncontrollable)

3) Add or configure a FileField under Administer -> Content management -> Content types -> [type] -> Manage Fields (admin/content/node-type/[type]/fields). Restrict the upload extension to only allow the mp3 extension. It's also a good idea to enable the Description option, as this can be used to label your files when they are displayed in the playlist.

4) Configure the display of your FileField to use "jPlayer player". If your want to have a multi-file field display as a playlist of songs, you may use the "jPlayer multi-file playlist" formatter.

5) Create a piece of content with the configured field. Give the file a description that will be used as the file label in the playlist.

Theming

jPlayer has a number of theming functions. This snippet displays an MP3 file associated with a node.

 $nid = 100;                       // Example node id 100
$node = node_load($nid);          // Loading the full song node
$type_name = 'song';              // Machine-name of the node content type
$field_name = 'field_song_file';  // Machine-name of the CCK field you use to store the MP3 file
$jplayer_data = array(
  '#field_name' => $field_name,
  '#node' => $node,
  '#type_name' => $type_name,
  '#theme' => 'jplayer_formatter_single',
  '#item' => $node->{$field_name}[0],
);
print theme('jplayer_formatter_single', $jplayer_data); 

Support

Many issues you may have may be caused by jPlayer library itself, rather than the Drupal module. Check with the jPlayer support pages for issues with Flash warnings or the player behaving oddly:
http://www.happyworm.com/jquery/jplayer/support.htm
http://www.happyworm.com/jquery/jplayer/latest/developer-guide.htm#jPlay...
http://groups.google.com/group/jplayer

If you find a problem with the Drupal module jPlayer then create an issue.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

moin sahil’s picture

can you please provide download link of j player library because i can't download from j player website because i don't know which file for library thanks

Jam Paraiso’s picture

There seems a problem in the jplayer library.

"Either the directory specified does not seem to contain the jPlayer library, or you are not using version 2 of jPlayer. Check to make sure that the jquery.player.min.js file is located within this directory."

Please Updated the instructions on how to successfully install it.

ferenju’s picture

Here is the google code link for the missing min.js
https://code.google.com/p/the-vampire-diaries/downloads/detail?name=jque...

stefan_seefeld’s picture

I, too, find the library installation instructions not very clear.

I just downloaded jPlayer-2.9.2. If I follow the instructions, I'd unpack that into the libraries/ subdirectory, and perhaps rename it to 'jplayer'. However, that doesn't appear right, as that toplevel directory contains many things, but not the jquery.jplayer.min.js file that is being checked for.
That file is actually under 'dist/jplayer/', though when I set the path to 'sites/all/libraries/jPlayer-2.9.2/dist/jplayer' I still get an error message about 'jplayer.jplayer.min.js' not being found.

Thanks for your help,
Stefan

rogerlenoir’s picture

Hello,

If you download jPlayer 2.9, as Stephan says, you must use the folder [jplayer] which is in [Jplayer2.9][dist][jplayer]
And you must also copy "jquery.jplayer.min.js" an rename it in "jquery.player.min.js"

I think that it is a little mistake in the module :
the module waits "jquery.player.min.js" and the plugin js waits "jquery.jplayer.min.js

stefan_seefeld’s picture

Oh, that's quite a subtle bug indeed !
Well, I have copied jquery.jplayer.min.js to jquery.player.min.js and still get the error message about the jplayer library not being found. (This was with the jplayer 7.x-2.0-beta1 module, so I'm now upgrading to the latest dev version. Wasn't there some talk about a beta2 "coming soon", back in january ? :-) )

stefan_seefeld’s picture

...and now that I have switched to jplayer 7.x-2.x-dev, I got single audio content to play (yay !).
However, having just created a view for multiple audio files, I get the already reported errors

Undefined index: extension in jplayer_sort_files() (line 171 in .../sites/all/modules/jplayer/includes/jplayer.theme.inc).

and

Undefined index: type in jplayer_sort_files() (line 240 in .../sites/all/modules/jplayer/includes/jplayer.theme.inc).

(as well as line 246)

Wasn't that supposed to be fixed with the earlier patches that are in dev now ?

grigley’s picture

I uploaded all the Files and renamed them correctly, but the Player is not playing... Any other Players are working. Hope someone can fix it.

epruett’s picture

Here is the list of files that I needed to make jPlayer work.

jquery.jplayer.js
jquery.jplayer.min.js - same file just different name
jquery.jplayer.swf
jquery.player.min.js - same file just different name

Hope this helps.

mfuller526’s picture

This worked for me. I downloaded player 2.9.2. Within [dist/jplayer] there are three files: jquery.jplayer.js, jquery.jplayer.min.js,jquery.jplayer.swf. Place ONLY those three files within: sites/all/libraries/jplayer. Do not include other files from jPlayer 2.9.2. I made a jPlayer content type (field type & widget:file) (display: jPlayer-Player > cogwheel > select Kind: single or playlist) then create content from it. If making a playlist be sure your mp3 field > manage fields > Number of values is greater than one.

brancishorty’s picture

Was having similar issue - audio played in browser but not on page. Followed your instructions and it worked instantly. Thanks!

marysmech’s picture

I have followed your instructions and it works. Thank you.

kimnooij’s picture

After 3 hours of testing, reading, searching for the library this is what fixed the audio player! Thank you very much!

CeperaW’s picture

Applaud standing !!!