按下Enter键触发音频循环播放失败的问题求助

原代码的核心问题 #

• 直接在JavaScript回调中写入HTML标签：JS无法解析执行这种写法，必须通过DOM API创建或插入元素。
• 使用已废弃的keyCode：keyCode属于过时的API，兼容性差，推荐用event.key判断按键。
• 未触发音频播放：即使创建了音频元素，也需要手动调用play()方法才能开始播放，且未处理重复按键导致的多实例问题。

修正方案1：提前定义音频元素（推荐） #

先在HTML中预先定义音频元素（可隐藏控件）：

<audio id="loopAudio" loop>
  <source src="Chiptronical.ogg" type="audio/ogg">
</audio>

然后编写JavaScript逻辑：

const audio = document.getElementById('loopAudio');

document.addEventListener('keydown', function(event) {
  // 用标准的event.key判断Enter键
  if (event.key === 'Enter') {
    // 切换播放/暂停状态
    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
      // 若需要从头播放，可添加：audio.currentTime = 0;
    }
  }
});

修正方案2：动态创建音频元素 #

如果不想提前在HTML中写音频标签，可以动态创建实例：

let audioInstance = null;

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    // 仅在首次按键时创建音频实例
    if (!audioInstance) {
      audioInstance = new Audio('Chiptronical.ogg');
      audioInstance.loop = true;
    }
    // 切换播放状态
    if (audioInstance.paused) {
      audioInstance.play();
    } else {
      audioInstance.pause();
    }
  }
});

关键注意点 #

• 优先用keydown事件：keypress对Enter键的处理在部分浏览器中存在兼容性问题，keydown更可靠。
• 避免多实例播放：用变量保存音频实例，防止每次按键都创建新的音频导致重叠播放。
• 浏览器自动播放限制：现代浏览器要求音频播放必须由用户交互触发（比如按键），当前逻辑符合这个要求，不会被拦截。

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