MediaRecorder API 不支持实时音频处理,因其仅捕获并编码媒体流,不暴露原始音频样本或提供处理钩子;需配合 Web Audio API 构建处理图,将处理后的 MediaStream 交由 MediaRecorder 录制。

MediaRecorder API 本身不支持实时音频处理(如降噪、增益调节、频谱分析等),它只负责捕获媒体流并编码为指定格式(如 webm/aac)后输出数据块。若需在录制过程中实时干预音频信号,必须配合 Web Audio API 使用。
为什么 MediaRecorder 不能直接做实时音频处理
MediaRecorder 的设计目标是轻量、高效地录制音视频流,其输入源只能是 MediaStream(例如来自 navigator.mediaDevices.getUserMedia() 的麦克风流),但不会暴露原始音频样本或提供处理钩子。所有音频数据在内部直接送入编码器,开发者无法中途读取、修改或分析。
- 它不提供
onaudioprocess或类似回调 - 无法访问 PCM 数据、采样率、声道数等底层信息
- 不支持插入自定义 Web Audio 节点(如
BiquadFilterNode、GainNode)
实现“带处理的录音”:Web Audio + MediaRecorder 协同方案
核心思路是:用 Web Audio API 构建音频处理图,将麦克风流接入处理链,再把处理后的音频重新导出为新的 MediaStream,最后交给 MediaRecorder 录制。
- 调用
getUserMedia({audio: true})获取原始音频流 - 用
audioContext.createMediaStreamSource()将其转为音频源节点 - 串联
GainNode、BiquadFilterNode或自定义ScriptProcessorNode(已弃用)/AudioWorklet进行实时处理 - 将最终输出节点连接到
MediaStreamAudioDestinationNode,获取处理后的流:destination.stream - 用该新流初始化
new MediaRecorder(stream),即可录制已处理的音频
常见实时处理示例(代码片段)
以下为简化版增益+高通滤波示例:
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const destination = audioContext.createMediaStreamDestination();
// 获取麦克风流
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
const source = audioContext.createMediaStreamSource(stream);
// 增益控制
const gainNode = audioContext.createGain();
gainNode.gain.value = 1.5; // 提升音量
// 高通滤波(削弱低频嗡鸣)
const filter = audioContext.createBiquadFilter();
filter.type = 'highpass';
filter.frequency.value = 80; // 截止频率 80Hz
source.connect(gainNode).connect(filter).connect(destination);
// 用处理后的流启动录制
const recorder = new MediaRecorder(destination.stream);
recorder.ondataavailable = e => {
if (e.data.size > 0) {
const blob = new Blob([e.data], { type: 'audio/webm' });
// 保存或上传 blob...
}
};
recorder.start();
});
注意事项与限制
该方案虽可行,但需注意实际约束:
- 延迟:Web Audio 处理会引入几毫秒到几十毫秒的音频延迟,对实时性要求极高的场景(如在线K歌伴奏同步)需谨慎
- 浏览器兼容性:MediaStreamAudioDestinationNode 在 Safari 中支持较晚(iOS 16.4+/macOS 13.3+),旧版本需降级处理
- 性能开销:复杂 AudioWorklet 处理可能增加 CPU 占用,尤其在低端移动设备上
- 格式限制:MediaRecorder 输出格式取决于浏览器,webm(Opus)最通用;若需 MP3,需后端转码或前端 WASM 编码(如 lamejs)

















