hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-18 09:24:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: prevent multiple simultaneous sound plays

Browse source
This commit is contained in:
CHaBou 2025-10-18 14:50:11 +02:00
parent a071ba04c7
commit 4445a01e6b
1 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/hooks/use-sound.ts
View file

@ -30,6 +30,7 @@ export function useSound(
html5: boolean = false, html5: boolean = false,
) { ) {
const [hasLoaded, setHasLoaded] = useState(false); const [hasLoaded, setHasLoaded] = useState(false);
const [isPlaying, setIsPlaying] = useState(false);
const isLoading = useLoadingStore(state => state.loaders[src]); const isLoading = useLoadingStore(state => state.loaders[src]);
const setIsLoading = useLoadingStore(state => state.set); const setIsLoading = useLoadingStore(state => state.set);
@ -40,6 +41,11 @@ export function useSound(
if (isBrowser) { if (isBrowser) {
sound = new Howl({ sound = new Howl({
html5, html5,
onend: () => {
if (!options.loop) {
setIsPlaying(false);
}
},
onload: () => { onload: () => {
setIsLoading(src, false); setIsLoading(src, false);
setHasLoaded(true); setHasLoaded(true);
@ -50,7 +56,7 @@ export function useSound(
} }
return sound; return sound;
}, [src, isBrowser, setIsLoading, html5, options.preload]); }, [src, isBrowser, setIsLoading, html5, options.preload, options.loop]);
useEffect(() => { useEffect(() => {
if (sound) { if (sound) {
@ -70,22 +76,25 @@ export function useSound(
sound.load(); sound.load();
} }
if (!sound.playing()) { if (!isPlaying) {
setIsPlaying(true);
sound.play(); sound.play();
} }
if (typeof cb === 'function') sound.once('end', cb); if (typeof cb === 'function') sound.once('end', cb);
} }
}, },
[src, setIsLoading, sound, hasLoaded, isLoading], [src, setIsLoading, sound, hasLoaded, isLoading, isPlaying],
); );
const stop = useCallback(() => { const stop = useCallback(() => {
if (sound) sound.stop(); setIsPlaying(false);
sound?.stop();
}, [sound]); }, [sound]);
const pause = useCallback(() => { const pause = useCallback(() => {
if (sound) sound.pause(); setIsPlaying(false);
sound?.pause();
}, [sound]); }, [sound]);
const fadeOut = useCallback( const fadeOut = useCallback(