如何在Android版Chrome网页应用中检测蓝牙耳机断开？

问题背景 #

开发音视频网页应用时，需要实现「用户断开蓝牙耳机（如摘下耳机）时自动暂停/停止媒体播放」的功能，但尝试多种方法均未生效：

• 监听媒体元素事件：在<video>/<audio>上绑定pause、ended等事件，Android Chrome中断开耳机时无触发。

  mediaElement.addEventListener('pause', handlePause);
  mediaElement.addEventListener('ended', handleEnded);
  mediaElement.addEventListener('stalled', handleStalled);
  mediaElement.addEventListener('waiting', handleWaiting);
  mediaElement.addEventListener('error', handleError);
  

• navigator.mediaDevices.ondevicechange：该事件在Android Chrome中不可用。
• Web Bluetooth API：仅支持低功耗蓝牙设备，无法检测经典蓝牙音频耳机。

注意到Android Chrome中观看YouTube视频时，断开耳机会自动暂停，说明该功能可实现。

可行解决方案 #

方案1：监听AudioContext状态变化 #

Android Chrome中，蓝牙耳机断开时，AudioContext会从running切换为suspended状态，监听此状态变化即可触发暂停逻辑：

// 初始化AudioContext（兼容webkit前缀）
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 监听状态变更
audioContext.addEventListener('statechange', () => {
  if (audioContext.state === 'suspended') {
    // 执行媒体暂停操作
    mediaElement.pause();
  }
});

// 浏览器安全限制：需用户交互激活AudioContext
document.addEventListener('click', () => {
  if (audioContext.state === 'suspended') {
    audioContext.resume();
  }
});

方案2：定期枚举音频输出设备（备选） #

若状态监听不够可靠，可定期枚举音频输出设备列表，对比前后列表判断设备是否断开：

let previousOutputDevices = [];

async function checkAudioDevices() {
  try {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const currentOutputDevices = devices.filter(device => device.kind === 'audiooutput');
    
    // 检测设备数量减少（即有设备断开）
    if (previousOutputDevices.length > currentOutputDevices.length && !mediaElement.paused) {
      mediaElement.pause();
    }
    
    previousOutputDevices = currentOutputDevices;
  } catch (err) {
    console.error('获取音频设备列表失败:', err);
  }
}

// 每2秒检查一次（可按需调整间隔）
setInterval(checkAudioDevices, 2000);

// 首次加载初始化设备列表
checkAudioDevices();

关键注意事项 #

• AudioContext激活要求：必须通过用户交互（如点击）激活，否则无法正常监听状态变化。
• 设备枚举权限：enumerateDevices()可能需要用户授予媒体权限，部分场景下无需额外权限也能获取输出设备信息。
• 兼容性：以上方案均适配Android Chrome，覆盖多数主流蓝牙耳机场景。

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