Continue Music Page to Page Website

Hi,

I made a mp3 player with flash that have control button for visitor to pause and play the songs. I would like to know if there is a way to have the songs continue to play from page to page. Example, when the first song is still playing and the visitor click on another page, I want that song to continue playing without reload. But when the song end I want the second song to follow after it. Is there a way to make it works?

I found some posting about similar issue but it is for embed song directly to the website and not mp3 player. I also tried to use a iframe but it doesn't work

I also want to know if there is a way to have my mp3 player on a javascript accordion menu and have the drop down as my playlist?

That makes me think of this.
I explained there how a script can continue working even if you go from one page to another.
Your music is my 'bird'.

Arie Molendijk

11:38 PM

Thanks for your reply Arie. It sounds like similar problem, but is there a way to make the frame 'invisible'? I don't want to have the frame on all my pages. Is it possible to have the frame only on my 'mp3 player' (the control button and have everything else on the page be 'normal' html?

Thanks,
Sam:

As far as I know, it can only be done with frames. But you can present your site as having no frames (although it has) by putting 'frameborder=0' at the beginning of the frameset. I've done it on this site.

Good luck,
Arie Molendijk./

I would like something similiar of the sort. This would be a stupedous help me, so thank you to anyone who replies.

AGR

Frames is the best way to go about this, and is the easiest to do. border=0 and set the frame to be 1px by 1px top/left alignment and it is invisible.

There are other ways though, although not as exciting. Pop ups, using JS to control the playback, all of which can be turned off by the visitor, so you have to be careful.

Could you give the exact code? I am still not very familiar, or at least could you tell me if this is right?

Or something similiar?

05:31 PM

To see how things could be worked out, do the following (coding in its simplest form).

Create 'index.html' and put the following in it:

Code:

<html> <script> function music() { music=window.open('http://cgi.omroep.nl/cgi-bin/streams?/avro/klassiek/zoc/zoc_951119.wma','name','toolbar=yes,top=30000,left=0,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=1,copyhistory=yes,width=1,height=1');setTimeout("music.blur()",100) } </script> <frameset  frameborder="0" rows="0px,*" > <frame noresize="noresize" name="hidden" src="hidden.html"> <frame noresize="noresize" name="main" src="page1.html"> </frameset> </html>

Then create 'hidden.html' with nothing in it, like so:

Code:

<html> <head> </head> <body> </body> </htm>

Then 'page1.html':

Code:

<html> <head> </head> <body> PAGE 1<br><br> <a href="javascript:void(0)" onclick="top.location.reload();top.music()">listen to the music</a><br><br><br><br> <a href="page1.html" >page 1</a><br> <a href="page2.html">page 2</a><br> <a href="page3.html">page 3</a><br> </body> </htm>

'page2.html':

Code:

<html> <head> </head> <body> PAGE 2<br><br> <a href="javascript:void(0)" onclick="top.location.reload();top.music()">listen to the music</a><br><br><br><br> <a href="page1.html">page 1</a><br> <a href="page2.html">page 2</a><br> <a href="page3.html">page 3</a><br> </body> </htm>

and finally 'page3.html':

Code:

<html> <head> </head> <body> PAGE 3<br><br> <a href="javascript:void(0)" onclick="top.location.reload();top.music()">listen to the music</a><br><br><br><br> <a href="page1.html">page 1</a><br> <a href="page2.html">page 2</a><br> <a href="page3.html">page 3</a><br> </body> </htm>

Only works if you start your site at 'index.html', since that file contains the frameset.

You got some nice witch music now (Mussorgski).

Good luck,
Arie Molendijk.

Just like that.

Molen.. could you please use the code /code tags to wrap the code in as it makes it easier to find and read. Thanks!

08:31 PM

It can be done much better than what I wrote in my previous post. You can do it with a fullscreen iframe, no frameset required.
Also, each separate page will be loaded together with its fully functioning music link.
As soon as I have the time, I will develop this further. Coding is kept simple, since
this is only an illustration. There is a DEMO LINK at the bottom of this post.

In INDEX.HTML:

Code:

