A Web Audio Preview That Stops When Another Sample Starts

A product page with several sound samples invites a messy moment. Someone presses play on one, then another, and both play at once. This article proposes a simple rule: only one sample is active at a time. The design is conditional. Adjust it to the way your page is built.

The rule

Hold one piece of shared state: the id of the active sample, or none. Every player asks that state before it acts. Starting a sample first stops whatever is active, then makes the new one active.

Single-active-player transition table

States per sample: idle, playing, paused, ended, failed. The active id is empty or points to one sample.

A idle, press play on A, nothing active: A plays. Active is A.
A playing, press play on B: A stops and returns to idle (or paused if you want resume). B plays. Active is B.
A playing, press pause on A: A pauses. Active stays A, so a later play resumes it.
A paused, press play on B: A moves to idle or stays paused by your choice, but A is no longer active. B plays and is active.
A playing, reaches the end: A becomes ended. Active is cleared.
A playing, press play on A again: treat as pause, or restart. Choose one and keep it consistent.
B fails to start: A has already stopped, so show a visible error on B. Active is cleared. Do not leave A silently stopped with no explanation.
Page hides or the visitor navigates away: stop the active sample and clear the state.

Decide in advance whether a displaced sample keeps its position. Resuming at the old point suits long samples. Resetting to the start suits short ones. Whichever you choose, apply it to all players.

Branches

If the browser blocks automatic start, treat that as failed, show the problem on the control that was pressed, and do not change the active id.
If two presses arrive almost together, process them in order. The later press wins.
If a sample has not finished loading when another is pressed, cancel its pending start so it does not begin late and overlap.

Hypothetical worked example

Picture a page with three clips, labelled A, B and C. A visitor presses A, which plays. At ten seconds they press C. The table says A stops and C starts, with active set to C. The A control shows play again, and C shows pause. The visitor then presses pause on C and play on B. C is no longer active, B plays, and only B shows a pause control. If B's file cannot load, B shows a short error, nothing plays, and the active id clears.

Stop conditions

Stop and rethink the design if you find a state where two controls both show playing, if a failed start leaves a stale active id, or if pressing a control produces no visible change. Do not add features such as crossfades until these basics hold.

Acceptance checks

Rapid presses across three samples never produce overlapping sound.
The control labels always match what is audible.
A failed sample shows a message and leaves no clip marked as playing.
Leaving the page or switching tabs stops the active sample.
Keyboard users can start, pause and switch samples, and the focus stays on the control they used.
Someone has stepped through every row of the transition table at least once.