Beatport like Audioplayer, need help!

[HelgeMattig]

Inspired by beatport.com i built an audio player with waveform illustration using wavesurfer-js.org
Check it out here: http://gearscript.de/wavesurfer
Just click "Load into Player" and surf the website for a bit, it pretty much explains itself.

The Problem:

My cms works like this

site1.php
site2.php
site3.php
global.php (included in all siteX.php, contains site header and other global code)

The Problem is, if the user jumps from site1.php to site2.php i do not want the player to interrupt but keep playing the music. Just like on beatport.
In my example i did that by using an iframe.
But i cant use an iframe in my cms application because i want the player to interact with the cms and its just a lousy solution overall.
I do not want to use a popup also because that would negatively impact the "user experience".

So what do i do?
I never did something like this before and i just dont know what to do.

 

Edited August 24, 2021 by HelgeMattig

[requinix]

There might be some fancy Javascript method, but barring that, you need to have some part of the page that does not change when clicking on links or whatever.

For the most part, websites nowadays solve that with the majority of the site served through a Javascript frontend - rather than browsing to site1.php and site2.php and whatever like normal, the browser is told to request those files in the background and then Javascript places it into the page. It looks like regular navigation, to some degree, but the browser never actually "leaves" the first page.

Frames can still work, though. There is a way to communicate between the different frames: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage