Commit f1b8a2de authored by martin hou's avatar martin hou

fix: 修复单个录音的波形图显示

parent c2355191
...@@ -223,32 +223,12 @@ export function Home() { ...@@ -223,32 +223,12 @@ export function Home() {
}); });
} }
// 先创建audio-worker,给到后面使用
const audioWorker = new Worker(new URL('./audio-worker.js', import.meta.url), { type: 'module' });
const waveformWorker = new Worker(new URL('./waveform-worker.js', import.meta.url), { type: 'module' }); const waveformWorker = new Worker(new URL('./waveform-worker.js', import.meta.url), { type: 'module' });
waveformWorker.onmessage = (e) => { waveformWorker.onmessage = (e) => {
console.log('waveformWorker', e); if (e.data.waveform)
}
audioWorker.onmessage = (e) => {
// console.log(e);
if (e.data.waveformData)
{ {
console.log('waveform', e.data.waveformData); console.log('waveform', e.data.waveform);
// 把e.data.waveformData追加到waveformData的末尾 const waveform = e.data.waveform;
// let waveform = [];
/*
for (let i = 0; i < e.data.waveformData.length; i++)
{
waveform.push(e.data.waveformData[i]);
}
*/
// 把waveform追加到waveformData的末尾
// waveformData.push(...waveform);
const waveform = e.data.waveformData;
// console.log(waveformData);
// 更新波形图waveformCanvas // 更新波形图waveformCanvas
const canvas = document.getElementById('waveformCanvas') as HTMLCanvasElement; const canvas = document.getElementById('waveformCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
...@@ -273,24 +253,17 @@ export function Home() { ...@@ -273,24 +253,17 @@ export function Home() {
let half = height / 2; let half = height / 2;
let x = 0; let x = 0;
let y = half; let y = half;
// ctx.beginPath();
// ctx.moveTo(x, y);
for (let i = 0, x = 0; i < waveform.length; i++) for (let i = 0, x = 0; i < waveform.length; i++)
{ {
let v = waveform[i] / 128.0; let v = waveform[i] / 128.0;
// y = half - v * height / 2 + 2;
y = (v * height / 2); y = (v * height / 2);
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(x, half - Math.min(y, half)); ctx.moveTo(x, half - Math.min(y, half));
ctx.lineTo(x, half + Math.min(y, half)); ctx.lineTo(x, half + Math.min(y, half));
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
// 把y反转一下,y = height - y
// ctx.lineTo(x, height - y);
x += 3; x += 3;
} }
// ctx.stroke();
// ctx.closePath();
} }
} }
...@@ -335,7 +308,7 @@ export function Home() { ...@@ -335,7 +308,7 @@ export function Home() {
const mp3data:any[] = []; const mp3data:any[] = [];
const test = async () => { const test = async () => {
let idx = prompt('请输入文件序号', '8'); let idx = prompt('请输入文件序号', '0');
if (idx === null || idx === undefined) return; if (idx === null || idx === undefined) return;
let file = files[parseInt(idx)]; let file = files[parseInt(idx)];
if (file === null || file === undefined) return alert('文件不存在'); if (file === null || file === undefined) return alert('文件不存在');
...@@ -386,8 +359,9 @@ export function Home() { ...@@ -386,8 +359,9 @@ export function Home() {
let name = 'block-' + i; let name = 'block-' + i;
// audioWorker.postMessage({ data: block, name: name }); // audioWorker.postMessage({ data: block, name: name });
audioContext.decodeAudioData(block).then((buffer) => { audioContext.decodeAudioData(block).then((buffer) => {
// console.log('decodeAudioData' + i, buffer); const channelData = buffer.getChannelData(0);
waveformWorker.postMessage({ id: name, pcmdata: buffer }); console.log('channelData', channelData);
waveformWorker.postMessage({ id: name, pcmdata: channelData });
}).catch((err) => { }).catch((err) => {
console.log('decodeAudioData' + i, err); console.log('decodeAudioData' + i, err);
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment