Web Audio API录音设备选择及MediaStreamRecorder设备设置技术问询

我来帮你拆解这两个前端音频开发里的常见问题，给出可落地的解决方案：

要实现指定设备录制，核心是先获取可用音频输入设备列表，再锁定目标设备获取媒体流，最后将流接入Web Audio链路（可选，用于实时音频处理）。具体步骤如下：

• 第一步：请求媒体权限
  浏览器要求必须先获取媒体访问权限，enumerateDevices才会返回真实的设备信息（否则只会显示匿名设备）。
• 第二步：枚举并过滤音频输入设备
  调用navigator.mediaDevices.enumerateDevices()获取所有设备，筛选出kind为audioinput的设备。
• 第三步：获取指定设备的媒体流
  通过getUserMedia()传入目标设备的deviceId，拿到对应设备的MediaStream。
• 第四步：接入Web Audio链路（可选）
  如果需要对音频做实时处理（比如降噪、均衡），可以将MediaStream接入Web Audio的AudioContext，后续再对接录制逻辑。

代码示例 #

async function selectAudioDeviceAndRecord() {
  // 先请求基础音频权限，确保能获取真实设备信息
  await navigator.mediaDevices.getUserMedia({ audio: true });

  // 获取所有媒体设备，过滤出音频输入设备
  const allDevices = await navigator.mediaDevices.enumerateDevices();
  const audioInputDevices = allDevices.filter(device => device.kind === 'audioinput');
  
  if (audioInputDevices.length === 0) {
    console.error('未检测到可用的音频输入设备');
    return;
  }

  // 这里默认选第一个设备，实际项目中可以做UI让用户选择
  const targetDevice = audioInputDevices[0];
  console.log('选中录制设备:', targetDevice.label);

  // 获取指定设备的媒体流
  const audioStream = await navigator.mediaDevices.getUserMedia({
    audio: { deviceId: targetDevice.deviceId }
  });

  // 初始化Web Audio上下文，用于音频处理（可选）
  const audioContext = new AudioContext();
  const sourceNode = audioContext.createMediaStreamSource(audioStream);
  
  // 可以在这里添加音频处理节点，比如降噪、增益控制
  // const gainNode = audioContext.createGain();
  // sourceNode.connect(gainNode);
  // gainNode.connect(audioContext.destination);

  // 结合MediaRecorder实现录制
  const recorder = new MediaRecorder(audioStream);
  const recordedChunks = [];

  recorder.ondataavailable = (e) => recordedChunks.push(e.data);
  recorder.onstop = () => {
    const audioBlob = new Blob(recordedChunks, { type: 'audio/webm' });
    // 示例：播放录制的音频
    const audioUrl = URL.createObjectURL(audioBlob);
    const audioPlayer = new Audio(audioUrl);
    audioPlayer.play();
  };

  // 开始录制，5秒后自动停止
  recorder.start();
  setTimeout(() => {
    recorder.stop();
    audioStream.getTracks().forEach(track => track.stop());
    audioContext.close();
  }, 5000);
}

// 调用执行
selectAudioDeviceAndRecord();

首先要明确：enumerateDevices是navigator.mediaDevices的方法，不属于Web Audio API，但你完全可以用它来获取设备列表，进而为MediaStreamRecorder指定录制源。

核心逻辑是：

1. 用enumerateDevices拿到目标音频输入设备的deviceId；
2. 通过getUserMedia()获取该设备对应的MediaStream；
3. 将这个MediaStream直接传给MediaStreamRecorder作为录制源。

如果需要对音频做实时处理，才需要引入Web Audio API：先把MediaStream接入Web Audio的处理节点，再将处理后的流传给MediaStreamRecorder。

代码示例（直接指定录制源） #

async function setRecorderSourceByDevice() {
  // 请求权限，确保能获取设备信息
  await navigator.mediaDevices.getUserMedia({ audio: true });

  // 获取音频输入设备列表
  const devices = await navigator.mediaDevices.enumerateDevices();
  const audioInputs = devices.filter(d => d.kind === 'audioinput');
  
  if (!audioInputs.length) {
    alert('无可用音频输入设备');
    return;
  }

  // 示例：选择第二个音频输入设备（实际可做UI让用户选择）
  const selectedDevice = audioInputs[1];
  console.log('当前录制设备:', selectedDevice.label);

  // 获取指定设备的媒体流
  const targetStream = await navigator.mediaDevices.getUserMedia({
    audio: { deviceId: { exact: selectedDevice.deviceId } } // exact确保强制选中目标设备
  });

  // 创建MediaStreamRecorder，指定来源为选中设备的流
  const recorder = new MediaRecorder(targetStream);
  const chunks = [];

  recorder.ondataavailable = (event) => {
    if (event.data.size > 0) chunks.push(event.data);
  };

  recorder.onstop = () => {
    const audioFile = new Blob(chunks, { type: 'audio/mp4' });
    // 示例：下载录制文件
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(audioFile);
    downloadLink.download = `recorded-from-${selectedDevice.label.replace(/\s+/g, '-')}.mp4`;
    downloadLink.click();
  };

  // 开始录制，10秒后停止
  recorder.start();
  setTimeout(() => {
    recorder.stop();
    targetStream.getTracks().forEach(track => track.stop());
  }, 10000);
}

// 执行函数
setRecorderSourceByDevice();

内容的提问来源于stack exchange，提问作者Kishore