fix(web-player): unlock AudioContext on first user gesture (#2275)

The web AudioContext is created on mount, so browsers start it in a
suspended state. The existing resume() call in the async player-start
callback fires too late relative to the original click to count as a
user gesture in Chrome, so it silently fails and playback progresses
with no audio output.

Add a one-time pointerdown/keydown listener that resumes the context
on the very first user interaction on the page, synchronously within
the gesture's event handler.

Co-authored-by: Inspiractus01 <Inspiractus01@users.noreply.github.com>
This commit is contained in:
mekomuka
2026-07-27 04:46:08 +02:00
committed by GitHub
parent 052af7c420
commit 2c3c8f518f
@@ -283,6 +283,24 @@ const AudioPlayersContent = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
if (!audioContext?.context) return undefined;
const ctx = audioContext.context;
if (ctx.state === 'running') return undefined;
const unlock = () => {
ctx.resume().catch(() => {});
};
document.addEventListener('pointerdown', unlock, { capture: true, once: true });
document.addEventListener('keydown', unlock, { capture: true, once: true });
return () => {
document.removeEventListener('pointerdown', unlock, { capture: true });
document.removeEventListener('keydown', unlock, { capture: true });
};
}, [audioContext]);
useEffect(() => {
// Not standard, just used in chromium-based browsers. See
// https://developer.chrome.com/blog/audiocontext-setsinkid/.