If it should remain in the browser (without downloading the application or reading the stream in the music / video player), the only way is not to change the page and load the content, which should be changed using ajax or javascript (or have it in the frame (i)).
But it would be much easier to make a page with only a lecturer and place a link to your site to open it in another tab:
<a href="/music-player.htm" target="musicPlayer">Text or what you want</a>
Edit:
So with javascript this will be the same result as ajax, but that means you are not modifying the page, so for SEO, if this is somewhat important, this is not good.
What I meant by javascript was, for example, if you clicked the link "home", simply adding dynamically <script type="text/javascript" src="/homepage.js"></script> , which modifies the contents of the page (saving mp3 player).
Otherwise, possibly with a cookie, if possible, when the player knows by javascript:
- know that the player has an mp3 file
- while the mp3 player is playing
- go to the specified mp3 file
- go to a specific time in mp3
- (and if you can pause the player, you should be able to find out if the player is playing or not)
It would be possible if the page changed at the right time (but there would be time to load the page and mp3 player without music).
Or there may be an mp3 player that can save the time we're in and start at that time on another page (but still change the page without sound for a few seconds).
Using these methods would have caused the problem of opening multiple pages.
Edit:
I tried using the page content in an iframe, it works pretty well, but membre is required to switch in mp3 mode.
Here is mp3.html (put in the root folder, if this is not possible, it will require 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 opens the current page in an iframe and with an mp3 player, you only need a link:
<a href="javascript:parent.location.href='/mp3.html#'+document.location.href.replace(new RegExp('^'+document.location.origin),'')">add mp3 player</a>
Usage example here .