fix: allow audio to play in background on iOS (#58)

This commit is contained in:
anish 2025-08-22 08:13:44 +01:00
parent a071ba04c7
commit 2df0848fc8
2 changed files with 19 additions and 2 deletions

View file

@ -14,6 +14,7 @@ import styles from './sound.module.css';
import type { Sound as SoundType } from '@/data/types'; import type { Sound as SoundType } from '@/data/types';
import { useKeyboardButton } from '@/hooks/use-keyboard-button'; import { useKeyboardButton } from '@/hooks/use-keyboard-button';
import { BrowserDetect } from '@/helpers/browser-detect';
interface SoundProps extends SoundType { interface SoundProps extends SoundType {
functional: boolean; functional: boolean;
@ -43,7 +44,12 @@ export const Sound = forwardRef<HTMLDivElement, SoundProps>(function Sound(
const isLoading = useLoadingStore(state => state.loaders[src]); const isLoading = useLoadingStore(state => state.loaders[src]);
const sound = useSound(src, { loop: true, volume: adjustedVolume }); const sound = useSound(
src,
{ loop: true, volume: adjustedVolume },
BrowserDetect.isIOS()
);
useEffect(() => { useEffect(() => {
if (locked) return; if (locked) return;

View file

@ -1,5 +1,6 @@
export class BrowserDetect { export class BrowserDetect {
private static _isSafari: boolean | undefined; private static _isSafari: boolean | undefined;
private static _isIOS: boolean | undefined;
public static isSafari(): boolean { public static isSafari(): boolean {
if (typeof BrowserDetect._isSafari !== 'undefined') { if (typeof BrowserDetect._isSafari !== 'undefined') {
@ -13,4 +14,14 @@ export class BrowserDetect {
return BrowserDetect._isSafari; return BrowserDetect._isSafari;
} }
/** True on iPhone/iPad/iPod (covers iPadOS-on-Mac UA quirk). */
public static isIOS(): boolean {
if (typeof BrowserDetect._isIOS !== 'undefined') return BrowserDetect._isIOS;
if (typeof navigator === 'undefined') return false;
const ua = navigator.userAgent || '';
const touchMac = /\bMacintosh\b/.test(ua) && 'ontouchend' in (window as any);
BrowserDetect._isIOS = /\b(iPad|iPhone|iPod)\b/i.test(ua) || touchMac;
return BrowserDetect._isIOS;
}
} }