如何通过JavaScript检测外接耳机的麦克风物理静音/取消静音按键事件？

目前不存在可以直接监听耳机物理按键触发麦克风开关事件的标准Web API，你可以通过以下两种间接方案实现近似检测：

方案1：监听音频轨道的mute/unmute事件 #

当用户按压耳机物理按键触发系统级麦克风静音时，WebRTC使用的MediaStream音频轨道会触发标准的mute事件，反之取消静音会触发unmute事件，这是目前兼容性最好的检测方案。
示例代码：

// 已通过getUserMedia获取到音频流的前提下
const audioTrack = localStream.getAudioTracks()[0];

// 麦克风被静音（含物理按键、系统设置触发的静音）
audioTrack.addEventListener('mute', () => {
  // 你的业务逻辑
});

// 麦克风取消静音
audioTrack.addEventListener('unmute', () => {
  // 你的业务逻辑
});

注意：仅当耳机物理按键的操作会同步修改系统麦克风的输入状态时，该事件才会触发，部分驱动不兼容的设备无法触发该事件。

方案2：通过音频音量检测判定麦克风状态 #

如果方案1不生效，可以通过Web Audio API实时检测麦克风输入的音量，当连续一段时间内输入音量低于设定阈值时，判定麦克风已被关闭。
示例代码：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
const volumeData = new Uint8Array(analyser.frequencyBinCount);
let silenceCounter = 0;
// 可根据业务场景调整阈值：低于该值判定为静音，连续15次检测为静音则判定为关麦
const VOLUME_THRESHOLD = 8;
const SILENCE_TRIGGER_COUNT = 15;

// 将音频流接入分析器
const audioSource = audioContext.createMediaStreamSource(localStream);
audioSource.connect(analyser);

function checkMicStatus() {
  analyser.getByteFrequencyData(volumeData);
  const avgVolume = volumeData.reduce((sum, val) => sum + val, 0) / volumeData.length;

  if (avgVolume < VOLUME_THRESHOLD) {
    silenceCounter++;
    if (silenceCounter >= SILENCE_TRIGGER_COUNT) {
      // 触发麦克风关闭的业务逻辑
      silenceCounter = 0;
    }
  } else {
    silenceCounter = 0;
  }
  requestAnimationFrame(checkMicStatus);
}

checkMicStatus();

注意：该方案存在误判可能，比如用户长时间不说话也可能触发判定，需要结合业务场景合理调整参数。

注意事项 #

• 所有方案均为间接检测，无法做到100%覆盖所有设备场景，部分移动端设备会拦截耳机按键事件为系统媒体控制指令，不会传递到浏览器层
• 两种方案可以结合使用，优先用轨道事件监听，不生效的场景降级为音量检测

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