mirror of
https://github.com/jeffvli/feishin.git
synced 2026-08-08 13:23:16 +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
|
// 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(() => {
|
useEffect(() => {
|
||||||
// Not standard, just used in chromium-based browsers. See
|
// Not standard, just used in chromium-based browsers. See
|
||||||
// https://developer.chrome.com/blog/audiocontext-setsinkid/.
|
// https://developer.chrome.com/blog/audiocontext-setsinkid/.
|
||||||
|
|||||||
Reference in New Issue
Block a user