Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

display title of currently playing item

Hello,

I have been trying to ...Hello,

I have been trying to get the title of the currently playing item to display, and cannot.

Here is my code. The display script, got from; a suggestion from Lefty on another forum.

here is my code. The playlist plays, but I cannot get the currently playing item to display.

Cheers! Ricco

-----
bc.. <html>
webulite.com media player
<script type="text/javascript" src="http://webulite.com/media/swfobject.js"></script>

<script type="text/javascript">
function createPlayer() {
var xxx = 'http://webulite.com/media/playlist.xml?t='+Math.round(1000 * Math.random())
var flashvars = {
file: xxx,
autostart:"true",
playlist:"none",
repeat:"always",
volume:"100"
}
var params = {
allowfullscreen:"true",
allowscriptaccess:"always"
}
var attributes = {
id:"player1",
name:"player1"
}
swfobject.embedSWF("http://webulite.com/media/player.swf", "placeholder1", "250", "20", "9.0.115", false, flashvars, params, attributes);
}
</script>


<script type="text/javascript">
var player = null;


function playerReady(obj)
{
player = gid(obj.id);
displayFirstItem();
};


function itemMonitor(obj)
{
gid('nowplaying').innerHTML = 'Now Playing: <span>' + player.getPlaylist()[obj.index].title + '</span>';
};


function displayFirstItem()
{
if(player.getPlaylist())
{
itemMonitor({index:0});
player.addControllerListener('ITEM', 'itemMonitor');
}
else
{
setTimeout("displayFirstItem()",100);
}
};


function gid(name)
{
return document.getElementById(name);
};
</script>


</head>
<body onload="createPlayer();">

<div id="placeholder1"></div>

<p>

<div id="nowplaying"></div>

</body>
</html>


27 Community Answers

Up Down

JW Player

User  
0 rated :

lefTy says, "Try this code":bc.. <html>

<head>

<title>webulite.commediaplayer</title>

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

<scripttype="text/javascript">
varxxx=encodeURIComponent('http://webulite.com/media/playlist.xml?t='+Math.round(1000*Math.random()));

varflashvars=
{
'file':xxx,
'playlist':'none',
'repeat':'always',
'volume':'100',
'id':'playerID',
'autostart':'true'
};

varparams=
{
'allowfullscreen':'true',
'allowscriptaccess':'always'
};

varattributes=
{
'id':'playerID',
'name':'playerID'
};

swfobject.embedSWF('http://webulite.com/media/player.swf','player','250','20','9.0.124',false,flashvars,params,attributes);
</script>

<scripttype="text/javascript">
varplayer=null;
varplaylist=null;


functionplayerReady(obj)
{
player=gid(obj.id);
displayFirstItem();
};


functiondisplayFirstItem()
{
try
{
playlist=player.getPlaylist();
}
catch(e)
{
setTimeout("displayFirstItem()",100);
}

player.addControllerListener('ITEM','itemMonitor');
itemMonitor({index:0});
};


functionitemMonitor(obj)
{
gid('nowplaying').innerHTML='NowPlaying:<span>'+player.getPlaylist()[obj.index].title+'</span>';
};


functiongid(name)
{
returndocument.getElementById(name);
};
</script>

</head>

<body>

<divid="playercontainer"class="playercontainer"><aid="player"class="player"href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">GettheAdobeFlashPlayertoseethisvideo.</a></div>
<br/>
<divid="nowplaying"></div>

</body>

</html>



*_Be sure that you are testing online. The JavaScript API only works online._*

Up Down

JW Player

User  
0 rated :

LoLo,

You are the greatest... that works perfectly. And... it also changes the display as I move from song to song which I wonder if it would take additional code.

Thank you so much. Now I am off to the code to learn how you made it work.

Cheers! Ricco

Up Down

JW Player

User  
0 rated :

Black magic, voodoo, and incantations always work!

Here's how:

Once the player is instantiated, it calls playerReady() where we get the reference object. (But it might not be really, really ready because it might still be getting and indexing the playlist {an asynchronous event}.)

Next we try to get the playlist, if successful, we move on, if not successful, we try again in 100ms.

Once we know the player is ready, we add the ITEM Listener, which will be called by the player each time the item index changes (except the first time, which is why we use itemMonitor({index:0});)

