amass/newsmy_recorder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
amass 2023-06-15 15:37:17 +08:00
parent b2fd82e9f4
commit b98c1b9ed8
7 changed files with 245 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/MainPage.js
View File

@ -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}>

16
src/PlayerBar.js
View File

@ -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} />
<Waveform width={canvasWidth} duration={duration} currentTime={currentTime} playing={!pause} seek={seekRecord} />
<audio autoPlay ref={player} src={currentBlob} onDurationChange={onDurationChange} onTimeUpdate={onTimeUpdate} />
<ProgressBar width={isNaN(canvasWidth) ? 0 : canvasWidth} duration={Math.ceil(duration * 1000)}
currentTime={currentTime} playing={!pause} seek={seekRecord}
waveData={currentWaveData}
/>
<Select
defaultValue={1.0}
sx={{

22
src/RecordList.js
View File

@ -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

6
src/business/recorderSlice.js
View File

@ -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

24
src/business/request.js
View File

@ -1,7 +1,15 @@
import { json } from 'react-router-dom';
const appKey = "k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy";
const appSecret = "e65ffb25148b08207088148d5bce114d";
// UAT环境
// 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",

179
src/components/ProgressBar.js Normal file
View File

@ -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>
}

16
src/setupProxy.js
View File

@ -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) => {