HTMLAudioElement 专门拦截所有键盘事件 - 如何覆盖？

Question

我有一个非常简单的媒体播放器网页，带有

audio

标签。有必要为用户提供键盘快捷键，无论当前关注哪个元素，这些快捷键都可以在整个页面中一致地工作。

不幸的是，当音频元素具有焦点时，它会拦截所有键盘事件，无论分配了哪些事件处理程序。顺便说一句：直到用户按下任意键之前焦点都不会突出显示，因为它是在我的环境中基于 Windows 11/Chrome 的浏览器，所以默认的可用性非常好。

我已经尝试过使用

document.addEventListener

和

window.addEventListener

来实现“keydown”，并且捕获阶段处于开启状态（最后一个参数为 true），而气泡阶段则为 false。无论如何，事件都被音频吞没了。 “按键”也无法生存。

如果我单击音频之外的某个位置，键盘事件将开始按预期工作。

如何对键盘事件进行全局控制并禁用音频元素内的键盘事件陷阱？当前音频中键盘事件的默认实现看起来有些过大，并且破坏了整个页面的 UI 交互。

Answer 1

单击默认按钮（或搜索音频）后，使用

onPlay

、

onSeeked

和

onVolumeChange

事件模糊音频播放器的焦点，并确保键盘快捷键有效。例如：

<audio onPlay="blurAudioPlayer()" controls>
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/outfoxing.mp3" />
</audio>

...

const blurAudioPlayer = () => {
  const audioElement = document.querySelector('audio');

  if (audioElement === null || audioElement === undefined) return;

  audioElement.blur();
}