diff --git a/src/components/player.tsx b/src/components/player.tsx index 469b302..807c23c 100644 --- a/src/components/player.tsx +++ b/src/components/player.tsx @@ -54,6 +54,11 @@ export function APlayer({ const audioControl = useAudioControl({ initialVolume: volume, + onError() { + if (playlist.hasNextSong) { + playlist.next() + } + }, onEnded() { if (playlist.hasNextSong) { playlist.next() diff --git a/src/hooks/useAudioControl.ts b/src/hooks/useAudioControl.ts index d0d25df..233df2b 100644 --- a/src/hooks/useAudioControl.ts +++ b/src/hooks/useAudioControl.ts @@ -20,6 +20,7 @@ function useCreateAudioElement( | "onEnded" | "onWaiting" | "onCanPlay" + | "onError" >, ) { const audioElementRef = useRef() @@ -55,6 +56,18 @@ function useCreateAudioElement( } }, [options?.onWaiting]) + useEffect(() => { + const audio = audioElementRef.current + + if (audio && options?.onError) { + audio.addEventListener("error", options.onError) + + return () => { + audio.removeEventListener("error", options.onError) + } + } + }, [options?.onError]) + useEffect(() => { const audio = audioElementRef.current @@ -100,7 +113,7 @@ type UseAudioControlOptions = CreateAudioElementOptions & React.AudioHTMLAttributes, HTMLAudioElement >, - "onEnded" + "onEnded" | "onError" > export function useAudioControl(options: UseAudioControlOptions) { @@ -133,6 +146,7 @@ export function useAudioControl(options: UseAudioControlOptions) { onCanPlay() { setLoading(false) }, + onError: options.onError, onEnded: options.onEnded, }) const [isLoading, setLoading] = useState(false)