Enqueue or Append Playlist

What list are you talking about here:

They appear on the list, but they do nothing when their turn comes in the list or when they are double-clicked on.

You can load (not append) a playlist with the loadFile() function. You can append multiple items with repeated (looping) use of addItem(), but it gets slow if there are more than 10-15 items.

Making gigantic playlists is best done on the server, then loaded into the player as one playlist. JavaScript running on the client is extremely slow compared to PHP or other scripts executing on a server.

The list I'm speaking of is the graphical list that appears at the bottom of the player when the display height is set less than the height. If I attempt to add (instead of load) a playlist, it shows up as an entry on the list, but does nothing.

I'd like to be able to add another playlist at the end of a currently playing playlist. Also, I'm using an online mp3 database program (kplaylist) to organize my mp3 files, and the database program can interact with xpsf players, but _only_ via xml playlists.

Thanks very much for your time. Your player and your documentation are terrific.

-kirax2

OH!

Well, addItem(), as the name implies, is to add an item (or track element) to the playlist. You shouldn't try to add a playlist; it's funny that you can, never tried that!

The only way to append a playlist is to add it one-item-at-a-time.

Since you are creating the playlists on the server, why not append them there and use loadFile() to load a new playlist, it's very fast. Anything that you do on the client with JavaScript interacting with Flash will be painfully slow.

I was just experimenting; I wasn't sure if it was possible, so I tried it.

I guess my reasons have to do with how I want to use the player.

I'm looking for something very dynamic. If I'm at a friend's house for a party and I want to add a song to what's playing, I currently can't do so without losing the whole list. I'm looking for an online player that has features that are more like a local mp3 software player; something that will let me change the order of what's currently playing, add songs on the fly, delete songs from the currently playing list, etc. With the javascript api, most of these functions are possible with the JW Flash Player. I've been working on an interface that will let me do many of these things. But as things stand right now, I can't append even a single song to a currently playing list; I can only re-load the entire list. That's why I'm looking for the ability to add playlists.

Thanks for your time,
-kirax2

Something is wrong with your implementation.

You can use addItem() to add a single item or multiple items to a playlist. It's just slow if you try to add too many items at once. It is also a bit hard to determine the position where you want to add the item, unless you leave out the creator element or number your creator elements. Then in the selection form, the user could enter the position where they wanted to add the item. Depending on how you set up your selection form, you could let the user select and add multiple items.

Another way to do it would be to put two players on the page. The current selection on the secondary player would be added to the primary player before/after the current position of the primary player when the user clicked on an "Add This Song" button or whatever... That way, the user could play a selection on the secondary player, and if they liked it, add it to the primary player, which would have the main playlist. The user could also change playlists on the secondary player to another genre to find some more selections of a different type.

or use a pure html/css/js playlist, which can also work offline - http://home5.inet.tele.dk/nyboe/flash/mediaplayer/

Thank you both very much for your responses and recommendations. I am really grateful!

I have tried to edit the source code for my mp3 database program, and have had a little success, but figuring out how to get it to send something other than an xml playlist to the JW Player is, as yet, beyond me (it is a php file over 14,000 lines long).

Instead, I decided to take andersen's suggestion and try to write an html interface which would accept the xml list generated by my database program and add the items to the JW Player one by one.

The problem is that the list my database program generates is a series of stream links. The player understands them just fine, but apparently the html does NOT. I copied the code from this page: http://home5.inet.tele.dk/nyboe/flash/mediaplayer/importxml.htm and replaced the text of playlist_multimedia.xml with my own playlist.

Here is a sample of my database program's output. If I use this, the html playlist doesn't load.:

<title>Eat For Two</title>
<creator>10,000 Maniacs</creator>
<image>/play/kplay.php?imgsid=166&c=1-1309883156&w=301&h=300</image>
<location>http://mysite.org/play/kplay.php?streamsid=169&c=1-1309883156&file=.mp3</location>
</track>

However, if I replace the location variable by hand with the correct path, everything works, picture, mp3, everything:
<title>Eat For Two</title>
<creator>10,000 Maniacs</creator>
<image>/play/kplay.php?imgsid=166&c=1-1309883156&w=301&h=300</image>
<location>http://www.mysite.org/music/Albums/10,000 Maniacs/Blind Man's Zoo/01 - Eat For Two.mp3</location>
</track>

