通过复用单个 mediarecorder 实例并启用 timeslice 分片录制，可避免频繁启停导致的音频瞬态失真（如点击声），从而实现平滑、无缝的实时音频流采集。
通过复用单个 mediarecorder 实例并启用 timeslice 分片录制，可避免频繁启停导致的音频瞬态失真（如点击声），从而实现平滑、无缝的实时音频流采集。
在基于 Web 的实时音频处理场景中（例如 React 应用中模拟 500ms 周期性语音采集），若每次调用 liveRecord() 都新建 MediaRecorder 实例并执行 start() → stop() 循环，会导致音频缓冲重置、编码器状态丢失，进而引发明显的“click”或“tick”杂音——这本质上是音频帧边界不连续造成的瞬态冲击（pop noise）。
根本解法：复用 Recorder，启用 timeslice 流式分片
无需反复销毁重建 MediaRecorder，只需创建一次，并利用 start(timesliceMs) 主动触发周期性 dataavailable 事件：
const recorder = useRef<mediarecorder null>(null);
const chunksRef = useRef<blob>([]);
const setupRecorder = (stream: MediaStream) => {
if (recorder.current) return; // 已存在则跳过
const mimeType = "audio/wav";
recorder.current = new MediaRecorder(stream, { mimeType });
recorder.current.ondataavailable = (event) => {
if (event.data.size > 0) {
chunksRef.current.push(event.data);
// ✅ 此处可立即上传分片，或累积后合并
uploadAudioChunk(event.data);
}
};
recorder.current.onerror = (e) => {
console.error("MediaRecorder error:", e);
};
// ? 关键：使用 timeslice 启动，避免 stop/start 切换
try {
recorder.current.start(1000); // 每 1000ms 触发一次 ondataavailable
} catch (err) {
console.error("Failed to start recorder:", err);
}
};
// 初始化时调用一次（例如 useEffect 中）
useEffect(() => {
if (stream.current) {
setupRecorder(stream.current);
}
return () => {
if (recorder.current && recorder.current.state !== "inactive") {
recorder.current.stop();
}
};
}, [stream]);</blob></mediarecorder>
⚠️ 重要注意事项：
- timeslice 并非严格精确的定时器，而是“尽可能接近”的提示值，实际分片间隔受浏览器音频采集周期与编码器影响（通常为 100–200ms 倍数更稳定）；建议从 500 或 1000 开始测试，避免过小（如 100）导致高频事件压力。
- 不再使用 setInterval(() => liveRecord(...), 500) —— 这是问题源头；改为单次初始化 + timeslice 驱动即可满足周期性数据获取需求。
- 若需更精细控制（如精准 500ms 分段），可在 ondataavailable 中对 Blob 进行 Web Audio API 解码 + 截取 + 重编码，但会增加复杂度和延迟；绝大多数场景下 timeslice 已足够。
- 确保 MediaStream 持续有效（如麦克风权限未被中断），否则 MediaRecorder 可能静默失败，建议监听 onerror 和 onstop 事件做兜底处理。
综上，消除点击声的关键不在音频后处理，而在于规避录音上下文的反复切换。复用 MediaRecorder 并采用 start(timeslice) 是标准、轻量且兼容性良好的最佳实践。
