Add Songs to the playlist

[andrea...@hotmail.it]

Hi evryone!
I'm not english so sorry if i make some mistakes...
my question it's just one: how to add songs to the playlist? i don't
mean how to add them from the javascript code (i can do it) but how a
visitor clicking on a link can add a song to the playlist so editing
the REset the Media...
i've tried with this but it doesn't work:
$("#jquery_jplayer_2").jPlayer( {
ready: function() {
$(this).jPlayer( "setMedia", {
m4a: "m4a/elvis.m4a",
oga: "oga/elvis.oga",
webma: "webm/elvis.webm"
});
},
supplied: "webma, m4a, oga"
);

[Mark Panaghiston]

The Playlist object is used in the demo to create the playlist functionality. You should start by adding changes to this object to suit your needs.

You want to be able to add a track, so add to the Playlist() prototype the addTrack method, which will take an object and add it to the playlist array of objects. Something like:

addTrack: function(media) {
  this.playlist.push(media);
  this.displayPlaylist();
}

Then you need to get the links on the page sending the correct information. When they click on the track to add, the click handler should send the media object for that track to the Playlist() instances addTrack() method.

If you are using a single media format, such as MP3, then you could always add the media url to the link's HREF. The click handler can then create the object to send using the HREF and then return false to stop the browser actually visiting the mp3 URL.

$("#button").click( function() {
  audioPlaylist.addTrack( {
    name: $(this).text(),
    mp3: $(this).attr("href")
  }
});

Best regards,
Mark P

[andrea...@hotmail.it]

Hi Mark!
Really thank you for the quick answer! But i am not so expert in
javascript (and jQuery)...so didn't understand some things you've told
me...
i've tried with your code but it doesn't work...can you write the full
code i should add please?

Andrea Taglia

[andrea...@hotmail.it]

Mark can you tell me a few basic information about this great player?
in my index page there are:

in the HEAD

<link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/
css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></
script>
<script type="text/javascript" src="js/jquery.jplayer.js"></script>

in the BODY

<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>
</div>

can you tell me hot to add a song to the playlist by click on a link?
i've tried with this:
<a href="javascript:mbare();">Bruno</a>

<script>
function mbare(){

$("#jquery_jplayer_2").jPlayer( {
ready: function() {
$(this).jPlayer( "setMedia", {

mp3: "Bruno",
mp3: "bruno.mp3",
oga: "bruno.mp3"
});
},
supplied: "mp3"
});
}
</script>

why does it not work?
PLEAS HELP ME MARK

[Mark Panaghiston]

You are doing that wrong.

It does not look like you are even using the external Playlist() object code from the demo.

Look at this:
http://www.jplayer.org/latest/demo-02/

It contains a Playlist() object. I described in my previous post what to do with it.

Get the demo ZIP files from the download page:
http://www.jplayer.org/download/

Using the code I gave, the HTML like should look like:

<a href="/media/elvis.mp3">Elvis</a>

The code then gets the media url from the link and adds it to the playlist using the text in the link as its name.

Best regards,
Mark P.

[andrea...@hotmail.it]

Hi! Thank you...
I've tried with this:

<script type="text/javascript">

$(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>";

//MBARE
addTrack: function(media) {
this.playlist.push(media);
this.displayPlaylist();
}

// 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 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"
});

});

function mbare(){
alert("almeno funge");
audioPlaylist.addTrack( {
name: "Bruno",
mp3: "bruno.mp3"
});
}
</script>

LOOK AT //MBARE
addTrack: function(media) {
this.playlist.push(media);
this.displayPlaylist();
}

and this in the body:

<div id="jp_playlist_2" class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered
list -->
<li></li>
</ul>
</div>
</div>
</div>


<a class="play" rel="bruno.mp3" style="color:white;"
onClick="mbare();" href="javascript:;">Bruno</a>


Why it doesn't work?

[Mukul Gupta]

Here are my 2 cents:
(i am working on kinda same thing, i have not succeeded yet, but as of
now )

step 1: create global var

var newPlaylist;

step 2: in ur document.ready

for playlist.prototype ... add the addTrack function
after PlaylistPrev by creating a new method (u did something strange
here, i am in no position to comment myself)

step 3: create a new instance of playlist object in ur document.ready
newPlaylist = new playlist(instance,media,options) //
look out for parameters here (i am stuck with this)

step 4: associate an event
example:

for a div items
<div id="items"> <a href=URL>Title</a></div>
$("#items").click( function() {
ap.addTrack({

name: $(this).text(),
mp3: $(this).attr("href")
});

});

Now its upto Mark to point out errors in my understanding .. and i
hope it helps u too :)

On May 12, 3:23 pm, "andrea_tag...@hotmail.it"

[Mark Panaghiston]

@Mukul: Yeah you explained well. The only bit we left as confusing is the shortened variable name I used in the click handler since I was going nuts with the phone auto-correcting the code into English words.

The problem is, we are not here to teach people JavaScript or jQuery... We can only help so much.

Erm... Your step 4 looks a little wrong... You'd want to attach the click handlers to the links and not to the parent div element. Give the links a class to make it easy to add the handlers in an easy step.

I will post again with my response to Andrea.

Thank you for helping out.
Best regards,
Mark P

[Mark Panaghiston]

@Andrea: You will need to learn a little JavaScript to be able to customize functionality.

I will give my final attempt...

The addTrack method... Goes on the PROTOTYPE!
It should look like this when added to the right place:

playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 :
this.playlist.length - 1;
this.playlistChange(index);

},
addTrack: function(media) {
 this.playlist.push(media);
 this.displayPlaylist();
}
};

The click handlers then need to be created in the:
$(document).ready(function(){
  // In here!
  // In the same scope as the other code!

$(".music-button").click( function() {
  audioPlaylist.addTrack( {

    name: $(this).text(),
    mp3: $(this).attr("href")
  });

  return false;
});

}); // end of doc ready

Then the HTML:

<a href="/media/elvis.mp3" class="music-button">Elvis</a>

Best regards,
Mark P

ps. Using and Italian keyboard is nasty... Where the hell are the curly brackets! I had to copy and paste from the rest of the post.