As you can see, the only difference between the two is the location. The stream is valid; when I test it in a browser it downloads the file. The full xml list is also valid; if I load it into the JW Player directly, it plays. It's only when I try to import it into html that it doesn't work. I also tried urlencoding the location (by hand) and that didn't work either.

Is there anything I can do to make it work?

Thanks again,
-kirax2

Your location element:<location>http://mysite.org/play/kplay.php?streamsid=169&c=1-1309883156&file=.mp3</location>will work if you URIencode it before you send it to the player. For playlists, this is normally done by someone far, far away in a strange land. For a URI entered directly in the player code or sent by JavaScript, you need to use the JavaScript method encodeURIComponent() to do the encoding.

Without seeing your code, I can't tell you where to use it, but here is how it would be used in the player code:so.addvariable('file', encodeURIComponent('http://mysite.org/play/kplay.php?streamsid=169&c=1-1309883156&file=.mp3');

@kirax2 - please note: to make sure importing works in as many browsers as possible, please use the importxml_httprequest:
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/importxml_httprequest.htm

please also see the peroboea.js xml loading library: http://home5.inet.tele.dk/nyboe/javascript/periboea/

@andersen and @AJAX:

Thank you both very much. You guys are great!

Thanks to your help, I've got the page working as andersen designed it. Now I'd like to make a couple of changes, but I'm not sure if they're possible.

I have integrated the following code into the mp3 database program I'm using. As you can see, the code is almost entirely andersen's. When told to play, the database pops up a window containing the following code:

Currently, when an item on the html playlist in this window is clicked, it triggers the "play" function, which uses "createPlayer".

I would like to change the functionality so that when the page is loaded, each item in the xml playlist is immediately added to the player using addItem. If necessary I can use a flashvariable to have a blank playlist already loaded into the player initially. Then I want to make it so that clicking on the item in the html list tells to player to play that idx.

Once I have that working, I want to create a function to receive other xml playlists sent to the window, add them to the html list and also add each item in them to the to the player.

In short:

Database program creates playlist1 and checks to see if player window is currently open. It is not, so window is opened, playlist1 is parsed, listed in html, and the items are added one by one to the new player.

Now Database program creates playlist2 and checks to see if player window is currently open. It is, so playlist2 is sent to existing player window. Player window receives playlist2. Playlist2 is parsed, added to the existing html list, and each item is added one by one to the existing player (using addItem, so we don't lose the list that's already playing in the player).

Do you think it will be possible for me to do this? Am I being unrealistic and should I try a different approach, or do you think I'm on the right track?

Thank you for your help,
-kirax2

I would do it in the for loop, since you are already stepping through the xmlDoc.

You will have to previously have the player loaded and ready to accept the items (check for state=0).

Add the call to addItem() after the last txt+=... inside the loop.

addItem('dragplayer', {author:getTag('creator'), title:getTag('title'),...});

You know, what I'm really having trouble figuring out is how to get the main page to send anything to the popped up player window without refreshing the window. I'm assuming I'll have to use AJAX in order to accomplish this, but I'm not really sure how. Are there any sample pages which show how to receive new player commands in a popped-up player page without refreshing the popped-up page and restarting the player? Or even just receive new xml information (which can then be parsed and added to the player?)

Thank you for your time,
-kirax2

See this thread: http://www.jeroenwijering.com/?thread=9558, you can see the main window code in the referenced thread or the demo posted in that thread, same for the popup window itself. (It even works if you refresh the main page, or restart your browser, then load the main page again. —sorry, it doesn't work cross browser. The main page and the popup have to be opened with the same browser, although I'm working on that problem.)

senveben

@AJAX: That is a terrific page, and very helpful. You've been very kind, helping me even though I'm muddled and struggling to understand.

Right now, I'm just wondering one thing.

In the script I posted earlier, the page looks for an xml document (call it playlist1.xml), parses it, and creates an html list from it. I want to know if it's possible to *send* a second xml document (playlist2.xml) to the same page and have it be picked up, parsed, and *added to* the html list already on the page.

