CODEWITHSUNDEEP
jqueryhtmlaudioaudio-player
luke
luke

Reputation: 118

Uninterrupted music using popunder or opening site in a new tab

I would have wanted to keep writing on this discussion, but my reputation doesn't allow me to edit or answer (sorry about that): Uninterrupted background music on website

So going quickly to the point:

So bottom line they want music on the site, and they would like to possibly have to not restart at each page load.

I already decided to avoid frames.

I'm struggling in between those ways trying to find the "best" one:

I hate myself, I hate music on websites damn..

Thank you guys I hope you will be spending a tear for me :)

Upvotes: 3

Views: 617

Answers (1)

David Fregoli
David Fregoli

Reputation: 3407

It doesn't seem to be an enourmous amount of work to me to make it work with ajax, and even if it is it would be a nice experience that will make you better at using and understaing the technology used today, instead of toying with hacky bits of code from 10 years ago and copying and pasting some obscure scripts for popunder from the dark side of the web.

All the work you have done up to now is not wasted, in fact that's the principle of progressive enhancement. Make it work for everyone (including seo bots) and then improve it.

Something like this will transform all your anchor tags into ajax requests but they will still fallback to plain page requests otherwise.

$('body').on('click', 'a', function() {
var url = $(this).attr('href');
$.ajax({
    url: url
}).done(function(response) {
    $('body').html(response);
});
return false;
});

you can add a ?ajax=1 to the request url to instruct the backend to return only the body when present.

Obviously all your scripts/css will have to be served on the initial page as the head won't change (unless you want to make everything more comples) and event bindings will need to be triggered or delegated to body.

You'll need a div for your player (with a fixed position maybe) so the code will actually be more like

<head>
    ...
</head>
<body>
   <div id="player></div>
   <div id="wrapper">[page html]</div>
</body>

and you'll target the #wrapper instead of the body.

Upvotes: 1

Related Questions