theme my login wordpress,长沙百度seo排名,上海公司注销需要多少钱费用?,房产网站制作公司前言
这两天写项目刚好遇到Ai对话相关的需求#xff0c;需要录音功能#xff0c;绘制录制波形图#xff0c;写了一个函数用canvas实现可视化#xff0c;保留分享一下#xff0c;有需要的直接粘贴即可#xff0c;使用时传入一个1024长的#xff0c;0-255大小的Uint8Arra…前言
这两天写项目刚好遇到Ai对话相关的需求需要录音功能绘制录制波形图写了一个函数用canvas实现可视化保留分享一下有需要的直接粘贴即可使用时传入一个1024长的0-255大小的Uint8Array类型音频数据源
canvas refcanvasRef width800 height200/canvasconst drawWaveform (audioArray) {const canvas canvasRef.value;if (!canvas || !audioArray) return;const ctx canvas.getContext(2d);if (!ctx) return;const width canvas.width;const height canvas.height;const bufferLength audioArray.length;// 清除画布ctx.clearRect(0, 0, width, height);// 设置线条样式ctx.strokeStyle #4f35b5;ctx.lineWidth 2;ctx.beginPath();const sliceWidth width / bufferLength;let x 0;for (let i 0; i bufferLength; i) {const value audioArray[i] / 255.0; // 将0-255的值归一化为0-1const y value * height;if (i 0) {ctx.moveTo(x, y);} else {ctx.lineTo(x, y);}x sliceWidth;}ctx.stroke();
};
通过requestAnimationFrame调用即可
示例
// 持续更新波形
const updateWaveform () {ensureRecorder(() {audioArray.value recorder!.getRecordAnalyseData();drawWaveform(audioArray.value);animationFrameId requestAnimationFrame(updateWaveform);});
};
