实现Web页面音频播放的键盘控制教程

<!-- HTML 结构 -->
<p>点击或按空格键切换播放：</p>
<button id="playToggle" class="fa-circle-play" aria-label="切换音频播放" type="button"></button>

<style>
/* 简单的CSS样式，模拟图标切换效果 */
#playToggle {
    font-size: 24px;
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    border-radius: 5px;
    margin-top: 10px;
}
#playToggle.fa-circle-play::after {
    content: "播放";
    margin-left: 8px;
}
#playToggle.fa-circle-pause::after {
    content: "暂停";
    margin-left: 8px;
}
</style>

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

/**
 * 切换音频播放状态并更新UI
 */
const masterToggle = () => {
  // 根据当前播放状态决定播放或暂停
  elAudio[elAudio.paused ? "play" : "pause"]();

  // 使用classList.toggle简化类管理，根据音频是否暂停来添加/移除类
  elPlay.classList.toggle("fa-circle-play", elAudio.paused);
  elPlay.classList.toggle("fa-circle-pause", !elAudio.paused);

  // 如果有GIF或其他视觉指示器，也可以在这里更新其可见性
  // gif.style.opacity = elAudio.paused ? 0 : 1;
};

// 页面加载时，使播放按钮获得焦点，以便用户可以直接使用空格键
elPlay.focus();

// 监听按钮的点击事件
elPlay.addEventListener("click", masterToggle);

// JavaScript 代码 (全局键盘控制)
const elPlay = document.querySelector("#playToggle");
const elAudio = new Audio("//upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg");

/**
 * 切换音频播放状态并更新UI
 */
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);

// 添加全局键盘事件监听器
// 使用 "keydown" 事件，因为它在按键按下时立即触发，并且能捕获所有键（包括功能键）
addEventListener("keydown", (evt) => {
  // console.log(evt.code); // 调试时可以打印 evt.code 来确定按键编码

  // 检查是否是指定的按键（例如，'P'键）
  // 并且确保用户当前没有在输入框、文本域或可编辑元素中输入内容
  if (
    evt.code === "KeyP" && // 假设我们使用 'P' 键作为快捷键
    !evt.target.closest("input, textarea, [contenteditable]") // 避免干扰用户输入
  ) {
    evt.preventDefault(); // 阻止按键的默认行为，例如浏览器快捷键
    masterToggle();
  }
});