Keep audio or video playing across pages

On a normal WordPress site a click reloads the page, and the player stops. With AjaxPress, a player you mark as persistent keeps playing on every page, with no gap and no restart. This page shows how to set one up.

Before you start: the player must be on every page

AjaxPress keeps a player alive by carrying it from one page to the next. So the player has to be part of every page where it should keep playing, usually in the header, the footer, or a site-wide widget area.

A player placed inside the content of a single page can’t persist, because that content is exactly what changes when the visitor moves on. Most radio and audio plugins have a sticky or floating mode that puts the player on every page. Use it.

Step 1: mark the player

Pick whichever route fits your site.

Your situation	What to do	Plan
You can edit the player’s HTML (a custom player, a Custom HTML block, a snippet, a theme file)	Add a marker to its markup	Free
A theme or plugin prints the player and you can’t edit it	Turn on Auto-detect Media Players, or name it with a CSS selector on the Media Players screen	Pro
Not sure whether your player is kept?	Run Check my player on the Media Players screen	Free

Free: add a marker to the markup

Add any one of these to the element that wraps the whole player. They all do the same thing.

<div id="radio-bar" data-ajaxpress-persist>…</div>

<div id="radio-bar" class="ajaxpress-persist">…</div>

<div id="persistent-radio">…</div>   <!-- any id starting with persistent- -->

<audio data-persist src="…"></audio> <!-- on an audio or video tag -->

Pro: pick the player with a CSS selector

Go to Settings → AjaxPress → Media Players and enter a CSS selector for the player’s outer element, such as #mediastream-player. Media Players shows how to find the right selector and check it, and the player recipes list selectors for popular player plugins.

Step 2: give the player a stable identity

On every page, AjaxPress has to recognise the player as the same player that is already playing. It works out an identity in this order:

#	Where the identity comes from	How reliable
1	A data-persist-key attribute	Best: you choose it
2	The element’s id	Good, if it’s the same on every page
3	The src of an iframe, audio or video inside it	Breaks if the URL changes from page to page
4	The element’s own src, for an audio or video tag	Same caveat
5	A fingerprint of the element’s opening HTML	Last resort

If you can edit the markup, add a fixed key:

<div id="radio-bar" data-ajaxpress-persist data-persist-key="live-radio">…</div>

Why this matters: some players add a changing value to the stream URL (for example ?t=1736301234) to avoid caching. Then every page has a “new” player, and you hear two streams at once. A fixed data-persist-key prevents that.

Step 3: let the player position itself

To survive navigation, the player is moved out of the page into a container that AjaxPress keeps on screen. It leaves its old parent, so it has to position itself, and CSS that reached it through a parent (such as .site-footer .radio-player) stops applying. Usually a few lines of CSS fix it:

#radio-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

Position and style a persistent player covers this in detail, including mobile layouts and making room for the player.

Step 4: test it

1. Open your site in a private window and start the player.
2. Click through five or more pages, including one or two with forms.
3. Press Back and Forward a few times.
4. Visit a page without the player, if you have one. The player should stop there.

The sound should never cut out, the controls should keep working, and you should never hear two streams at once.

How it works

Knowing this helps when something doesn’t behave:

• AjaxPress looks for the built-in markers, plus your Media Players selectors, on every page.
• The first time it finds a player, it moves that exact element (not a copy) into #ajaxpress-persist. Because the live element moves, its playback, its event listeners and any player iframe inside it keep running.
• On each later page, that page’s own copy of the player is removed, since the one already playing is the real one.
• On a page without the player, the playing one is stopped and removed.
• Moving between your site and wp-admin is always a normal page load, so a player never follows you into the dashboard.

Watch it step by step

Checklist

• The player is on every page, not only one.
• The outer wrapper is marked, not the <audio> tag.
• It has a data-persist-key, or an id that’s the same on every page.
• It positions itself with its own CSS.
• A selector in Media Players matches exactly one element.
• You tested five or more pages, Back and Forward, and a page without the player.

Playing a video or a live stream embed rather than audio? See Keep a video or live stream embed playing.

Still stuck? Work through My player stopped working.