# Player recipes for popular plugins

> Ready-to-use selectors and markup for custom HTML5 players, Sonaar, Mediastream, Elementor, radio plugins, WaveSurfer and Shoutcast or Icecast embeds.

Source: https://arraystory.com/docs/ajaxpress/player-setup-recipes-for-specific-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](https://arraystory.com/docs/ajaxpress/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:

```js
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.

```html
<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

```text
.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

```text
#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

```text
#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.

```html
<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 [support@arraystory.com](mailto:support@arraystory.com) and we'll update this page.