如何编写JavaScript函数实现按键按下播音效、松开即停并解决运行异常

问题根因 #

• 仅监听了keydown事件，按住按键时该事件会持续重复触发，导致engineSound.play()被反复调用，大量音频播放请求堆积占用浏览器资源，最终引发页面冻结
• 未监听keyup事件添加音频停止逻辑，因此松开按键后音效依然持续播放

修复代码 #

// 定义播放状态标记，避免重复触发播放
let isPlaying = false;

window.addEventListener('keydown', (e) => {
  // 跳过按键按住时的重复触发事件，以及已经在播放的状态
  if (e.repeat || isPlaying) return;
  engineSound.play();
  isPlaying = true;
});

window.addEventListener('keyup', () => {
  // 停止播放并重置播放进度到起始位置
  engineSound.pause();
  engineSound.currentTime = 0;
  isPlaying = false;
});

优化提示 #

如果音频首次播放存在延迟，可给对应的<audio>标签添加preload="auto"属性，提前加载音频资源。

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