How to add playlist into jPlayer?

[Wang]

Hi everyone,

I'm new to the jPlayer, I just downloaded the document and have a music player ready to play,

but I have 2 or more songs and I want to add into this music player, is there any way to create a playlist?

Thanks.

[Wang]

I'm looking for a music player with playlist like this: http://www.jplayer.org/latest/demo-02/

[zaibotrenktas]

You can just view that page source and copy all stufff about jPlayer. 

Something like this:

$(document).ready(function(){
	var Playlist = function(instance, playlist, options) {
	var self = this;
	this.instance = instance; // String: To associate specific HTML with this playlist
	this.playlist = playlist; // Array of Objects: The playlist
	this.options = options; // Object: The jPlayer constructor options for this playlist
	this.current = 0;
	this.cssId = {
	jPlayer: "jquery_jplayer_",
	interface: "jp_interface_",
	playlist: "jp_playlist_"
	};
	this.cssSelector = {};
	$.each(this.cssId, function(entity, id) {
	self.cssSelector[entity] = "#" + id + self.instance;
	});
	if(!this.options.cssSelectorAncestor) {
	this.options.cssSelectorAncestor = this.cssSelector.interface;
	}
	$(this.cssSelector.jPlayer).jPlayer(this.options);
	$(this.cssSelector.interface + " .jp-previous").click(function() {
	self.playlistPrev();
	$(this).blur();
	return false;
	});
	$(this.cssSelector.interface + " .jp-next").click(function() {
	self.playlistNext();
	$(this).blur();
	return false;
	});
	};
	Playlist.prototype = {
	displayPlaylist: function() {
	var self = this;
	$(this.cssSelector.playlist + " ul").empty();
	for (i=0; i < this.playlist.length; i++) {
	var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
	listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
	// Create links to free media
	if(this.playlist[i].free) {
	var first = true;
	listItem += "<div class='jp-free-media'>(";
	$.each(this.playlist[i], function(property,value) {
	if($.jPlayer.prototype.format[property]) { // Check property is a media format.
	if(first) {
	first = false;
	} else {
	listItem += " | ";
	}
	listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
	}
	});
	listItem += ")</span>";
	}
	listItem += "</li>";
	// Associate playlist items with their media
	$(this.cssSelector.playlist + " ul").append(listItem);
	$(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
	var index = $(this).data("index");
	if(self.current !== index) {
	self.playlistChange(index);
	} else {
	$(self.cssSelector.jPlayer).jPlayer("play");
	}
	$(this).blur();
	return false;
	});
	// Disable free media links to force access via right click
	if(this.playlist[i].free) {
	$.each(this.playlist[i], function(property,value) {
	if($.jPlayer.prototype.format[property]) { // Check property is a media format.
	$(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
	var index = $(this).data("index");
	$(self.cssSelector.playlist + "_item_" + index).click();
	$(this).blur();
	return false;
	});
	}
	});
	}
	}
	},
	playlistInit: function(autoplay) {
	if(autoplay) {
	this.playlistChange(this.current);
	} else {
	this.playlistConfig(this.current);
	}
	},
	playlistConfig: function(index) {
	$(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
	$(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
	this.current = index;
	$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
	},
	playlistChange: function(index) {
	this.playlistConfig(index);
	$(this.cssSelector.jPlayer).jPlayer("play");
	},
	playlistNext: function() {
	var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
	this.playlistChange(index);
	},
	playlistPrev: function() {
	var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
	this.playlistChange(index);
	}
	};
	var videoPlaylist = new Playlist("1", [
	{
	name:"Big Buck Bunny Trailer",
	free:true,
	m4v:"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
	ogv:"http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
	poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
	},
	{
	name:"Finding Nemo Teaser",
	m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser_640x352_h264aac.m4v",
	ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser_640x352.ogv",
	poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
	},
	{
	name:"Incredibles Teaser",
	m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser_640x272_h264aac.m4v",
	ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser_640x272.ogv",
	poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
	}
	], {
	ready: function() {
	videoPlaylist.displayPlaylist();
	videoPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
	},
	ended: function() {
	videoPlaylist.playlistNext();
	},
	play: function() {
	$(this).jPlayer("pauseOthers");
	},
	swfPath: "../js",
	supplied: "ogv, m4v"
	});
	var audioPlaylist = new Playlist("2", [
	{
	name:"Tempered Song",
	mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
	oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
	},
	{
	name:"Hidden",
	mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
	oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
	},
	{
	name:"Lentement",
	free:true,
	mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
	oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
	},
	{
	name:"Lismore",
	free:true,
	mp3:"http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3",
	oga:"http://www.jplayer.org/audio/ogg/Miaow-04-Lismore.ogg"
	},
	{
	name:"The Separation",
	mp3:"http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3",
	oga:"http://www.jplayer.org/audio/ogg/Miaow-05-The-separation.ogg"
	},
	{
	name:"Beside Me",
	mp3:"http://www.jplayer.org/audio/mp3/Miaow-06-Beside-me.mp3",
	oga:"http://www.jplayer.org/audio/ogg/Miaow-06-Beside-me.ogg"
	},
	{
	name:"Bubble",
	free:true,
	mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
	oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
	},
	{
	name:"Stirring of a Fool",
	mp3:"http://www.jplayer.org/audio/mp3/Miaow-08-Stirring-of-a-fool.mp3",
	oga:"http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
	},
	{
	name:"Partir",
	mp3:"http://www.jplayer.org/audio/mp3/Miaow-09-Partir.mp3",
	oga:"http://www.jplayer.org/audio/ogg/Miaow-09-Partir.ogg"
	},
	{
	name:"Thin Ice",
	free:true,
	mp3:"http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3",
	oga:"http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg"
	}
	], {
	ready: function() {
	audioPlaylist.displayPlaylist();
	audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
	},
	ended: function() {
	audioPlaylist.playlistNext();
	},
	play: function() {
	$(this).jPlayer("pauseOthers");
	},
	swfPath: "../js",
	supplied: "oga, mp3"
	});
	$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
	$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
	}); and HTML <div id="jquery_jplayer_2" class="jp-jplayer"></div> <div class="jp-audio"> <div class="jp-type-playlist"> <div id="jp_interface_2" class="jp-interface"> <ul class="jp-controls"> <li><a href="#" class="jp-play" tabindex="1">play</a></li> <li><a href="#" class="jp-pause" tabindex="1">pause</a></li> <li><a href="#" class="jp-stop" tabindex="1">stop</a></li> <li><a href="#" class="jp-mute" tabindex="1">mute</a></li> <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li> <li><a href="#" class="jp-previous" tabindex="1">previous</a></li> <li><a href="#" class="jp-next" tabindex="1">next</a></li> </ul> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <div class="jp-current-time"></div> <div class="jp-duration"></div> </div> <div id="jp_playlist_2" class="jp-playlist"> <ul> <!-- The method Playlist.displayPlaylist() uses this unordered list --> <li></li> </ul> </div> </div> </div>

