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

This commit is contained in:
amass 2023-06-20 15:23:37 +08:00
parent 584950ce4d
commit deee6211b0
8 changed files with 36 additions and 46 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -9,12 +9,6 @@
name="description" name="description"
content="Web site created using create-react-app" 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. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

View File

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

View File

@ -44,23 +44,6 @@ function fetchRecord(accessToken, record) {
}); });
yzs.download(accessToken, record.audioUrl).then(blob => { yzs.download(accessToken, record.audioUrl).then(blob => {
store.dispatch(setCurrentBlob(URL.createObjectURL(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));
})
});
}); });
} }

View File

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

View File

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

27
src/business/utilities.js Normal file
View File

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