Last updated September 25, 2012. Created by jdelaune on March 17, 2011.
Edited by HongPong, batigolix, drupalshrek, bbinkovitz. 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
- Install jPlayer as usual
- Download the jPlayer library and extract its contents in sites/all/libraries/jplayer
(Tip: To make things easier, rename the folder to "jplayer") - 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:
- Make your content type and make your field.
- 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).
- Go to your display page and use the "jplayer" option. The basic version of jPlayer will be used to display your audio files.
Short video on how to use the jPlayer module for Drupal 7.
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.
<?php
$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.