fix: corriger les bugs du lecteur audio (rendus, effets dupliqués)

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)