Every time the item index changes, the player calls the itemMonitor function which gets the current title and sends it to the HTML element with an id of "nowplaying".

That's it!

Up Down

JW Player

User  
0 rated :

Thanks for the great code!
I have a slight issue though, it seems that the first song in the 'Now Playing' div is wrong if 'shuffle' is on. How can I make it wait long enough to get the correct song the first time?

Up Down

JW Player

User  
0 rated :

@Mark,

I think this code in *bold* will do it, but I haven't tested it:bc.. player.addControllerListener('ITEM','itemMonitor');
itemMonitor({index:*player.item*});



If it doesn't work, post back and I'll think up some tested code.

Up Down

JW Player

User  
0 rated :

@lost

Thanks for your help,

Now instead of displaying the incorrect song it just doesn't show a song title at all for the first song. After clicking next or another song in the playlist it correctly displays the song title. Any ideas?

Up Down

JW Player

User  
0 rated :

OK

I'll have to do some testing to see what is the best way to get the first title when shuffle=true.

Check back later.

Up Down

JW Player

User  
0 rated :

@lost,

Thanks for your code, it totally worked. I'm wondering if you can point me at the API or whatever you read to help you figure that out? Like how can I find out all of these properties of the objects that deal with the Flash Player? I saw the page that lists methods like getPlaylist() and getConfig(), but what does this code mean:

{index:player.getConfig()['item']}

?

Thanks again!

Up Down

JW Player

User  
0 rated :

Also, is there a way to display any other information besides the title? I tried accessing the 'author' and 'annotation' tags but they were both undefined...

Up Down

JW Player

User  
0 rated :

All of the developer documentation is here: *http://developer.longtailvideo.com/trac/*.

