如何阻止HTMLAudioElement拦截全局键盘事件，实现页面统一快捷键？

核心方案 #

直接切断audio元素对键盘事件的拦截能力，同时保留全局快捷键的正常触发逻辑。

1. 禁用Audio的默认键盘事件处理 #

给audio元素绑定捕获阶段的keydown事件，直接阻止事件的默认行为与传播，让它无法吞噬键盘事件：

const audio = document.querySelector('audio');
audio.addEventListener('keydown', (e) => {
  e.preventDefault(); // 取消audio自带的播放/暂停、音量调节等默认快捷键
  e.stopPropagation(); // 阻止事件继续向audio内部传播
}, true); // 捕获阶段触发，确保优先级高于audio自身的事件处理器

2. 保留全局快捷键逻辑 #

继续在document或window上绑定全局键盘事件，此时事件不会被audio拦截：

document.addEventListener('keydown', (e) => {
  // 示例：按空格实现全局播放/暂停
  if (e.code === 'Space') {
    e.preventDefault(); // 避免浏览器默认的页面滚动行为
    const audio = document.querySelector('audio');
    audio.paused ? audio.play() : audio.pause();
  }
  // 可添加更多自定义快捷键逻辑
});

3. 从根源避免焦点问题（可选） #

如果不需要audio元素获得焦点（Windows 11/Chrome下默认焦点可用性极差），可以直接设置它不可聚焦：

<audio tabindex="-1" controls>
  <!-- 音频资源 -->
</audio>

或者通过JS动态设置：

audio.setAttribute('tabindex', '-1');

这样用户无法通过键盘导航聚焦到audio元素，彻底规避它拦截事件的场景。

原理说明 #

audio元素获得焦点时，其内置事件处理器会优先处理键盘事件。通过在捕获阶段绑定自定义事件，我们能优先拦截事件，阻止默认行为与传播，确保全局事件处理器正常接收键盘信号。设置tabindex="-1"则直接从焦点层面消除了audio拦截事件的可能性。

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