HTML5 Canvas中带.play()/.pause()按钮的音频循环实现问题

方案1：用Audio原生loop属性（最简单） #

直接给你的音乐实例开启原生循环功能，一行代码搞定：

修改音乐初始化代码：

//音乐
const music = new Audio();
music.src = "resources/audio.ogg";
music.loop = true; // 启用无限循环

开启后，音频会自动重复播放，直到你调用pause()（也就是静音状态），完全匹配你的需求，不需要改动现有静音控制逻辑。

方案2：监听ended事件手动重播（兼容特殊场景） #

如果原生loop在某些浏览器或无缝循环需求下表现不佳，可以通过监听音频结束事件手动触发重播：

更新音乐初始化代码：

//音乐
const music = new Audio();
music.src = "resources/audio.ogg";

// 监听音频结束事件
music.addEventListener('ended', () => {
  // 只有在非静音状态下才继续播放
  if (!mutedToggleStatus) {
    music.play();
  }
});

这种方式逻辑更可控，比如需要无缝循环时可以调整触发时机，但对于你的游戏单轨音频来说，方案1已经足够。

注意：两种方案都不需要修改你现有的toggleMute和按钮交互代码，因为静音时pause()会中断播放，取消静音时play()会重新启动循环。

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