You can retrieve any element of the playlist, mostly the *File Properties* (ref *http://developer.longtailvideo.com/trac/wiki/FlashVars#Fileproperties*), but also any custom elements that you have added to the playlist.

bc.. functionitemMonitor(obj)
{
gid('nowplaying').innerHTML='<span>NowPlaying:'+playlist[obj.index]['title']+'</span>';
gid('author').innerHTML='<span>Author: '+playlist[obj.index]['author']+'</span>';
gid('description').innerHTML='<span>Description:'+playlist[obj.index]['description']+'</span>';
};

Inthebody:
<divid="nowplaying"></div>
<divid="author"></div>
<divid="description"></div>



Allmashedtogether:bc.. functionitemMonitor(obj)
{
gid('nowplaying').innerHTML='<span>NowPlaying:'+playlist[obj.index]['title']+'Writtenby:'+playlist[obj.index]['author']+'whichisabout:'+playlist[obj.index]['description']+'</span>';
};

Inthebody:
<divid="nowplaying"></div>


I also "improved" the code a bit.

This:bc.. {index:player.getConfig()['item']}
is an object that we are sending to the itemMonitor() function.

It consists of a name:value pair.

The value is the value part of the player configuration object 'item' name:value pair.

In other words, we get the player configuration object which has all of the configuration settings stored as name:value pairs.

Then we get the value of the item pair, which is the currently selected index or track-1 (because index counting starts at 0).

Up Down

JW Player

User  
0 rated :

Hello guys,
I tried your scripts and they work fine. But I have some problems because I am using a long playlist: more than 140 songs. Doing this, the page loads very slowly and also the browser requires a lot of memory resources (and it is almost impossible to play the songs).

Any suggestions to improve this scenario?

Thank you in advance!

Luciano

Up Down

JW Player

User  
0 rated :

you're in the wrong thread

playlist length has nothing to do with displaying the title

Up Down

JW Player

User  
0 rated :

@trixie
Well, I needed the code that allows me to display the title and found it here. After implementing it, I experienced the problem I explained above, otherwise the player would work fine without the displaying part.

Did some of you guys try the code posted here with a long playlist?

I will search also somewhere else...

Up Down

JW Player

User  
0 rated :

the longest playlist that i've ever tried had 1,517 items

the playlist length has nothing to do with displaying the title

Up Down

JW Player

User  
0 rated :

Hey trixie,
What I would need to do is this:
bc.. function itemMonitor(obj)
{
gid('nowplaying').innerHTML = 'Now Playing: <span> *<?php echo $something ?>*' + player.getPlaylist()[obj.index].title + '</span>';
};


Yesterday I couldn't make it work (maybe I was experiencing some networking issues)...

I would need to add a stars rating system for each song and I thought I could do it dynamically with PHP, depending on the current song.

Today it seems different, so probably you are right.
Anyways, taking advantage of your availability, do you think that implementing a PHP script in that part of the function is a good way or do you have better ideas?

Thank you again for your support!

Luciano

Up Down

JW Player

User  
0 rated :

Hi Luciano,

If you want the player to handle the playlist processing, you'll need to use the JavaScript API to get the data from the player.

Up Down

JW Player

User  
0 rated :

Thanks LoLo for this code to display info about the currently playing playlist item - exactly what i was looking for!!

Up Down

JW Player

User  
0 rated :

this is EXACTLY what i was looking for. it allowed me to create an external link to information about the song/video, since I couldn't figure out how to do this in the 5.0 player. THANK YOU SO MUCH!!!!

Up Down

JW Player

User  
0 rated :

HEY excuse my english dont know if i am at the right topic ....
Please some help !!!
i have a player with multiple playlists .....
i want the playlist always starts at the first item of each list but ....the player memorizes ( i guess) can i disable cookies or sometinhg ??? mark item 1 ??
what can i do ???

Up Down

JW Player

User  
0 rated :

Use this:bc.. player.addControllerListener('ITEM','itemMonitor');
itemMonitor({index:player.getConfig()['item']});



Up Down

JW Player

User  
0 rated :

Sorry for posting in a old topic but I can't find this information anywhere else.. I tried all the code here and I can't display anything other than title, All I want is for it to display the title and enable the users to click the title to go to the music's information page?? The URL is in the playlist and I can't seem to get it to work :/ They all appear blank..

How would I grab the custom elements from the playlist??

function itemMonitor(obj)
{
gid('nowplaying').innerHTML = '<span>Now Playing: ' + playlist[obj.index]['title'] + '</span>';
gid('musicurl').innerHTML = '<span>URL: ' + playlist[obj.index]['url'] + '</span>';
};

??

Up Down

JW Player

User  
0 rated :

Hello,
I have tried the code above to be able to show the current playing file but have not been able to make it work, posted below is my orginal script. Any ideas?
bc.. <html>

<head>
<title>Video Test Page</title>
<script type="text/javascript" src="swfobject2_1.js"></script>
<script type="text/javascript">

function deletePlayer(theWrapper, thePlaceholder, thePlayerId) {
swfobject.removeSWF(thePlayerId);
var tmp=document.getElementById(theWrapper);
if (tmp) { tmp.innerHTML = "<div id=" + thePlaceholder + "></div>"; }
}


function createPlayer(theWrapper, thePlaceholder, thePlayerId, theFile, theStart) {
deletePlayer(theWrapper, thePlaceholder, thePlayerId);

var flashvars =
{
file:theFile,
controlbar:"bottom", <!--top, bottom, over, none-->
autostart:false, <!--true, false-->
playlist:"right", <!--right, left, bottom, none-->
playlistsize:"400",
stretching:"exactfit", <!--none, exactfit, uniform, fill" -->
smoothing:"true", <!--true, false-->
shuffle:"false", <!--true, false-->
repeat:"none", <!--none, true, false, list=play list once, always=continously play list, single,-->
plugins:"none",
wmode:"opaque",
backcolor:"E0E0E0",
frontcolor:"000000",
lightcolor:"008080",
screencolor:"E0E0E0"

}

var params =
{
allowfullscreen:"true",
allowscriptaccess:"always"
}

var attributes =
{
id:thePlayerId,
name:thePlayerId
}

swfobject.embedSWF("player.swf", thePlaceholder, "780", "350", "9.0.115", false, flashvars, params, attributes);
}
</script>
</head>

<body onload="createPlayer('wrapper1', 'placeholder1', 'player1', 'playlist_chapters.xml', 'false')">

<div align="center">
<a href="javascript:createPlayer('wrapper1', 'placeholder1', 'player1', 'playlist1.xml', 'true')">2007</a>

<a href="javascript:createPlayer('wrapper1', 'placeholder1', 'player1', 'playlist2.xml', 'true')">2008</a>

href="javascript:createPlayer('wrapper1', 'placeholder1', 'player1', 'playlist3.xml', 'true')">2009</a>

<a href="javascript:createPlayer('wrapper1', 'placeholder1', 'player1', 'playlist4.xml', 'true')">2010</a>

</div>

<a class="LogoHeader" href="http://www.longtailvideo.com/">
<img title="LongTail Video" border="0" alt="LongTail Video" src="logo_header.png" width="140" height="41"></a>

</body>

</html>




Thank you
RandyS

Up Down

JW Player

User  
0 rated :

Zach at longtail-
Hello,
Thank you for responding, I am still pretty new to all of this, The location i got the source code for the player i use is from http://developer.longtailvideo.com/contributors/nyboe/JW_API_xmpl_3-1-1-2.html.
I do not know what to do about the fist part, on the second i replaced the
bc.. <a href="javascript:createPlayer('wrapper1', 'placeholder1', 'player1', 'myplaylist1.xml', 'true')">my play list 1</a></p>


with the
bc.. <a href="onclick:createPlayer('wrapper1', 'placeholder1', 'player1', 'myplaylist2.xml', 'true')">my play list 2</a></p>


If I click on the play list 2 first i get and "The webpage cannot be displayed" if i click on play list 1 first and then the play list 2 nothing happens.
If you need you can view this at http://174.45.255.31/Music/Music_flash1.htm
3 days grace is set up like play list 2 and
3 doors down is set up like play list 1.
thank you
RandyS

Up Down

JW Player

User  
0 rated :

Hello Zach,
Thank you for all your help!!
Cool!! I got your code to work but I had to remove the *return false;* part. but now I can remove the javascript comand,
Also I went back and look at the orginal source code and seen i missed a part of it didn't seem to make a difference but I added
bc.. <style type="text/css">
#wrapper1 { width:320px; height:296px; }
</style>



I also tried to plugin the code above to have a "now playing" but still no luck. Any ideas on this??

Thanks again
RandyS

Up Down

JW Player

User  
0 rated :

Hello Zach,
There is a post by LoLo on Sun, 2009-06-07 08:00 that has a code to have the current playing file displayed. But I got it figured out, I need to copy and past more often less typing errors :/ lol you can see it here if intrested
http://174.45.255.31/Music/Music_flash1.htm
thank you again for your help
and thanks to LoLo and Lefty
RandyS

Up Down

JW Player

User  
0 rated :

Hello,

ok, when using this code,
bc.. function itemMonitor(obj)
{
gid('author').innerHTML = '<font color="#993300">Author:</font> <span>' + player.getPlaylist()[obj.index].author + '</span>';
gid('nowplaying').innerHTML = '<font color="#993300">Now Playing:</font> <span>' + player.getPlaylist()[obj.index].title + '</span>';
gid('year').innerHTML = '<font color="#993300">Year:</font> <span>' + player.getPlaylist()[obj.index].year + '</span>';

};


How do I define an item? author and playlist work fine but not the year. year shows up as undefined. you can see is at my music page posted above.
Thanks
RandyS

Up Down

JW Player

User  
0 rated :

Hello,
Sory if i am being a pain. Thank you for responding and enduring ;),
This is the current playlist format i am using.
bc.. <?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Disturbed</title>
<info>http://174.45.255.31/Music/Music_flash1.htm</info>

<trackList>
<track>
<SortByPath>Down with the Sickness.mp3</SortByPath>
<duration>281</duration>
<location>Disturbed/Down with the Sickness.mp3</location>
<info>http://www.google.com/search?hl=en&q=Down+with+the+Sickness</info>
<creator>Disturbed</creator>
<title>Down with the Sickness</title>
<album>The Sickness</album>
<trackNum></trackNum>
<year>2000</year>
<genre>Metal</genre>
<comments></comments>
<image>disturbed-1.jpg</image>
</track>
<track>
<SortByPath>Stupified.mp3</SortByPath>
<duration>273</duration>
<location>Disturbed/Stupified.mp3</location>
<info>http://www.google.com/search?hl=en&q=Stupified</info>
<creator>Disturbed</creator>
<title>Stupify</title>
<album>The Sickness</album>
<trackNum></trackNum>
<year>2000</year>
<genre>Metal</genre>
<comments></comments>
<image>disturbed-2.jpg</image>
</track>
</trackList>
</playlist>

This question has received the maximum number of answers.