JavaScript键盘事件控制音频播放教程：聚焦与全局监听策略

<!-- 页面中用于控制音频的按钮 -->
<p>点击或按空格键切换播放：</p>
<button id="play" class="fa-circle-play" aria-label="切换音频播放" type="button"></button>

/* 示例CSS，用于显示播放/暂停状态 */
#play.fa-circle-play::after {
  content: "播放"; /* 播放状态显示“播放”文本 */
  margin-left: 5px;
}
#play.fa-circle-pause::after {
  content: "暂停"; /* 暂停状态显示“暂停”文本 */
  margin-left: 5px;
}
/* 基础按钮样式，可根据需要调整 */
#play {
  padding: 8px 15px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f0f0;
}
#play:focus {
  outline: 2px solid blue; /* 聚焦时的视觉提示 */
}

const elPlay = document.querySelector("#play");
const elAudio = new Audio(); // 创建一个音频元素
elAudio.src = "//upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg"; // 设置音频源

// 通用的音频播放/暂停切换逻辑
const masterToggle = () => {
  // 根据当前播放状态切换
  elAudio[elAudio.paused ? "play" : "pause"]();
  // 切换按钮的CSS类以更新图标/文本
  elPlay.classList.toggle("fa-circle-play", elAudio.paused);
  elPlay.classList.toggle("fa-circle-pause", !elAudio.paused);
};

// 页面加载后，将焦点设置到播放按钮上，使其可以通过空格键控制
elPlay.focus();
// 绑定点击事件，当按钮被点击或聚焦时按下空格键都会触发
elPlay.addEventListener("click", masterToggle);

// 确保音频播放结束后重置按钮状态
elAudio.addEventListener('ended', () => {
  elPlay.classList.add("fa-circle-play");
  elPlay.classList.remove("fa-circle-pause");
});

const elPlay = document.querySelector("#play");
const elAudio = new Audio();
elAudio.src = "//upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg";

const masterToggle = () => {
  elAudio[elAudio.paused ? "play" : "pause"]();
  elPlay.classList.toggle("fa-circle-play", elAudio.paused);
  elPlay.classList.toggle("fa-circle-pause", !elAudio.paused);
};

// 绑定点击事件
elPlay.addEventListener("click", masterToggle);

// 确保音频播放结束后重置按钮状态
elAudio.addEventListener('ended', () => {
  elPlay.classList.add("fa-circle-play");
  elPlay.classList.remove("fa-circle-pause");
});

// 添加全局键盘事件监听
window.addEventListener("keydown", (evt) => {
  // console.log(evt.code); // 调试用，查看按键的 code 值

  // 检查按键是否是 'P' 键 (KeyP)
  // 并且确保当前焦点不在输入框、文本域或可编辑元素中
  if (
    evt.code === "KeyP" && // 示例：使用 'P' 键作为快捷键
    !evt.target.closest("input, textarea, [contenteditable='true']")
  ) {
    evt.preventDefault(); // 阻止默认行为，例如浏览器可能自带的快捷键
    masterToggle();
  }
});