使用MediaRecorder录制音频时，如何点击按钮添加声音且不终止录制？

嘿，这个问题我之前帮不少开发者踩过坑——你现在直接播放音频的做法，不仅扰民，其实还没法把这段声音真正合并到录制文件里（除非开内录，那反而更麻烦）。咱们换个思路：不要让声音通过扬声器出来，而是把它直接注入到你正在录制的MediaStream里，这样既不会吵到别人，还能完美把这段声音加到最终的录制文件中，而且完全不会中断当前的录制进程！

下面是具体的实现步骤和代码示例，照着做就行：

1. 提前加载要插入的音频文件 #

首先我们要用Web Audio API的AudioContext来处理音频数据，先把要插入的声音文件加载成音频缓冲区，这样点击按钮时就能快速调用：

// 全局变量存一下音频上下文和要插入的音频缓冲区
let audioContext;
let insertSoundBuffer;

// 页面加载时就把音频文件加载好，避免点击时卡顿
async function loadInsertSound() {
  audioContext = new AudioContext();
  // 替换成你的音频文件路径，比如./click-sound.mp3
  const response = await fetch('./your-target-sound.mp3');
  const arrayBuffer = await response.arrayBuffer();
  insertSoundBuffer = await audioContext.decodeAudioData(arrayBuffer);
}

// 页面初始化时调用加载函数
window.addEventListener('load', loadInsertSound);

2. 创建混合音频流，给MediaRecorder用 #

原来的MediaRecorder是从单个源（比如麦克风）录制的，我们需要创建一个“混合容器”，把原来的录制源（比如麦克风）和要插入的音频都丢进去，然后用这个混合后的流来启动录制：

// 先获取原录制源，比如用户的麦克风
const originalAudioStream = await navigator.mediaDevices.getUserMedia({ audio: true });

// 创建AudioContext的媒体流目标，这就是咱们的混合容器
const mixedStreamDestination = audioContext.createMediaStreamDestination();

// 把原麦克风的音频接入混合容器
const originalAudioSource = audioContext.createMediaStreamSource(originalAudioStream);
originalAudioSource.connect(mixedStreamDestination);

// 现在用混合后的流来初始化MediaRecorder，开始录制
const recorder = new MediaRecorder(mixedStreamDestination.stream);
recorder.start();

3. 点击按钮时插入音频（完全不扰民） #

当用户点击按钮时，我们把提前加载好的音频缓冲区，通过AudioContext播放到混合容器里——这个播放是在音频上下文内部完成的，完全不会通过扬声器外放，只会被MediaRecorder录进去：

// 给按钮绑定点击事件
document.getElementById('add-sound-btn').addEventListener('click', async () => {
  // 浏览器会自动暂停闲置的AudioContext，所以先检查恢复
  if (audioContext.state === 'suspended') {
    await audioContext.resume();
  }

  if (!insertSoundBuffer) return; // 没加载好就不执行

  // 创建音频源节点
  const soundSource = audioContext.createBufferSource();
  soundSource.buffer = insertSoundBuffer;
  // 关键：连接到混合容器，而不是默认的扬声器
  soundSource.connect(mixedStreamDestination);
  // 启动播放（内部播放，不会外放）
  soundSource.start();
});

几个要注意的小细节 #

• AudioContext的状态：浏览器为了节省资源，会自动暂停闲置的AudioContext，所以每次点击前记得检查并恢复。
• 音频格式：确保你的音频文件是浏览器支持的（MP3、WAV、OGG都没问题）。
• 权限问题：如果原录制源是麦克风，要确保用户已经授权了麦克风权限，不然混合流会出问题。

这种方案的好处就是完全解决了扰民问题，所有音频都在内部混合后直接录制，而且全程不会中断正在进行的录制，完美符合你的需求！

内容的提问来源于stack exchange，提问作者C. Salah