[JMohet]

You can have your own way of making playlists, which is pretty cool. Assuming you are OK with JavaScript, take a look:

$(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            var mp3FileName = "fname.mp3"; //<-- initial song
            $(this).jPlayer("setMedia", {
                mp3: mp3FileName
            }).jPlayer("pause");
        },
        ended: function (event) {
            $(this).jPlayer("setMedia", {
                mp3: getNextPlay(); //<-- The next song
            }).jPlayer("play");
        },
        swfPath: "scripts/jQuery.jPlayer.2.0.0",
        supplied: "mp3"
    });
});

function getNextPlay(){
    //Whatever you want here, but in the end, gets another music file.
}

The idea is the getNextPlay() (highlighted) function ends up returning another file name which is to be played.

For example, you could define getNextPlay to get the next file name from a drop-down menu.

In this case, you'll have a select:

<select>
    <option>file1.mp3</option>
    <option>file2.mp3</option>
    <option>file3.mp3</option>
</select>

and so the getNextPlay could be:

function getNextPlay(){
    //selects next drop-down option, and returns its text
    var selectedSong = $('select option:selected');
    return selectedSong.removeAttr('selected').next('option').attr('selected', 'selected').html();
}

[Mark Panaghiston]

The demos ZIP file from the download page is an easy way to get hold of the demo code.
http://www.jplayer.org/download/