咨询PWA中Aux线移除时触发音乐暂停的JavaScript事件

嘿，这个需求我之前帮不少开发者处理过，刚好Web生态里有现成的方案能完美搞定！你可以通过两种思路来实现，具体看你的场景需求：

方案1：直接监听音频元素的状态事件 #

当Aux线拔出时，浏览器会自动中断音频播放，触发音频元素的suspend或waiting事件，你可以直接绑定这两个事件来执行暂停逻辑：

// 获取你的音频元素
const audioPlayer = document.getElementById('music-player');

// 监听suspend事件：当音频无法继续输出时触发（比如设备断开）
audioPlayer.addEventListener('suspend', () => {
  if (!audioPlayer.paused) {
    audioPlayer.pause();
    // 这里可以添加UI提示，比如"音频设备已断开"
    console.log('Aux线已拔出，音乐已暂停');
  }
});

// 额外监听waiting事件，部分浏览器可能会触发这个而不是suspend
audioPlayer.addEventListener('waiting', () => {
  if (!audioPlayer.paused) {
    audioPlayer.pause();
  }
});

这个方案的优点是简单直接，不需要额外的设备权限，也不用处理设备枚举逻辑，适合大多数场景。

方案2：监听音频输出设备变化 #

如果你需要更精准地检测设备断开事件，可以使用MediaDevices API的devicechange事件，主动检测音频输出设备的数量变化：

let currentOutputDeviceCount = 0;

// 初始化获取当前音频输出设备数量
async function initDeviceCount() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  currentOutputDeviceCount = devices.filter(dev => dev.kind === 'audiooutput').length;
}

// 监听设备变化事件
navigator.mediaDevices.addEventListener('devicechange', async () => {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const newOutputCount = devices.filter(dev => dev.kind === 'audiooutput').length;
  
  // 如果输出设备数量减少，说明可能拔出了Aux/蓝牙设备
  if (newOutputCount < currentOutputDeviceCount) {
    const audioPlayer = document.getElementById('music-player');
    if (!audioPlayer.paused) {
      audioPlayer.pause();
      console.log('音频设备已移除，音乐已暂停');
    }
    // 更新设备计数，避免重复触发
    currentOutputDeviceCount = newOutputCount;
  } else {
    // 可选：设备增加时可以提示用户恢复播放
    currentOutputDeviceCount = newOutputCount;
  }
});

// 页面加载时初始化
window.addEventListener('load', initDeviceCount);

这个方案的优势是可以精准判断设备变化的类型（比如是增加还是减少），适合需要更复杂逻辑的场景，但注意部分浏览器可能需要用户授权媒体权限（不过枚举输出设备通常不需要额外权限）。

注意事项 #

• 现代主流浏览器（Chrome、Firefox、Edge）都支持这两种API，Safari需要测试一下（最新版本应该也支持）。
• 浏览器有自动播放限制，第一次播放必须由用户主动触发（比如点击播放按钮），之后的自动暂停逻辑才能正常工作。
• 如果是用Web Audio API而不是原生<audio>元素，逻辑类似，你可以监听AudioContext的suspend事件来处理。

亲测这两种方法在PWA环境下都能稳定工作，你可以根据自己的需求选一种，或者结合起来用更稳妥～

内容的提问来源于stack exchange，提问作者товіаѕ