1.切换到生产环境 2.完成频谱进度条的实现

src/MainPage.js

@@ -39,6 +39,8 @@ export default function () {
     useEffect(() => {
         yzs.get_record_list(accessToken, passportId).then(list => {
             dispatch(setList(list.result));
+        }).catch(error => {
+            console.log("get list failed", error);
         });
     }, [accessToken, passportId]);
     return <div className={styles.mainBody}>

src/PlayerBar.js

@@ -7,7 +7,7 @@ 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 Waveform from "./components/Waveform";
+import ProgressBar from "./components/ProgressBar";
 
 const durationFormat = (time) => {
     if (isNaN(time)) return "00:00:00";
@@ -20,11 +20,12 @@ const durationFormat = (time) => {
 
 export default function ({ currentTime }) {
     const dispatch = useDispatch();
-    const [duration, setDuration] = useState(0);
+    const [duration, setDuration] = useState(0);    // 秒，有小数点
     const [canvasWidth, setCanvasWidth] = useState(0);
     const currentIndex = useSelector(state => state.recorder.currentIndex);
     const recordList = useSelector(state => state.recorder.list);
     const currentBlob = useSelector(state => state.recorder.currentBlob);
+    const currentWaveData = useSelector(state => state.recorder.currentWaveData);
     const pause = useSelector(state => state.recorder.pause);
     const player = useRef(null);
     useEffect(() => {
@@ -49,7 +50,7 @@ export default function ({ currentTime }) {
     }
 
     const onResize = useCallback((width, height) => {
-        setCanvasWidth(width - 90 - 60);
+        setCanvasWidth(width - 90 - 70);
     }, []);
 
     const { ref: playerBar } = useResizeDetector({
@@ -60,7 +61,7 @@ export default function ({ currentTime }) {
         player.current.currentTime = second;
     }
 
-    return <Stack container sx={{
+    return <Stack sx={{
         position: "sticky",
         top: 48,
         backgroundColor: "#FAFAFA",
@@ -81,8 +82,11 @@ export default function ({ currentTime }) {
                 <img src={pause ? pauseIcon : playIcon} />
             </IconButton>
 
-            <audio autoplay ref={player} src={currentBlob} onDurationChange={onDurationChange} onTimeUpdate={onTimeUpdate} />
+            <audio autoPlay ref={player} src={currentBlob} onDurationChange={onDurationChange} onTimeUpdate={onTimeUpdate} />
-            <Waveform width={canvasWidth} duration={duration} currentTime={currentTime} playing={!pause} seek={seekRecord} />
+            <ProgressBar width={isNaN(canvasWidth) ? 0 : canvasWidth} duration={Math.ceil(duration * 1000)}
+                currentTime={currentTime} playing={!pause} seek={seekRecord}
+                waveData={currentWaveData}
+            />
             <Select
                 defaultValue={1.0}
                 sx={{

src/RecordList.js

@@ -7,7 +7,7 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import Toolbar from '@mui/material/Toolbar';
-import { setCurrentIndex, setCurrentLyric, setCurrentBlob } from "./business/recorderSlice.js"
+import { setCurrentIndex, setCurrentLyric, setCurrentBlob, setCurrentWaveData } from "./business/recorderSlice.js"
 import yzs from "./business/request.js";
 
 const drawerWidth = 240;
@@ -29,6 +29,26 @@ export default function () {
         });
         yzs.download(accessToken, recordList.at(index).audioUrl).then(blob => {
             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) {
+                            console.log(amplitude / interval)
+                            wave.push(Math.floor(amplitude * 500 / interval));
+                            amplitude = 0;
+                        }
+                    }
+                    dispatch(setCurrentWaveData(wave));
+                })
+            });
         });
     }
     return <Drawer

src/business/recorderSlice.js

@@ -7,6 +7,7 @@ export const recorderSlice = createSlice({
         currentIndex: 0,
         currentLyric: [],
         currentBlob: {},
+        currentWaveData: [],
         currentTime: 0, // 当前音频播放时间
         pause: true,
     },
@@ -27,6 +28,9 @@ export const recorderSlice = createSlice({
         setCurrentTime: (state, action) => {
             state.currentTime = action.payload;
         },
+        setCurrentWaveData: (state, action) => {
+            state.currentWaveData = action.payload;
+        },
         togglePauseState: (state) => {
             state.pause = !state.pause;
         },
@@ -34,6 +38,6 @@ export const recorderSlice = createSlice({
 })
 
 // Action creators are generated for each case reducer function
-export const { setCurrentIndex, setList, setCurrentLyric, setCurrentBlob, togglePauseState, setCurrentTime } = recorderSlice.actions
+export const { setCurrentIndex, setList, setCurrentLyric, setCurrentBlob, togglePauseState, setCurrentTime, setCurrentWaveData } = recorderSlice.actions
 
 export default recorderSlice.reducer

src/business/request.js

@@ -1,7 +1,15 @@
 import { json } from 'react-router-dom';
 
-const appKey = "k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy";
+// UAT环境
-const appSecret = "e65ffb25148b08207088148d5bce114d";
+// const appKey = "k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy";
+// const appSecret = "e65ffb25148b08207088148d5bce114d";
+// const accessServer = "http://116.198.37.53:8080";
+
+
+const accessServer = "https://uc.hivoice.cn";
+const appKey = "tp3szvq45m3yn6rdjhxlzrrikf6fc3a75t2yh3y3";
+const appSecret = "c5eccccfec16d46fe9ac678d69198415";
+
 
 function constructParameter(body) {
     let params = [];
@@ -11,7 +19,6 @@ function constructParameter(body) {
     params.sort();
     let digest = "";
     for (let param of params) {
-        console.log(param)
         digest += param;
     }
     let sha1 = require('sha1');
@@ -36,7 +43,7 @@ const yzs = {
         body.timestamp = parseInt(new Date().getTime() / 1000);
         body.flushToken = flushToken;
 
-        return fetch("http://116.198.37.53:8080/rest/v2/token/get_access_token", {
+        return fetch(`${accessServer}/rest/v2/token/get_access_token`, {
             method: "POST",
             body: constructParameter(body),
             headers: {
@@ -56,7 +63,7 @@ const yzs = {
         body.timestamp = parseInt(new Date().getTime() / 1000);
         body.accessToken = accessToken;
 
-        return fetch("http://116.198.37.53:8080/rest/v2/token/refresh_access_token", {
+        return fetch(`${accessServer}/rest/v2/token/refresh_access_token`, {
             method: "POST",
             body: constructParameter(body),
             headers: {
@@ -77,7 +84,7 @@ const yzs = {
         body.timestamp = parseInt(new Date().getTime() / 1000);
         body.accessToken = accessToken;
 
-        return fetch("http://116.198.37.53:8080/rest/v2/user/get_user_info", {
+        return fetch(`${accessServer}/rest/v2/user/get_user_info`, {
             method: "POST",
             body: constructParameter(body),
             headers: {
@@ -128,6 +135,9 @@ const yzs = {
                 'signature': sig,
             },
         }).then(response => response.json()).then((json) => {
+            if (json.errorCode !== "0") {
+                throw json;
+            }
             console.log(json)
             return json;
         });
@@ -164,7 +174,7 @@ const yzs = {
         body.account = account;
         body.password = md5(password);
 
-        return fetch("http://116.198.37.53:8080/rest/v2/user/login", {
+        return fetch(`${accessServer}/rest/v2/user/login`, {
             method: "POST",
             body: constructParameter(body),
             // mode: "no-cors",

src/components/ProgressBar.js

@@ -0,0 +1,179 @@
+import { useRef, useCallback, useState, useEffect } from "react";
+
+const pointWidth = 2;
+const pointMargin = 3;
+
+const interval = 100; // ms
+const intervalsPerTag = 10;
+
+function timeTag(timepoint) {
+    if (isNaN(timepoint)) return "00:00";
+    timepoint = Math.round(timepoint);
+    let second = Math.round(timepoint % 60);
+    let minute = Math.round(timepoint / 60);
+    return minute.toString().padStart(2, '0') + ":" + second.toString().padStart(2, '0');
+}
+
+const pointCoordinates = ({
+    index, pointWidth, pointMargin, canvasHeight, maxAmplitude, amplitude,
+}) => {
+    let pointHeight = Math.round((amplitude / 100) * maxAmplitude)
+    if (pointHeight < 3) pointHeight = 3;
+    const verticalCenter = Math.round((canvasHeight - pointHeight) / 2)
+    return [
+        index * (pointWidth + pointMargin), // x starting point
+        (canvasHeight - pointHeight) - verticalCenter + 10, // y starting point
+        pointWidth, // width
+        pointHeight, // height
+    ]
+}
+function drawText(context, duration) {
+    context.save();
+    context.fillStyle = "red";
+    context.textBaseline = "top";
+    context.font = "12px arial";
+    context.fillStyle = "#99A3AF";
+
+
+    let scales = Math.floor(duration / interval);
+    scales = Math.ceil(scales / intervalsPerTag) * intervalsPerTag + 1;
+    for (let i = 0; i < scales; i++) {
+        context.fillStyle = "#9DA7B2";
+        context.fillRect(i * (pointWidth + pointMargin), 0, pointWidth, (i % intervalsPerTag) == 0 ? 12 : 6);
+    }
+
+    context.fillStyle = "#99A3AF";
+    let timepoint = 0;
+    for (let i = 0; i <= scales; i++) {
+        if (i % intervalsPerTag == 0) {
+            context.fillText(timeTag(timepoint / 1000), i * (pointWidth + pointMargin) - 14, 10 + 4);
+        }
+        timepoint += interval;
+    }
+    context.restore();
+}
+
+const paintCanvas = ({
+    canvas, waveformData, duration, scrollLeft, leftPadding, canvasHeight, pointWidth, pointMargin,
+}) => {
+    // console.log("paintCanvas", duration, canvasHeight, canvas.width, scrollLeft);
+    const context = canvas.getContext('2d');
+    context.save();
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.translate(leftPadding, 0);;
+
+    drawText(context, duration);    // 画刻度尺
+
+    waveformData.forEach((p, i) => {
+        context.beginPath()
+        const coordinates = pointCoordinates({
+            index: i,
+            pointWidth,
+            pointMargin,
+            canvasHeight,
+            maxAmplitude: canvasHeight - 30,    // 留出空间画时间轴
+            amplitude: p,
+        })
+        context.rect(...coordinates)
+        context.fillStyle = (coordinates[0] <= scrollLeft) ? '#FF595A' : '#ABB5BC'
+        context.fill()
+    });
+    context.restore();
+}
+
+// duration ms
+export default function ({ width, duration, currentTime, playing, seek, waveData }) {
+    const container = useRef(null);
+    const canvas = useRef(null);
+    const [scrollLeft, setScrollLeft] = useState(0);
+    const [mouseDown, setMouseDown] = useState(false);
+    const [clickInfo, setClickInfo] = useState({
+        startX: 0,
+        scrollLeft: 0,
+    });
+
+    const onMouseDown = (event) => {
+        setMouseDown(true);
+        setClickInfo({
+            startX: event.pageX - container.current.offsetLeft,
+            scrollLeft: container.current.scrollLeft,
+        });
+    }
+
+    const onMouseLeave = (event) => {
+        setMouseDown(false);
+    }
+
+    const onMouseUp = (event) => {
+        setMouseDown(false);
+        console.log("onMouseUp");
+        // onMouseLeave(event);
+        seek(scrollLeft * interval / (pointWidth + pointMargin) / 1000);
+    }
+
+
+
+    const onMouseMove = (event) => {
+        event.preventDefault();
+        if (!mouseDown) return;
+        const x = event.pageX - container.current.offsetLeft;
+        const scroll = x - clickInfo.startX;
+        container.current.scrollLeft = clickInfo.scrollLeft - scroll;
+    }
+
+    const onScroll = () => {
+        setScrollLeft(container.current.scrollLeft);
+        // console.log("onScroll", container.current.scrollLeft, duration);
+    };
+    const paintWaveform = useCallback(() => {
+        paintCanvas({
+            canvas: canvas.current,
+            waveformData: waveData,
+            duration: duration,
+            scrollLeft: scrollLeft,
+            leftPadding: Math.round(width / 2),
+            canvasHeight: canvas.current.height,
+            pointWidth,
+            pointMargin,
+        })
+    }, [duration, width, scrollLeft, waveData])
+
+    useEffect(() => {
+        if (!canvas.current) return;
+        paintWaveform()
+    }, [canvas, width, duration, scrollLeft, waveData])
+
+    useEffect(() => {
+        console.log("mouseDown", mouseDown);
+        if (!mouseDown)
+            container.current.scrollLeft = currentTime * 1000 / interval * (pointWidth + pointMargin);
+    }, [currentTime]);
+
+    return <div ref={container}
+        onMouseDown={onMouseDown}
+        onMouseUp={onMouseUp}
+        onMouseMove={onMouseMove}
+        onMouseLeave={onMouseLeave}
+        onScroll={onScroll}
+        style={{
+            width: width,
+            overflow: "scroll",
+            overflowY: "hidden",
+            // scrollBehavior: "smooth",
+            // overflowX: "hidden",
+        }}>
+        <div style={{
+            height: 60,
+            backgroundColor: "red",
+            width: 2,
+            position: "absolute",
+            left: width / 2 + 70,
+            margin: 0,
+            padding: 0,
+
+        }} />
+        <canvas ref={canvas} width={width + (duration / interval) * (pointWidth + pointMargin)} height={60}
+
+        />
+    </div>
+}

src/setupProxy.js

@@ -1,14 +1,20 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
+// const appKey = "k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy";
+// const server = "http://ai-api.uat.hivoice.cn";
+
+const appKey = "tp3szvq45m3yn6rdjhxlzrrikf6fc3a75t2yh3y3";
+const server = "https://ai-api.hivoice.cn";
+
 module.exports = function (app) {
     app.use(
         '/api/app/app-voice-recorder/rest/v1/trans/info/list',
         createProxyMiddleware({
-            target: 'http://ai-api.uat.hivoice.cn',
+            target: server,
             changeOrigin: true,
             logger: console,
             onProxyReq: (proxyReq, req, res) => {
-                proxyReq.setHeader('appKey', 'k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy');
+                proxyReq.setHeader('appKey', appKey);
                 // console.log("proxyReq", req)
             },
         })
@@ -16,18 +22,18 @@ module.exports = function (app) {
     app.use(
         '/api/app/app-voice-recorder/rest/v1/user/select',
         createProxyMiddleware({
-            target: 'http://ai-api.uat.hivoice.cn',
+            target: server,
             changeOrigin: true,
             logger: console,
             onProxyReq: (proxyReq, req, res) => {
-                proxyReq.setHeader('appKey', 'k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy');
+                proxyReq.setHeader('appKey', appKey);
             },
         })
     );
     app.use(
         '/api/app/app-voice-recorder/rest/v1/trans/info/download',
         createProxyMiddleware({
-            target: 'http://ai-api.uat.hivoice.cn',
+            target: server,
             changeOrigin: true,
             logger: console,
             onProxyReq: (proxyReq, req, res) => {