fix

src/pages/index.tsx

@@ -179,21 +179,6 @@ export default function HomePage() {
       setcurrentTime(audio.currentTime)
     })
 
-    audio.addEventListener('ended', () => {
-      setisPlay(false)
-      console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, listIndex)
-      if(playMode === 0){
-        if(listIndex < musicList.length - 1){
-          setlistIndex(listIndex + 1)
-        }else{
-          setlistIndex(0)
-        }
-        videoRef.current.currentTime = 0
-      }else if(playMode === 1){
-        videoRef.current.currentTime = 0
-      }
-    })
-
     audio.addEventListener('pause', () => {
       setcurrentTime(audio.currentTime)
     })
@@ -258,34 +243,38 @@ export default function HomePage() {
             })
           })
         }
-  
-        
       })
     }
-    
   }, [listIndex])
 
-  
+  useEffect(() => {
+    const audio = videoRef.current
+    if (audio) {
+      audio.addEventListener('ended', endedHandle);
+    }
+
+    return () => {
+      if (audio) {
+        audio.removeEventListener('ended', endedHandle);
+      }
+    };
+  }, [listIndex, playMode])
   
   const timeupdateHandle = () => {
     setcurrentTime(videoRef.current.currentTime)
   }
   
   const endedHandle = () => {
-    // setisPlay(false)
-    console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, typeof playMode)
-    // debugger
-    if (playMode === 0) {
-      if(listIndex < musicList.length - 1){
-        setlistIndex(listIndex + 1)
-      }else{
-        setlistIndex(0)
+    console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, listIndex)
+      if(playMode === 0){
+        setisPlay(false)
+        if(listIndex < musicList.length - 1){
+          setlistIndex(listIndex + 1)
+        }else{
+          setlistIndex(0)
+        }
+        videoRef.current.currentTime = 0
       }
-      audioAddEvent()
-    } else if (playMode === 1) {
-      videoRef.current.currentTime = 0
-      videoRef.current.play()
-    }
   }
   
   const playHandle = () => {
@@ -351,7 +340,7 @@ export default function HomePage() {
           />
         </ConfigProvider>
         
-        <audio ref={videoRef}></audio>
+        <audio ref={videoRef} loop={!!playMode}></audio>
         
         <div className='audio_progress_time_bar'>
           <div 
@@ -371,7 +360,7 @@ export default function HomePage() {
           <img
             className='audio_operate_btn0'
             src={playMode === 0 ? 'https://oss.jm-kid.com/wx_5colorflower/assets/listPlay.png' : 'https://oss.jm-kid.com/wx_5colorflower/assets/cyclePlay.png'}
-            onClick={() => setplayMode(playMode ? 0 : 1)}
+            onClick={() => setplayMode(m => m ? 0 : 1)}
           ></img>
           <img 
             className='audio_operate_btn0'