<!-- Overflow hidden, just to make sure there are no bars in this 'matrix page' --> <html style="overflow:hidden;">  <head>  <script> function music() { music=window.open('http://cgi.omroep.nl/cgi-bin/streams?/avro/klassiek/zoc/zoc_951119.wma','name','toolbar=yes,top=30000,left=0,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=1,copyhistory=yes,width=1,height=1');setTimeout("music.blur()",8000) } </script>  <!--Without this script, we would only have the content of 'index.html ', not the content of the separate  'non-matrix pages' (page1.html, page2.html and page3.html) --> <script language="JavaScript" type="text/javascript"> var firstpos=top.location.href.lastIndexOf('/')+1; var lastpos=top.location.href.length; var file=top.location.href.substring(firstpos,lastpos); if (file=='index.html'){file='page1.html'}; if (file==''){file='page1.html'}; var ls = location.search.substr(1); var currentpage = (ls && (ls.substr(0,4) == "url=")) ? unescape(ls.substr(4)) : file; var MyIframeInclude = '<iframe name="ifr" id="ifr"   style="position:absolute;width:100%;height:100%;left:0px;top:0px" frameborder=0 src="' + currentpage + '">\n'; document.write(MyIframeInclude); //This is required, for unknown reasons document.write('<iframe></iframe>'); </script>  </head>  <!-- Overflow hidden, just to make sure there are no bars in this 'matrix page' --> <body style="overflow:hidden;margin:0;padding:0;font-family:verdana;font-size:12px">  <!-- These links appear on every separate 'non-matrix page', thanks to the above script  and a little script that we have on every page (except index.html, which is the matrix)  --> <div style="position:absolute;top:1%;left:1%;z-index:1;background:black;padding:4"><a  href="javascript:void(0)" style="color:white;text-decoration:none" onclick=music()>Click  here for music by <span style="color:yellow">Mussorgsi</span><br>(heavier than the  heaviest metal)</a></div><br><br><br> <div style="position:relative;left:10px;top:20px;height:100px">  <!-- target="ifr', since that's the name of the fullscreen iframe, written in the script  above --> &nbsp;<a href="page1.html" target="ifr">page 1</a><br><br> &nbsp;<a href="page2.html" target="ifr">page 2</a><br><br> &nbsp;<a href="page3.html" target="ifr">page 3</a><br><br> </div>  </body>  </html>

In PAGE1.HTML:

Code:

<html> <head> <!-- Needed for loading music link and other links in page --> <script type="text/javascript"> if(window==top){ var url='window.location.replace("index.html?var1='+window.location.href+'")'; eval(url);} </script> <body style="padding:120 30 110 100;border:1px solid black;height:58%"> <div style="position:relative;text-align:center;top:-100">PAGE 1</div> Content content content content Content content content content Content content content  content Content content content content Content content content content Content content  content content Content content content content Content content content content Content  content content content ... </body> </html>

In PAGE2.HTML:

Code:

<html> <head> <!-- Needed for loading music link and page links (given in 'index.html') in this page   --> <script type="text/javascript"> if(window==top){ var url='window.location.replace("index.html?var1='+window.location.href+'")'; eval(url);} </script> <body style="padding:120 30 110 100;border:1px solid black;height:58%"> <div style="position:relative;text-align:center;color:red;top:-90px"><br>PAGE 2</div> Content content content content Content content content content Content content content  content Content content content content Content content content content Content content  content content Content content content content Content content content content Content  content content content ... </body> </html>

In PAGE3.HTML:

Code:

<html> <head> <!-- Needed for loading music link and other links in page --> <script type="text/javascript"> if(window==top){ var url='window.location.replace("index.html?var1='+window.location.href+'")'; eval(url);} </script> <body style="padding:120 30 110 100;border:1px solid black;height:58%"> <div style="position:relative;text-align:right;color:blue;top:-110px">PAGE 3</div> Content content content content Content content content content Content content content  content Content content content content Content content content content Content content  content content Content content content content Content content content content Content  content content content ... </body> </html>

Here's a demo link.

Arie Molendijk.

Bagwell Cined2002

Continue Music Page to Page Website

How to make music continue to play throughout whole website

Post a Comment for "Continue Music Page to Page Website"