mirror of
https://github.com/jeffvli/feishin.git
synced 2026-08-07 21:03:27 +02:00
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:
@@ -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/.
|
||||
|
||||
Reference in New Issue
Block a user