CODEWITHSUNDEEP
javascriptjqueryiframemp3
Graham
Graham

Reputation: 1473

have <iframe> work asynchronously

Is there a good article or how can have an iframe or frame work asynchronously with every page? I have a bottom/fixed div wrapped in jquery to slide up on hover containing an mp3 player. I referenced the player with an iframe. I renderes fine, but how can it keep playing without a reload on page refresh or navigation to another page? I want it to be fixed at the bottom of every page and play continuously without refresh. I tried putting the iframe in each page, but that still didn't work. Any ideas? Thank you.

Upvotes: 6

Views: 2007

Answers (2)

Enki
Enki

Reputation: 573

If it must stay in the browser ( not downloading an application or read stream in a music/video player ), the only way should be to don't really change page, and load content that must change with ajax or javascript ( or have it itself in a (i)frame ).

But it would be a lot easier to do a page with only the lector and put a link on your website to open it in another tab :

<a href="/music-player.htm" target="musicPlayer">Text or what you want</a>

Edit :

So with javascript it would be the same result than ajax, but that means not changing page so for the SEO if it's somewhat important it's not good.

What I meant by javascript was for example if you click on link "home" just adding dynamically a <script type="text/javascript" src="/homepage.js"></script> wich modify content of the page ( while keeping the mp3 player ).

Otherway, maybe with a cookie if it's possible with the player to know by javascript :

  • at know to wich mp3 file the player is
  • at wich time in the mp3 playing the player is
  • to go at a specified mp3 file
  • to go at a specified time in an mp3
  • (and if it is possible to pause the player, there should to be the ability to know if the player is playing or not )

It would be possible when changing page to get at the good time ( but there will be the time to load the page and mp3 player without music ).

Or there could be mp3 player which can save a the time at wich we are, and begin at this time on another page ( but still while changing page no sound for several seconds ).

With these methods there would be too the issue of opening several pages.

Edit :

I tried the way with the content of the page in iframe, it works rather well but needs the membre to switch in the mp3 mode.

Here is mp3.html ( to put in root folder, if it's not possible it would need some changes ) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>MP3 Player</title>
  <style type="text/css">
        html { 
        font-size: 100%; 
        } 
        body { 
            margin: 0; 
            padding: 0em;
        }
        #frame { width: 100%; height: 100%; border: none; }
        #player { position: absolute; right: 20px; bottom: 20px; }
    </style>
    <script type="text/javascript">
        if ("onhashchange" in window) {
            var h='';
            var command= false;
        window.onhashchange = function(){
                if(location.hash==h) return;
                command= true;
                window.frames['frame'].location.replace(location.hash.replace(/^#/,""));
                h= window.location.hash;
            }
        }
    </script>
</head>
<body>
    <iframe id="frame" onLoad="if(this.src=='')return;if(command)command=!1;else window.location.replace(h='#'+window.frames['frame'].location.href.replace(new RegExp('^'+document.location.origin),''));document.title=window.frames['frame'].document.title;"></iframe>
    <script type="text/javascript">
        document.getElementById("frame").src=document.location.hash.replace(/^#/,"");
    </script>
    <div id="player">
        <object type="application/x-shockwave-flash" data="http://s301826463.onlinehome.fr/so/dewplayer.swf?mp3=http://s301826463.onlinehome.fr/so/Tokyo.mp3" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent"><param name="movie" value="http://s301826463.onlinehome.fr/so/dewplayer.swf?mp3=http://s301826463.onlinehome.fr/so/Tokyo.mp3"></object>
        <a href="javascript:document.location.href=document.location.hash.replace(/^#/,'')">remove mp3 player</a>
    </div>  
</body>
</html>

And to put a link that open the current page in an iframe and with an mp3 player, it only needs a link :

<a href="javascript:parent.location.href='/mp3.html#'+document.location.href.replace(new RegExp('^'+document.location.origin),'')">add mp3 player</a>

An example using that here.

Upvotes: 2

Itay Moav -Malimovka
Itay Moav -Malimovka

Reputation: 53607

Either you have an independent Flash/Java/Unity etc player outside the browser window.
Or, You use frames, two frames, one where the main site pages appear, and one where the player resides.
Other way is making the entire navigation in your site (where you want the player to be continuous) using async calls (Ajax).

Google b.t.w uses iframes/frames

Upvotes: 1

Related Questions