diff --git a/components/teks/lekte.js b/components/teks/lekte.js index c17ebc4..fce23b4 100644 --- a/components/teks/lekte.js +++ b/components/teks/lekte.js @@ -75,9 +75,12 @@ const TinyText = styled(Typography)({ }) export default function Lekte({audio, url, parole}) { - const audioRef = useRef(createAudio(audio)) + const audioRef = useRef(null) + if (audioRef.current === null) { + audioRef.current = createAudio(audio) + } + const intervalRef = useRef() - const isReady = useRef(false) const [duration, setDuration] = useState(0) const theme = useTheme() const {mode} = useColorScheme() @@ -104,25 +107,9 @@ export default function Lekte({audio, url, parole}) { clearInterval(intervalRef.current) intervalRef.current = setInterval(() => { setPosition(Math.round(audioRef.current.currentTime)) - }, [1000]) + }, 1000) } - useEffect(() => { - if (isReady.current) { - audioRef.current.play() - setIsPlaying(true) - startTimer() - } - }, []) - - useEffect(() => { - if (isPlaying) { - audioRef.current.play() - } else { - audioRef.current.pause() - } - }, [isPlaying]) - useEffect(() => () => { audioRef.current.pause() @@ -132,7 +119,7 @@ export default function Lekte({audio, url, parole}) { useEffect(() => { if (isPlaying) { - audioRef.current.play() + audioRef.current.play().catch(() => {}) startTimer() } else { clearInterval(intervalRef.current)