The Audio Player

Pro replaces the free plugin’s basic player with its own player markup while reusing the free plugin’s audio-reading logic, so there is exactly one player on the product page. The player is a standard HTML audio element enhanced with custom controls in JavaScript, and it falls back to the browser’s native controls if the script does not load.

Controls

• Play and pause button with a loading state.
• Time display showing current position and total length (for example 0:00 / 0:00). Controlled by the Show Time Display setting.
• Playback speed button that cycles the speed up to 2x. It is always shown.
• Volume slider with a mute toggle. Shown only when Volume Control is on, and it opens at the Default Volume set on the Player tab.
• A progress bar, or a waveform when the waveform option is on.

Waveform

When Show Waveform is on, the player draws a WaveSurfer.js (v7.8.8) waveform instead of the plain progress bar, and WaveSurfer is loaded only on pages where the waveform is used. When the option is off, the plain progress bar is used and WaveSurfer is not loaded.

Playback behaviour

These come from the Player and Advanced tabs and are applied to the audio element:

• Autoplay starts the track on load (muted, because browsers block unmuted autoplay).
• Loop restarts the track when it ends.
• Preload Strategy sets how much the browser loads up front (none, metadata, or full file).
• Lazy Loading defers loading a preview until the shopper scrolls it into view. When lazy loading is on it takes precedence over Preload Strategy.

Player width and title

• Player Width accepts a CSS value such as 100% or 500px.
• Player Title sets the heading shown above the player. The heading appears whenever a title is set, and also on products with more than one track.

Responsiveness and RTL

The player is responsive and ships a right-to-left stylesheet that loads automatically on RTL sites.