김장현
2 years ago
4 changed files with 71 additions and 5 deletions
Binary file not shown.
@ -0,0 +1,24 @@ |
|||||||
|
import { useMemo, useEffect, useState } from 'react'; |
||||||
|
|
||||||
|
const useAudio = url => { |
||||||
|
const audio = useMemo(() => new Audio(url), []); |
||||||
|
const [playing, setPlaying] = useState(false); |
||||||
|
|
||||||
|
const toggle = val => setPlaying(val); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (playing) audio.loop = true; |
||||||
|
playing ? audio.play() : audio.pause(); |
||||||
|
}, [playing]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
audio.addEventListener('ended', () => setPlaying(false)); |
||||||
|
return () => { |
||||||
|
audio.removeEventListener('ended', () => setPlaying(false)); |
||||||
|
}; |
||||||
|
}, []); |
||||||
|
|
||||||
|
return [playing, toggle]; |
||||||
|
}; |
||||||
|
|
||||||
|
export default useAudio; |
Loading…
Reference in new issue