登录
录音与音频可视化
需求背景
现在很多AI智能体应用，会向用户开放自定义音色的功能，以便用户能使用自己的声音生成一个角色。实现自定义音色的前提就是采集用户自己的声音，以供后续大模型生成角色的自定义音色。本文将介绍，怎么在web中实现录音以及音频的可视化。
实现效果如下，类似iphone的语音备忘录： 
它具有以下特点：
- 波形随着音量实时变化
- 从右向左滚动
- 播放时可以复现录音波形
技术选型
怎么采集声音
浏览器中录音主要有三种方案：MediaRecorder、Web Audio API、Recorder-Core
1. MediaRecorder API：是浏览器提供的高层封装录音接口
用法如下：
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);
recorder.ondataavailable = (e) => {
const blob = e.data; // 音频文件
};
recorder.start();
这是浏览器原生支持的API，简单高效实现录音，但是只能拿到编码后的blob，无法获取原始的振幅数据，也就无从实现实时可视化了。
2. Web Audio API 这是浏览器提供的音频处理引擎，只提供原始的振幅数据，可以实现音频可视化。可是，这套API不做任何封装，需要自行处理buffer 拼接、多通道处理、文件头封装等问题，实现过于复杂，因此不做考虑
3. Recorder-Core 这个库基于Web Audio API，实现了以下功能：
- 实时回调输出振幅数据 （实现音频实时可视化的关键）
- WAV编码
- 生命周期封装 大大简化了音频采集的实现，并且具有良好的浏览器兼容性，在PC + 主流移动浏览器上都能使用，因此，最终选择recorder-core来实现音频采集
怎么实现音频的实时可视化
高频更新的动画，使用DOM实现会频繁触发回流、重绘，会造成显著的性能浪费，而这种场景使用canvas再合适不过了，用一张独立布局的画布，承接频繁更新的动画
因此，我们选择Recorder-Core + Canvas来实现本次需求。
核心流程
录音与采集音频数据
1️⃣ 初始化录音器
function createRecorder() {
return RecorderCore({
type: "wav",
// 采样率
sampleRate: 44100,
onProcess(buffers, powerLevel, duration, sampleRate, newBufferIdx) {
...
},
});
}
recorder = createRecorder();
- type: "wav" → 输出 wav 文件
- onProcess: 实时拿到 PCM(振幅) 数据，以供后续绘制图形
2️⃣ 音频数据处理
在这一步中，原始采集到的音频数据在[-32768, 32767]区间，去掉正负值，并转换成[0, 1]区间的值。
const latest = buffers[newBufferIdx] || buffers[buffers.length - 1];
// 将原始 PCM 采样转换成 0 到 1 之间的能量值，供可视化使用。
function calcEnergyFromPCM(pcm: Int16Array): number {
if (!pcm || pcm.length === 0) return 0;
let sum = 0;
for (let i = 0; i < pcm.length; i++) {
sum += Math.abs(pcm[i]);
}
return Math.min(1, sum / pcm.length / 32768);
}
3️⃣ 实时数据采集
- liveEnergyQueue，用来存实时展示所需的数据
- energyTimeline，用来存全量数据，播放回放时使用
const energy = calcEnergyFromPCM(latest);
// 实时显示
liveEnergyQueue.push(energy);
// 播放回放
energyTimeline.push(energy);
4️⃣ 录音控制
开始录音
// 开始录音
await recorder.open(
() => resolve(),
(msg: string, _isUserNotAllow: boolean) => reject(new Error(msg)),
);
recorder.start();
结束录音
recorder.stop((blob, duration) => {
wavBlob.value = blob;
});
注意：开始录音会请求麦克风权限，只有https和localhost能获取，其他环境会报错
音频可视化
1️⃣ 核心数据准备
const liveEnergyQueue: number[] = []; // 实时队列
const energyTimeline: number[] = []; // 全量数据（播放用）
const visualBuffer: number[] = []; // 当前屏幕显示
2️⃣ 动画驱动
录音、回放都统一使用startVisual实现绘制，内部通过requestAnimationFrame绘制每一帧动画
function startVisual(mode) {
function draw() {
...
animationId = requestAnimationFrame(draw);
}
draw();
}
3️⃣ 滚动窗口
两种模式energy的取值方式不一样，最终都是加入visualBuffer，visualBuffer会维护最大窗口，超出窗口就不再展示
if (mode === "record") {
energy = liveEnergyQueue.shift();
} else {
energy = energyTimeline[playIndex++];
}
visualBuffer.push(energy);
if (visualBuffer.length > MAX_COLUMNS) {
visualBuffer.shift();
}
4️⃣ 绘制柱状图
从右往左绘制柱状图
const startX = width - barWidth;
for (let i = visualBuffer.length - 1, col = 0; i >= 0; i--, col++) {
const x = startX - col * step;
if (x + barWidth < 0) break;
const e = visualBuffer[i];
const barHeight = Math.min(
maxBarHeight,
Math.max(minBarHeight, e * height * VISUAL_HEIGHT_GAIN),
);
const y = (height - barHeight) / 2;
ctx.fillStyle = "#ff3b30";
ctx.fillRect(x, y, barWidth, barHeight);
}
5️⃣ Canvas高清适配
现代高清显示屏的dpr通常会大于1，也就是说实际的物理像素会比css像素更大，以dpr=2，css像素200x200为例，浏览器实际的物理像素时400x400，也就是会拉伸canvas尺寸，把一个200x200尺寸画布上绘制的图形，渲染在400x400的画布上，图形就容易模糊，因此需要对canvas根据dpr进行整体缩放
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = Math.max(1, Math.floor(rect.width * dpr));
canvas.height = Math.max(1, Math.floor(rect.height * dpr));
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
