1.分离波形采样点代码。

public/index.html

@@ -9,12 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/manifest.json

@@ -1,20 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

src/MainPage.js

@@ -44,23 +44,6 @@ function fetchRecord(accessToken, record) {
     });
     yzs.download(accessToken, record.audioUrl).then(blob => {
         store.dispatch(setCurrentBlob(URL.createObjectURL(blob)));
-        blob.arrayBuffer().then(arrayBuffer => {
-            let context = new (window.AudioContext || window.webkitAudioContext)();
-            context.decodeAudioData(arrayBuffer).then(audioBuffer => {
-                let interval = audioBuffer.sampleRate / 1000 * 100;
-                let waveData = audioBuffer.getChannelData(0);
-                let wave = [];
-                let amplitude = 0;
-                for (let i = 0; i < waveData.length; i++) {
-                    amplitude += Math.abs(waveData[i]);
-                    if (i % interval == 0) {
-                        wave.push(Math.floor(amplitude * 500 / interval));
-                        amplitude = 0;
-                    }
-                }
-                store.dispatch(setCurrentWaveData(wave));
-            })
-        });
     });
 }
 

src/PlayerBar.js

@@ -1,10 +1,11 @@
 import { MenuItem, Select, IconButton, Typography, Stack, Container } from "@mui/material"
 import { useSelector, useDispatch } from 'react-redux'
-import { useEffect, useRef, useState, useCallback } from "react";
+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 } from "./business/recorderSlice.js"
+import { setCurrentTime, togglePauseState, setCurrentWaveData } from "./business/recorderSlice.js"
+import { audioWaveData } from "./business/utilities"
 import ProgressBar from "./components/ProgressBar";
 
 const durationFormat = (time) => {
@@ -30,6 +31,11 @@ export default function ({ width, currentTime }) {
         console.log(player.current.url);
     }, [currentBlob]);
 
+    useEffect(() => {
+        audioWaveData(currentBlob, (duration > 20 * 60) ? 200 : 100)
+            .then(data => dispatch(setCurrentWaveData(data)));
+    }, [duration]);
+
     const toggleState = () => {
         if (pause) {
             player.current.play();

src/business/recorderSlice.js

@@ -6,7 +6,7 @@ export const recorderSlice = createSlice({
         list: [],
         currentIndex: 0,
         currentLyric: [],
-        currentBlob: {},
+        currentBlob: "",
         currentWaveData: [],
         currentTime: 0, // 当前音频播放时间
         pause: true,

src/business/utilities.js

@@ -0,0 +1,27 @@
+// interval 间隔ms采点
+function audioWaveData(url, interval) {
+    if (url.length <= 0) return;
+    console.log("audioWaveData", url, interval);
+    return fetch(url)
+        .then(response => response.blob())
+        .then(blob => blob.arrayBuffer())
+        .then(arrayBuffer => {
+            let context = new (window.AudioContext || window.webkitAudioContext)();
+            return context.decodeAudioData(arrayBuffer).then(audioBuffer => {
+                let pointsInterval = audioBuffer.sampleRate / 1000 * interval;
+                let waveData = audioBuffer.getChannelData(0);
+                let wave = [];
+                let amplitude = 0;
+                for (let i = 0; i < waveData.length; i++) {
+                    amplitude += Math.abs(waveData[i]);
+                    if (i % pointsInterval == 0) {
+                        wave.push(Math.floor(amplitude * 500 / pointsInterval));
+                        amplitude = 0;
+                    }
+                }
+                return wave;
+            })
+        });
+}
+
+export { audioWaveData };