Web Audio Preview Resets After Switching? Check Stale ended Events

Preview B is audible, but the control has already switched back to Play. An ended event can follow a scheduled stop or ordinary playback completion. The application needs the identity of the source that stopped before updating shared controls.

Make the handoff visible in the log

Assign A and B different playback tokens. Log the switch request, the old source stop and both callbacks. Make B current before stopping A. A can release its own resources when its callback arrives, but it should update the controls only if its token is still current.

Test cancellation and queue progression

If natural completion advances a playlist, mark a user stop or replacement before stopping the source. Run natural completion, an explicit stop and a rapid A–B–A sequence. Confirm that each old callback leaves the current source reference and queue position intact.

See the official reference and related diagnostic guide. Use SFX Generator to review or prepare assets, then validate runtime behavior in your own project.

Turn the race into three repeatable checks

1. Let A play to completion. Record its token, stop reason and queue index. Expect one UI transition and one queue advance if the product advances on completion.
2. Stop A with the control. Mark that playback as cancelled before calling stop. Expect the control to become available and the queue index to stay put.
3. Switch A → B → A rapidly. Assign a fresh token to each play, for example 41, 42 and 43. The two A plays share a file but have different identities. Delay the handler for 41 in your test harness. Expect token 43 to remain current when the delayed handler runs.

Keep node cleanup separate from shared state

Capture the node and token when you register its listener. The handler can disconnect its own node. Check the token before clearing the current reference, changing the control or advancing the queue. A trace like “ended, 41, replaced, current 43” should only clean up node 41. If switching requires async decoding, check the request identity again after decoding and before starting a new node. Otherwise an older load can start after the latest selection.

For each check, record the visible control state, the current node reference and the queue index. Confirm all three against the intended behavior so a correct-looking control does not hide a stale reference.