Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: How to make music continue to play throughout whole website

  1. #1
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to make music continue to play throughout whole 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?

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    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

  3. #3
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:
    Last edited by sam29; 11-30-2007 at 11:38 PM.

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

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

  5. #5
    Join Date
    Nov 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    AGR

  6. #6
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  7. #7
    Join Date
    Nov 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    <frameset><frame src="#" border="0" align="right valign="top"></frameset>

    Or something similiar?

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    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.
    Last edited by molendijk; 12-02-2007 at 05:31 PM.

  9. #9
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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!
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  10. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    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.
    Last edited by molendijk; 12-02-2007 at 08:31 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •