1.在音乐播放结束时，更新暂停按钮状态。

src/App.js

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Routes, Route, Navigate, useNavigate } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 import { setAccessToken, setUserInfo, setSelectInfo } from "./business/userSlice.js"
@@ -11,21 +12,24 @@ function App() {
   const navigate = useNavigate();
   const [cookies, setCookie, removeCookie] = useCookies(['accessToken']);
 
-  if (cookies.accessToken) {
-    dispatch(setAccessToken(cookies.accessToken));
-    yzs.get_user_info(yzs.uniqueDeviceIdentifier(), cookies.accessToken).then(info => {
-      dispatch(setUserInfo(info));
-      yzs.user_select(yzs.uniqueDeviceIdentifier(), cookies.accessToken).then(info => {
-        dispatch(setSelectInfo(info));
+  useEffect(() => {
+    if (cookies.accessToken) {
+      dispatch(setAccessToken(cookies.accessToken));
+      yzs.get_user_info(yzs.uniqueDeviceIdentifier(), cookies.accessToken).then(info => {
+        dispatch(setUserInfo(info));
+        yzs.user_select(yzs.uniqueDeviceIdentifier(), cookies.accessToken).then(info => {
+          dispatch(setSelectInfo(info));
+        });
+      }).catch(error => {
+        console.log(error)
+        if (error.returnCode === "uc_0106") {
+          removeCookie("accessToken");
+          navigate("/login");
+        }
       });
-    }).catch(error => {
-      console.log(error)
-      if (error.returnCode === "uc_0106") {
-        removeCookie("accessToken");
-        navigate("/login");
-      }
-    });
-  }
+    }
+  }, []);
+
   return (
     <div>
       <Routes>

src/MainPage.js

@@ -108,7 +108,7 @@ export default function () {
         }).catch(error => {
             console.log("get list failed", error);
         });
-    }, [accessToken, passportId]);
+    }, [passportId]);
 
     const onClick = () => {
         setOpen(!open);

src/PlayerBar.js

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import pauseIcon from "./assets/play.png";
 import playIcon from "./assets/pause.png";
 import downloadIcon from "./assets/download.png";
-import { setCurrentTime, togglePauseState, setCurrentWaveData } from "./business/recorderSlice.js"
+import { setCurrentTime, setPauseState, togglePauseState, setCurrentWaveData } from "./business/recorderSlice.js"
 import { audioWaveData } from "./business/utilities"
 import ProgressBar from "./components/ProgressBar";
 
@@ -32,6 +32,7 @@ export default function ({ width, currentTime }) {
     }, [currentBlob]);
 
     useEffect(() => {
+        if (currentBlob.length <= 0) return;
         audioWaveData(currentBlob, (duration > 20 * 60) ? 200 : 100)
             .then(data => dispatch(setCurrentWaveData(data)));
     }, [duration]);
@@ -68,6 +69,10 @@ export default function ({ width, currentTime }) {
         player.current.playbackRate = event.target.value;
     };
 
+    const onEnded = (event) => {
+        dispatch(setPauseState(true));
+    };
+
     return <Stack sx={{
         position: "sticky",
         top: 48,
@@ -94,7 +99,9 @@ export default function ({ width, currentTime }) {
                 <img src={pause ? pauseIcon : playIcon} />
             </IconButton>
 
-            <audio ref={player} src={currentBlob} onDurationChange={onDurationChange} onTimeUpdate={onTimeUpdate} />
+            <audio ref={player} src={currentBlob} onDurationChange={onDurationChange}
+                onTimeUpdate={onTimeUpdate}
+                onEnded={onEnded} />
             <ProgressBar width={isNaN(width) ? 0 : (width - 70 - 90)} duration={Math.ceil(duration * 1000)}
                 currentTime={currentTime} playing={!pause} seek={seekRecord}
                 waveData={currentWaveData}

src/business/recorderSlice.js

@@ -34,10 +34,13 @@ export const recorderSlice = createSlice({
         togglePauseState: (state) => {
             state.pause = !state.pause;
         },
+        setPauseState: (state, action) => {
+            state.pause = action.payload;
+        }
     }
 })
 
 // Action creators are generated for each case reducer function
-export const { setCurrentIndex, setList, setCurrentLyric, setCurrentBlob, togglePauseState, setCurrentTime, setCurrentWaveData } = recorderSlice.actions
+export const { setCurrentIndex, setList, setCurrentLyric, setCurrentBlob, togglePauseState, setPauseState, setCurrentTime, setCurrentWaveData } = recorderSlice.actions
 
 export default recorderSlice.reducer