I know that one can use AJAX to obtain new data from a changed document by sending a request to a server. But I want to create a pop-up that can *receive* new information (without refreshing) which is sent from the main page. Can this be done?

Thank you again,
-kirax2

The same method that adds items from the main page to the popup can be used to add a playlist file.

This:popup.addItem({author:authorP, title:titleP, file:fileP, link:linkP}, itemP);
can be:popup.loadFile({file:fileP});

For Items and Files, you can do these things:

  idx: number - position in playlist array (integer starting with 0)

with the exception that loadFile() only applies to things that are files or urls, such as images, captions, audio, etc.

To add the items to the existing playlist, you would receive the additonal playlist in JavaScript rather than receiving it in the player with loadFile(). The function on the popup page that you send it to would then parse it and add its items using the addItem() function on the popup page.

Dear Ajax,

To add the items to the existing playlist, you would receive the additonal playlist in JavaScript rather than receiving it in the player with loadFile(). The function on the popup page that you send it to would then parse it and add its items using the addItem() function on the popup page.

I understand. So, in order to receive the additional playlist in Javascript, I would need to modify the following section of the document? How would I structure the command to "send" the xml playlist to this existing page?

Thank you,
-kirax2

showTags():

is where things start happening after the xmlDoc is received. That function parses the xmlDoc (the playlist) and writes the playlist on the main page.

So, in the popup code on the main page, instead of:popup.addItem({author:authorP, title:titleP, file:fileP, link:linkP}, itemP);make a new function in the popup window page code called addPlaylistItems() and call that new function from the main page with the xmlDoc:popup.addPlaylistItems(xmlDoc);That gets the xmlDoc to the popup page. (I like to keep the codes separated by function, so I would put that new function call right below popup.addItem() in that section of JavaScript code.)

Next, in the popup page code, start with the showTags code, but butcher it to parse the xmlDoc and do an addItem() call for each track:
[i](Untested, but it's more or less what you need to do to add each item to the existing playlist in the popup window)[/i]

  var xx;
  var x;
  var txt;
  x = xmlDoc.getElementsByTagName(theDoc);

  for (i = 0; i < x.length; i++)
  {
    addItem({author:getTag("creator") , title:getTag("title") , file:getTag("location") , image:getTag("image")});
  }
};

