Player recipes for popular plugins

Find your player, copy the selector or markup, and you’re done. Every recipe assumes you’ve read Keep audio or video playing across pages. In particular, the player has to be on every page, and it needs its own positioning once it has moved.

Selectors go in Settings → AjaxPress → Media Players (Pro). With the free plugin, add data-ajaxpress-persist to the player’s markup instead, if you can reach it.

How much to trust each recipe

Status	Meaning
Confirmed	Working on a live site.
Caveats	Working, with a known issue described in the recipe.
Unverified	Worked out from the plugin’s markup, not yet tested on a live site.

Plugin markup changes between versions. Always inspect your own player and check that the selector matches exactly one element:

document.querySelectorAll('#your-selector').length // should be 1

Custom HTML5 player: Confirmed

This covers hand-written players, including ones added with Code Snippets, WPCode, a theme footer widget or a Custom HTML block. It works on the free plugin.

<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" type="button">Play</button>
</div>

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

<script>
  document.getElementById('radio-play').addEventListener('click', function () {
    var audio = document.getElementById('radio-audio');
    if (audio.paused) { audio.play(); this.textContent = 'Pause'; }
    else { audio.pause(); this.textContent = 'Play'; }
  });
</script>

With Code Snippets or WPCode, set the snippet to run in the site footer, on every page, not only on the front page.

MP3 Audio Player by Sonaar: Caveats

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

• Turn on Sonaar’s own sticky player first. A non-sticky Sonaar player sits inside the page content and is replaced on navigation, which no setting can change.
• The markup differs between Sonaar versions. Inspect yours and keep whichever selector matches.

Mediastream: Caveats

#mediastream-player

• Some installs render a different id. Inspect your player to confirm it.
• If you hear doubled audio, the player’s identity is changing between pages. Add data-persist-key to the wrapper if you can reach the markup.

Elementor Audio or Video widget: Unverified

1. Put the widget in a footer template (Templates → Theme Builder → Footer), not on a page.
2. Select the widget, open Advanced, and set CSS ID to my-radio-player.
3. Enter #my-radio-player in Media Players.
4. Give it its own positioning in the widget’s Custom CSS or in AjaxPress Custom CSS. Elementor usually styles widgets through their parent section, and those styles stop applying once the player has moved.

Radio plugins: Unverified

Plugin	Try this selector	Note
Radio Player (MP3, OGG, AAC)	.radio-player-container	Turn on its sticky or fixed mode
Radio Station	A CSS ID you set on the player widget	Persist only the player, not the schedule widgets
StreamCast	.streamcast-player	Use its floating layout
Hero by LambertGroup	The container id you configured	Heavily script-driven; check the console for errors

WaveSurfer: Unverified

#waveform, .wavesurfer-container

WaveSurfer draws the waveform on a canvas sized to its container. If the waveform looks the wrong width after the player has moved, give the container a fixed width in CSS.

Shoutcast or Icecast embed: Unverified

Wrap the embed and mark the wrapper, rather than marking the <iframe> itself. The wrapper also gives you somewhere to put positioning CSS.

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

Any other player

1. Right-click the player and choose Inspect. Walk up to the outermost element that contains every part of the player.
2. Take its id, or a class only it has.
3. Enter that in Media Players (Pro), or add data-ajaxpress-persist to the markup (free).
4. Add a data-persist-key if you can.
5. Give it its own positioning.
6. Test five or more pages, Back and Forward, and a page without the player.

Got an unverified recipe working, or found a selector that’s wrong? Email [email protected] and we’ll update this page.