自定义浏览器起始页音频循环功能实现故障求助

存在的问题 #

• 音频元素缺少ID：你当前的<audio>标签没有设置id="audio"，导致document.getElementById('audio')无法获取到音频元素，这是最基础的错误。
• getElementById调用错误：这个方法是document对象的属性，你写的getElementById('Repeat_Check')必须改成document.getElementById('Repeat_Check')，否则会直接报错。
• 重复状态判断逻辑错误：复选框的勾选状态是通过checked属性判断的，你写的this.Repeat_Checkbox.CheckOnClick = true完全不符合语法，而且this在这里指向全局对象，不是复选框元素，这行代码没有任何意义。
• while循环卡死浏览器：你在onplay事件里写的同步while循环会一直占用浏览器主线程，导致页面彻底卡死，根本无法正常检测音频状态。
• play方法调用错误：Playing_Audio.play只是引用函数，必须加上括号Playing_Audio.play()才能执行播放操作。

修正后的完整代码 #

HTML部分（给音频加ID，简化复选框）

<audio id="audio" src="Media/(Artist)/(song)" controls preload></audio>

<h2>
  <input type='checkbox' id='Repeat_Check'>
  <label for='Repeat_Check'>Repeat</label>
</h2>

注：复选框默认就是未勾选状态，不需要写unchecked属性。

JavaScript部分（用事件监听替代循环）

// 获取音频和复选框元素
const Playing_Audio = document.getElementById('audio');
const Repeat_Checkbox = document.getElementById('Repeat_Check');

// 监听音频播放结束事件
Playing_Audio.addEventListener('ended', function() {
  // 如果复选框被勾选，就重新播放
  if (Repeat_Checkbox.checked) {
    Playing_Audio.play();
  }
});

代码逻辑说明 #

这段代码逻辑非常直白：

1. 先获取到音频元素和复选框元素；
2. 给音频绑定ended事件——每当音频播放完毕，这个事件会自动触发；
3. 在事件触发时，判断复选框是否被勾选，如果是，就调用play()重新开始播放。

完全没有复杂逻辑，你能清楚看到每一步的作用，也不会出现页面卡死的问题。

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