如何在JavaScript中监听耳机按键事件（类似keydown事件）

耳机按键通常触发的是媒体控制事件而非普通键盘按键事件，以下是两种可行的实现方案：

1. 监听特定键盘键码 #

部分耳机的播放/暂停、音量调节按键会触发标准keydown事件，对应固定键码：

• 播放/暂停：keyCode 179
• 音量增大：keyCode 175
• 音量减小：keyCode 174

代码示例：

document.addEventListener('keydown', (event) => {
  // 匹配耳机播放/暂停按键
  if (event.keyCode === 179) {
    event.preventDefault(); // 阻止系统默认媒体行为
    startRecording();
  }
  // 可选：监听音量按键（根据你的需求选择）
  else if (event.keyCode === 175 || event.keyCode === 174) {
    event.preventDefault();
    startRecording();
  }
});

// 自定义录音启动函数
function startRecording() {
  console.log('启动录音');
  // 这里添加你的录音逻辑（需提前获取麦克风权限）
}

注意：不同设备/浏览器的键码可能存在差异，需实际测试验证。

2. 使用Media Session API（推荐） #

现代浏览器支持的Media Session API是专门处理媒体控制事件的标准方案，兼容性更稳定：

// 必须通过用户交互触发（比如页面按钮点击），满足浏览器安全限制
document.getElementById('auth-btn').addEventListener('click', async () => {
  try {
    // 先请求麦克风权限（录音的前提）
    const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    
    if ('mediaSession' in navigator) {
      // 监听耳机播放按键事件
      navigator.mediaSession.setActionHandler('play', () => {
        initRecording(audioStream);
      });
      
      // 可选：监听暂停按键停止录音
      navigator.mediaSession.setActionHandler('pause', stopRecording);
    }
  } catch (err) {
    console.error('权限请求失败:', err);
  }
});

let recorder;
function initRecording(stream) {
  recorder = new MediaRecorder(stream);
  recorder.start();
  console.log('录音已启动');
  
  // 更新媒体会话状态，让系统感知当前录音状态
  navigator.mediaSession.playbackState = 'playing';
  
  // 处理录音完成后的数据流
  recorder.ondataavailable = (e) => {
    const audioBlob = e.data;
    // 这里可将Blob保存为文件或上传服务器
  };
}

function stopRecording() {
  if (recorder && recorder.state !== 'inactive') {
    recorder.stop();
    console.log('录音已停止');
    navigator.mediaSession.playbackState = 'paused';
  }
}

关键注意事项 #

• 所有录音相关操作必须在用户主动交互后触发（比如点击按钮），否则会被浏览器安全策略拦截
• 需在HTTPS环境下运行（本地开发localhost不受限制）
• 不同耳机的按键映射可能不同，建议同时兼容两种方案做兜底

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