How to change page in frame when songs change

this can be done in different ways using the annotation tag in the playlist or the itemnumber of the currently playing item-
you can have the entire html code in the annotation and write it to a css layer - please see the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/annotationdisplayimage.htm]annotationdisplayimage[/url] demo
or you can keep the filenames of separate .html pages in the annotation tag and and feed these filenames to the <iframe src with each new song...
or if you use separate .html files you can have these filenames in an array and feed thesee to the src by the itemnumber
or if you use a naming convention for the .html files you can use the itemnumber directly in the filename...

if you give the iframe the id="iframeID" then the crucial feeding line can be something like this:

Wow there seems to be quite a few ways of doing this. I was thinking about this last night and it seems for me that it would work best if i just had it open the same page every time and allow the backend to change what is displayed on that page. So that everytime a song plays, it would refresh the file1.html page.

Do you have a demo of something like this? I am going to also study that link you gave me and see if I can figure out exactly what it is doing as it looks cool as well.

Thank you for your reply.

I created an iframe right next to my player. I called the iframe "now_playing_iframe" and created the file for it to load called nowplaying.php

I am a little confused on how to add the java to my page. Do i just add:

to the java in the header? And if so, under which function do i place it?

From reading http://www.jeroenwijering.com/?item=Javascript_interaction I would assume it would go somewhere in this block below:

When I add it to the very end it causes the frame to refresh every second. Though when i put it anywhere else in the code and change songs nothing happens. Any ideas on where i need to insert the code to have the player load that page any time a song is changed?

Thank you.

it is not clear to me exactly what you want to do?
maybe i have also confused you by mentioning the many ways of accomplishing such a feature -

you have to consider the following:
what information do you want to show on item change -
do you want to keep that information in the playlist or in separate html files?

what is the point in using an iframe if you are going to write the information from the playlist anyhow?

one of the main advantages of iframes is that you can load an external html page into it - that would imply that you have a static html page for each playlist item and only use the javascript to select which to load -

if you want to write data you extract from the player/playlist it is easier/safer to just write that to the same page somewhere -
please see the source of the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/annotationdisplayimage.htm]annotationdisplayimage[/url] and the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/javascript.htm]javascript[/url] page both on the [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/]demopage[/url]

I am working on a mod for my ampache install I am using. I have removed the xspf jukebox and replaced it with the jw media player as it is far more powerful. On their index page there is a block called now playing. This block lists all the song information, along with a 5 star rating system, and links to different pages within the project, so that if you click on the song, it goes to the song info page, if you click on the album art it brings up a full preview of it, etc. One thing it lacks is the ability to show now playing in real time. So if you are looking at the page, it will show what was playing at the time you last visited the page, ie you have to hit refresh to see the updated information.

What I have done is stripped all that information and created a block that I can place in an iframe next to the player. This for one allows me to browse within the project, but not reset the block or the player as both are in a seperate frame. Also by having it up by the player I can now use features like real time ranking of the song. The block through suffers from the same problem as the main page. If i want the information to update I have to hit refresh. Yes I could put a refesh meta tag in there, but then it would be a guessing game on the intervals and would not always be up to date in real time .

So what I want to do is just have the player send out a request anytime the song changes to load the page playlist.php This would act as a refresh of that page. So if I a song changes within the player or if i change a song manually, it would automatically send out the request to load page playlist.php, there by refreshing it and showing the correct information.

I already have the page all written that will have all the stats, links, and ranking in it. It is dynamic and is able to tell what is currently being played on the player and update it accordingly. I also have it fully integrated into the iframe. All I need is the ability to have the player now send out the page refresh, or the command to load my playlist.php (name will never change, nor is there any strings attached to the url, everything is handled separately on this page via the php code) page into the player upon song change. Ideally I rather do this via editing the player code, not the playlist its self. I hope that makes sense.

If everything works out how I want it, my project will give the ampache code a much more user friendly look and feel. It will resemble the latest winamp bento skin or players like musicmatch jukebox, rhaposdy, or yahoo music applications. Where I have a custom looking player on the left, the interactive information in the middle, and the playlist on the right.

Thank you for your reply.

Any idea how to best go about sending a page to load request everytime a song changes?

like this (call your page instead of the alert)

<script type="text/javascript">
var currentItem = -1;

function getUpdate(typ,pr1,pr2,swf) {
if(typ == "item") {
if(pr1 != currentItem) {
currentItem = pr1;
alert("current item: "+currentItem);
}
}
}

function createplayer() {
var s1 = new SWFObject("mediaplayer.swf","playerID","320","300","9");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");

s1.addVariable("usefullscreen","true");
s1.addVariable("width","320");
s1.addVariable("height","300");
s1.addVariable("displayheight","240");

s1.addVariable("file","playlist.xml");
s1.addVariable("autostart","true");
s1.addVariable("repeat","list");
s1.addVariable("shuffle","false");

s1.addVariable("enablejs","true");
s1.addVariable("javascriptid","playerID");

s1.write("container");
}
</script>
</head>
<body onload="createplayer()">

<div id="container">
<a href="http://www.macromedia.com/go/getflashplayer">Get flash</a> to see this player.
</div>

</body>
</html>

THANK YOU Andersen!!! I used your example and modified it as suggested and it works beautifully!

Thanks again. You've been a great help!

Hmm, this is odd. Any ideas why this would work for me in ie7 but not in firefox?

It appears that firefox isn't liking this line for me, yet ie7 is

yet if i use the other function in your example above and just replace that one line with:

both browsers will do the alert.

Any idea why the above code will only work in ie7 for me? I can post the code of the complete page if it will help. I noticed on your examples you use a div and a wrapper class around where the iframes are. Are those required?

this code works fine in both IE7 and FF2 (see it in action [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/iframetest.htm]here[/url])

<script type="text/javascript">
var currentItem = -1;

function getUpdate(typ,pr1,pr2,swf) {
if(typ == "item") {
if (pr1 != currentItem) {
currentItem = pr1;
document.getElementById("now_playing_iframe").src = "item_"+currentItem+".htm";
}
}
}

function createplayer() {
var s1 = new SWFObject("mediaplayer.swf","playerID","320","300","9");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");

s1.addVariable("usefullscreen","true");
s1.addVariable("width","320");
s1.addVariable("height","300");
s1.addVariable("displayheight","240");

s1.addVariable("file","playlist_mixmedia.xml");
s1.addVariable("autostart","true");
s1.addVariable("repeat","list");
s1.addVariable("shuffle","false");

s1.addVariable("enablejs","true");
s1.addVariable("javascriptid","playerID");

s1.write("container");
}
</script>
</head>
<body onload="createplayer()">

<div id="container">
<a href="http://www.macromedia.com/go/getflashplayer">Get flash</a> to see this player.
</div>
<br>
<iframe id="now_playing_iframe" src="dummy.htm"></iframe>

</body>
</html>

the script expects to find pages by this naming convention "item_0.htm" - "item_1.htm" - "item_2.htm" etc.

Thank you for the reply. I went to your link and you are right, both work in ie and firefox. I will have to compare your code with what I am using and see if I can find what is different to make mine not work as yours. I'll post what I find.

Odd, I replied to this earlier and it was showing up and now it is now. Anyways, just to recap. I found what my problem was. I was missing the id tag in the iframe. This was allowing ie to work but now firefox. Everything works awesome now.

Thank you again so much for your help andersen!

kjjjj