How to Keep Audio Playing While Visitors Browse Your Site

How to Keep Audio Playing While Visitors Browse Your Site

Bysite_owner

Musicians, radio stations and podcasters often want a player that keeps going while visitors click around the site. By default this doesn’t happen, and it helps to understand why before choosing a solution.

Why the music stops

When a visitor clicks a normal link, the browser throws away the current page and loads a new one. The <audio> element is part of the old page, so it disappears and playback stops. To keep sound going, the player has to live somewhere that is not replaced on navigation.

Option 1: Load pages without a full reload

Techniques often called “AJAX navigation” or “PJAX” intercept link clicks, fetch the next page in the background and swap only the main content area. The header, footer and player stay in place. Libraries such as Turbo or Swup can do this on ordinary multi-page sites.

Watch out for: scripts that expect a fresh page load, analytics that need manual page-view events and forms that must still work.

Option 2: Build the site as a single-page app

Frameworks such as React, Vue or Svelte with client-side routing never fully reload the page, so a player placed outside the routed content keeps playing. This is the most robust approach, but it is a big change for an existing site.

Option 3: A pop-out player window

A “Listen in a new window” button opens a small separate window that contains only the player. Visitors can browse the main site freely. It is simple and reliable, though some people find extra windows awkward, and pop-up blockers may interfere if the window is not opened from a click.

Option 4: Resume where the visitor left off

If true continuous playback isn’t possible, save the current track and position with localStorage and resume on the next page:

const audio = document.querySelector('audio');
audio.addEventListener('timeupdate', () => {
  localStorage.setItem('audioPos', audio.currentTime);
});
const saved = localStorage.getItem('audioPos');
if (saved) audio.currentTime = parseFloat(saved);

There will be a short gap, and browsers may require a click before playing again, but visitors won’t lose their place.

Using a WordPress plugin

Several WordPress plugins implement one of the techniques above for you. Before installing one, check when it was last updated, whether it is compatible with your current WordPress version and theme, and how it handles your caching plugin.

Which should you choose?

  • Existing WordPress or static site: try AJAX navigation, or a pop-out window for the simplest setup.
  • New project: a single-page app gives you the most control.
  • Low effort: save and resume the playback position.

Similar Posts