Player Setup Recipes for Specific Plugins

Find your player, copy the selector, done. Read Keep Audio or Video Playing Across Pages first — every recipe here assumes you have handled the positioning change described there.

Status key

Status	Meaning
Confirmed	A user has this working in production.
Caveats	Working, but with a known issue. Read the notes.
Unverified	Selector derived from the plugin’s markup, not tested on a live install.

We would rather mark something unverified than have you trust a selector nobody has run.

Custom HTML5 player — Confirmed

Hand-written players, and the ones generated with ChatGPT and added through Code Snippets, WPCode, a theme footer widget or a Custom HTML block. Free — no Pro licence needed.

<div id="radio-bar"
     data-ajaxpress-persist
     data-persist-key="live-radio">
  <audio id="radio-audio" src="https://stream.example.com/live" preload="none"></audio>
  <button id="radio-play">Play</button>
</div>

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

If using Code Snippets or WPCode, set the snippet to run in the site footer on every page, not just the front page.

Mediastream — Caveats

#mediastream-player

Confirm the real id by inspecting your own player — some installs render a different one. Add data-persist-key to the wrapper if you can reach the markup.

• Known: player renders only after a second click on some setups.
• Known: doubled audio — an identity problem, fixed with data-persist-key.

MP3 Audio Player by Sonaar — Caveats

.sonaar-sticky-player, #sonaar-sticky-player

Markup varies by version — inspect and keep whichever matches.

Enable the sticky player in Sonaar’s own settings first. Non-sticky Sonaar players sit inside post content and are replaced on navigation by design; no AjaxPress setting can change that.

Elementor Audio / Video widget — Unverified

1. Add the widget to a footer template (Templates → Theme Builder), not a page.
2. Select it, open Advanced → CSS ID, set my-radio-player.
3. Use #my-radio-player in Media Players.

Watch for: Elementor widgets are usually styled through their parent section. Once lifted, those styles stop applying.

Radio plugins — Unverified

Plugin	Try	Note
Radio Player (MP3/OGG/AAC)	.radio-player-container	Enable sticky/fixed mode
Radio Station	CSS ID on the player widget	Persist only the player, not the schedule widgets
StreamCast	.streamcast-player	Use the floating layout
Hero by LambertGroup	Your configured container id	Heavily JS-driven; check the console

WaveSurfer — Unverified

#waveform, .wavesurfer-container

WaveSurfer draws into a <canvas> sized to its container, so moving it can leave the waveform at the wrong width:

document.addEventListener('ajaxpress:ready', () => {
  if (window.wavesurfer) window.wavesurfer.drawBuffer();
});

Shoutcast / Icecast embeds — Unverified

<div data-ajaxpress-persist data-persist-key="shoutcast">
  <iframe src="https://stream.example.com:8000/player"></iframe>
</div>

Use a wrapper rather than marking the <iframe> directly — it gives you somewhere to put positioning CSS.

Any other player

1. Right-click the player → Inspect. Walk up to the outermost element containing every part of the player.
2. Take its id, or a class that appears exactly once.
3. Add it to Media Players (Pro), or add data-ajaxpress-persist to the markup (free).
4. Add a data-persist-key.
5. Give it self-contained positioning.
6. Test across 5+ pages, Back button, and a page with no player.

Every “Unverified” entry is a plugin we have not tested on a live install. If you get one working — or find our selector is wrong — email [email protected] and we will update this page and credit you.