65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
|
// useBeep.ts
|
|||
|
|
import { useEffect, useRef } from "react";
|
|||
|
|
import { useSoundEnabled } from "react-sounds"; // so it respects your SoundBtn toggle
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Plays a sound whenever `latestRef` changes.
|
|||
|
|
*
|
|||
|
|
* @param src Path to the sound file
|
|||
|
|
* @param latestRef The primitive value to watch (e.g. sighting.ref)
|
|||
|
|
* @param opts volume: 0..1, enabledOverride: force enable/disable, minGapMs: throttle interval
|
|||
|
|
*/
|
|||
|
|
export function useBeep(
|
|||
|
|
src: string,
|
|||
|
|
latestRef: number | null,
|
|||
|
|
opts?: { volume?: number; enabledOverride?: boolean; minGapMs?: number }
|
|||
|
|
) {
|
|||
|
|
const audioRef = useRef<HTMLAudioElement>(undefined);
|
|||
|
|
const prevRef = useRef<number | null>(null);
|
|||
|
|
const lastPlay = useRef(0);
|
|||
|
|
const [enabled] = useSoundEnabled();
|
|||
|
|
|
|||
|
|
const minGap = opts?.minGapMs ?? 250; // don’t play more than 4 times/sec
|
|||
|
|
|
|||
|
|
// Create the audio element once
|
|||
|
|
useEffect(() => {
|
|||
|
|
const a = new Audio(src);
|
|||
|
|
a.preload = "auto";
|
|||
|
|
if (opts?.volume !== undefined) a.volume = opts.volume;
|
|||
|
|
audioRef.current = a;
|
|||
|
|
return () => {
|
|||
|
|
a.pause();
|
|||
|
|
};
|
|||
|
|
}, [src, opts?.volume]);
|
|||
|
|
|
|||
|
|
// Watch for ref changes
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (latestRef == null) return;
|
|||
|
|
|
|||
|
|
const canPlay =
|
|||
|
|
(opts?.enabledOverride ?? enabled) &&
|
|||
|
|
document.visibilityState === "visible";
|
|||
|
|
if (!canPlay) {
|
|||
|
|
prevRef.current = latestRef; // consume the change
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (prevRef.current !== null && latestRef !== prevRef.current) {
|
|||
|
|
const now = Date.now();
|
|||
|
|
if (now - lastPlay.current >= minGap) {
|
|||
|
|
const a = audioRef.current;
|
|||
|
|
if (a) {
|
|||
|
|
try {
|
|||
|
|
a.currentTime = 0; // restart from beginning
|
|||
|
|
void a.play(); // fire and forget
|
|||
|
|
lastPlay.current = now;
|
|||
|
|
} catch (err) {
|
|||
|
|
console.warn("Audio play failed:", err);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
prevRef.current = latestRef;
|
|||
|
|
}, [latestRef, enabled, opts?.enabledOverride, minGap]);
|
|||
|
|
}
|