Pinned Audio WordPress Theme | CSS-Tricks

I’m afraid I have to start this with a whole backstory, as the journey here is the point, not so much the theme.
A fella wrote to me a while back outlining a situation he was in. His company has a bunch of WordPress sites for public radio, many of which are essentially homes for podcasts. There is one specific bit of functionality he thought would be ideal for them all: to have a “pinned” audio player. Like you could play a podcast, then continue navigating around the site without that podcast stopping.

This is somewhat tricky to pull off in WordPress, because WordPress does full page reloads like any other regular website not doing anything special with link handling or history manipulation. When a page reloads, any audio on the page stops playing. That’s just how the web works.
So how would you pull it off on a WordPress site? Well, you could make it a headless WordPress site and rebuild the entire front-end as a Single Page App. Sounds fun to me, but I’d be hesitant to make that call just for this one thing.
What else could you do? You could find a way to make the page never reload. I remember doing this on a little static site 10 years ago, but that wasn’t a full blown WordPress site and I didn’t even bother updating the URL back then.
What if you did this…
Intercept internal link clicksAjax’d the content from that URLReplaced the content on the page with that new contentI’ll do this in jQuery quick for ya:
$(“a”).on(“click”, () => {
const url = $(this).attr(“href”);
$.get(url + ” main”, (data) => {
$(“main”).html(data);
history.pushState({}, “”, url);
});
});
That’s not far off from being literally functional. You’d wanna watch for a popstate event to deal with the back button, but that’s only a few more lines.
In this hypothetical world, you’d lay out the site like:






So all that
content gets swapped out, the URL changes, but your