As an alternative, you could do the parsing on the main page and send each item to the popup using the existing:popup.addItem({author:authorP, title:titleP, file:fileP, link:linkP}, itemP);but I think that method might be much slower because of the cross-window calls for adding each item (I haven't tested it though).

I'm 80% there.

If you check out this page: http://sdfo.org/play/Pop/Player.html you'll see a very simple page there. Launching the player works fine, and so does adding items from the playlist. However, there is a piece of code that does not work as it was designed to.

From this page: http://willswonders.myip.org:8085/php/basic_popup.html
I got this code (which I converted to work with LoadXML in my page):

It's a clever bit of code that allows you to re-connect with a pop up after refreshing the main page. However, this part:

doesn't work as designed. On the first load of the page, if this function is triggered, it simply opens a blank popup window (because of the "popup = open('','win');" instruction). Therefore the value of popup is never null when it's checked at if(popup == null) because popup was just assigned a value! So the player window is never created.

You can see this in action on his page if you click "add song" on FIRST LOAD. You can also see it on my page if, on first load or after refreshing the main page (with the player window closed) you click "Add playlist". You'll get a blank popup, and no player.

Something similar to this was posted here: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23003867.html but I'm not quite ready to spend $25 just to see the answer. ^^;

I'd like to find a way to make this code work as it's supposed to, but so far I haven't found anything; though some say it might be possible using frames. If I can make it work as it's supposed to, I can combine checking if the popup is open, opening the popup window, and adding the items from the playlist into something that can be triggered by a single action, which is just what I'm looking for.

Any suggestions?

Thanks!
-kirax2

Tthere's something wrong with your computer/OS because my popup code does work.

I have tested it extensively in Internet Explorer 6, Firefox 2, and Opera 9, all running on Windows XP and Windows NT.

And your code, served from your site also works in IE6, FF2, and Opera9.

Screenshots of all six combinations.
http://willswonders.myip.org:8085/php/kirax2-IE6.jpg
http://willswonders.myip.org:8085/php/kirax2-FF2.jpg
http://willswonders.myip.org:8085/php/kirax2-Op9.jpg
http://willswonders.myip.org:8085/php/will-IE6.jpg
http://willswonders.myip.org:8085/php/will-FF2.jpg
http://willswonders.myip.org:8085/php/will-Op9.jpg

And according to Val, in this thread: http://www.jeroenwijering.com/?thread=9558 the code worked for him.

Please be very careful before you unjustly accuse someone of posting code that doesn't work!

I do apologize, I certainly didn't mean to offend you. Please, allow me to explain what I meant.

When I go to http://willswonders.myip.org:8085/php/basic_popup.html and click on "Add Song" first, /before/ ever clicking on "Launch the Player", a blank page opens. I have tried this on several different computers, and it has consistently been my experience. This is also the case if I go to http://www.sdfo.org/play/Pop/Player.html and click "Add Playlist" first, /before/ launching the player.

However, the code implies that this is not supposed to occur. If I am interpreting it wrong, please correct me. Here is my interpretation:

I think that using popup = open('', 'win'); to connect to a popup window without refreshing the popup window is extremely clever. I am very, very grateful for your help. It's quite possible that I have misinterpreted the code above. All I really wanted was to find a way to launch the player and add the songs to it using just *one* button instead of two buttons. I have been working on this particular problem for four days now, and it seemed like there might be a way to do it using this code.

I humbly beg your pardon if I have offended you.

-kirax2

@kirax2,

Hey man, no offense taken. Please just be careful before you say the code doesn't work. I work my a** off trying to write the best code for some very difficult, tricky applications. And, I thoroughly test it in the major browsers. I even installed Firefox (which I think is a piece of junk) a few days ago so I could test the offline music player for blumuze. The last thing I would ever do is to knowingly post bad code here, because many users are new to JavaScript, PHP, HTML and are looking to us for guidance — it would be a terrible thing to give them bad code and have them waste lots of time trying to get it to work.

OK — back to the application...

It was demo code, not fully idiot proofed. By that I mean that I had placed some buttons on the page that could be clicked to perform the various available functions so users could see what was possible. Such as sending the selection from the main window to the popup and refreshing/reloading the page or browser and still being able to connect/reconnect to the popup. In a finished application, these events would actually be triggered by the user clicking on an item in a playlist or whatever.

It was never intended that it would be possible to click on a selection without the popup window existing. Normally that action would not be possible (the option wouldn't be shown yet) or would be blocked until the popup existed.

However, it is possible to do a better job of idiot-proofing the method.

When the page is first loaded or reloaded/refreshed we try to get a reference to the popup window in case it already exists.  popup = open('', 'win');  If the popup already exists, that re-establishes the reference to the popup. If the poup doesn't exist, that  open...  causes a popup window with a URL of about:blank to open, which we don't want, so we check for a location of about:blank and immediately close it if it exists. Then we open a new popup for the player because one doesn't exist.

The method is a bit kludgy, but I haven't found or thought of a better way to be able to reload/refresh the main window and still be able to reconnect to a popup if it exists.

Ideally, we would like to check the value of popup and if it's an object, assume that the popup exists, but this won't work on a page reload/refresh because popup doesn't exist yet even though the popup does exist — left over from previously opening it.

The original application was to allow refresh/update of the data on the main page while still being able to reconnect to the existing popup.

So now I challenge you to break this code:

    function addPopupItem(authorP, titleP, fileP, linkP, itemP)
    {
      // first load/reload      or  popup closed?
      if((popupOpened == false) || (popup.closed))
      {
        // try to get reference for popup window
        popup = open('', 'win');

//alert('1-Popup:\n' + ' Location: ' + popup.location + '\n Name: ' + popup.name);

        // if we don't have a valid popup, open a new popup
        if(popup.location == 'about:blank')
        {
          // if the URL is about:blank we don't want that popup, so close it
          popup.close();
          // create popup window
          popUpVideos('popup-1.html', '420', '568', '600', '150', 'playlist_popup.xml');
        }
      }

      // addItem in popup window
      popup.addItem({author:authorP, title:titleP, file:fileP, link:linkP}, itemP);
      popup.focus();
      popupOpened = true;
    };
  </script>

(I hope it doesn't break, but if it does, then we'll see if we can fix it.)

@AJAX,

Thank you so much! I haven't tried the new code you posted yet, but I found something last night after posting my reply that seems to work very well and I wanted to share it with you. It is very close to the original implementation, and very simple, but it works (almost) perfectly. The only place where it doesn't work perfectly is where I've added a comment.

I found the basic structure of this here: http://www.1pixelout.net/2006/12/15/cross-window-javascript-communication-20/ I was actually already thinking along these lines, except I was thinking of using "getelementbyid" on the popup window and I still wasn't sure how to get rid of the blank page. As you can see, the beauty of this code is that it actually uses the blank page and loads the player into it if the player doesn't already exist.

I'm sorry you had to spend extra time writing new code when I had found a solution; I just wasn't positive it would work until this morning when I had a chance to test it more completely.

I will probably change this somewhat; besides adding the timeout, I want to separate loadXMLDoc into a separate function and change it so that the playlist loads only the first time the player pops up rather than each item being added. Once I have a working model I'll post the complete code.

You've been really awesome throughout this conversation, and I couldn't be more grateful to you for spending so much time helping me.

Thank you,
-kirax2

@kirax2,

I tried a similar solution. What I didn't like was having to specify the size for the about:blank window. That's why I chose to close it and use the popUpVideos() function to create the popup. I'm not very happy with this kludgy code, so I will revisit it if I get a better idea or see another way of reconnecting to the old pooup. Reality is, window.open was never intended to reconnect to an old popup, but that's what is needed if you want to refresh the main page without having to recreate the popup. Of course, there's always AJAX to refresh the data on the main page....

I forgot to tell you that there is a demo of the new code here: http://willswonders.myip.org:8085/php/basic_popupX.html

And — hey — thanks for breaking the old code, that's how it gets better.

Just to inform;

This feature is been added to kPlaylist version 1.8.

Hi there,
how to use addItem function to add a song in currently playing playlist...?

i get an error as addItem function is undefined...!!!

This is my code:

<script type='text/javascript' src='http://192.168.1.24/solestream/jwplayer/swfobject.js'></script>

<div id='preview'>This div will be replaced</div>

<script type='text/javascript'>
var s1 = new SWFObject('http://192.168.1.24/solestream/jwplayer/player.swf','mp1','470','470','9','#000000');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');

s1.addParam('flashvars','&author=Hai&description=ddddddddd&file=http://192.168.1.24/solestream/jwplayer/playlist.xml&playlist=bottom&autostart=true&repeat=always');

// s1.addParam('flashvars','file=http://192.168.1.24/solestream/jwplayer/Adiye Manam.mp3');
s1.write('preview');

addItem({file:'http://192.168.1.24/solestream/music/Adiye Manam.mp3'});
</script>

@samyphp,

The addItem() function is for the v3.x JW FLV Media Player API.

Please see the v4.x JW FLV Media Player API documentation here: http://code.longtailvideo.com/trac/

Your code should look something like this:

  var player = null;

  function playerReady(obj)
  {
    player = document.getElementsByName(obj.id)[0];

    setTimeout("addItem({file:'http://192.168.1.24/solestream/music/Adiye Manam.mp3'})", 150);
  };

  var newList = null;

  function addItem(newItem)
  {
    newItem.type = 'sound';
    var oldList  = player.getPlaylist();
    var newList  = oldList.concat(newItem);
    setTimeout("player.sendEvent("LOAD", newList)", 150);
  };
</script>

In HTML:

There seems to be a problem though. When you append a tune, the music stops. Is there a solution for
avoiding this?

Hi kLink,

Still i having the problem in the player. When you append a song, the player get refreshed (re loaded). Is there any solution for avoiding this...? Please help me...

Thanks in Advance,
samyphp