Howler.js音频解码错误问题求助

针对你遇到的解码错误问题，可尝试以下几个排查和修复步骤：

1. 避免重复创建Howl实例 #

你当前的代码每次点击都会新建一个Howl实例，这可能导致资源加载冲突，建议将实例初始化移到事件监听外部：

let isPlaying = false;
let sound;
const songE = document.querySelector(".song");

// 仅初始化一次Howl实例
sound = new Howl({
  src: ["./sounds/crash.mp3"],
  volume: 0.5,
  onend: () => {
    isPlaying = false;
    alert("Finished");
  },
  onloaderror: (id, err) => {
    console.log("加载音频错误:", err);
  },
  onplayerror: (id, err) => {
    alert("播放音频错误: " + err);
  },
});

songE.addEventListener("click", () => {
  if (isPlaying) {
    sound.stop();
    isPlaying = false;
  } else {
    sound.play();
    isPlaying = true;
  }
});

2. 确认Howler.js引入正确 #

检查是否引入了最新稳定版本的Howler.js，推荐使用CDN引入避免本地路径问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>

3. 重新编码音频文件 #

原生Audio对编码兼容性更宽松，但Howler部分情况下对音频编码有严格要求。使用FFmpeg重新编码音频：

ffmpeg -i crash.mp3 -codec:a libmp3lame -qscale:a 2 crash-fixed.mp3

替换原文件后再测试。

4. 处理浏览器音频上下文限制 #

现代浏览器可能会暂停音频上下文，在播放前恢复上下文：

songE.addEventListener("click", () => {
  // 恢复被暂停的音频上下文
  if (Howler.ctx.state === 'suspended') {
    Howler.ctx.resume();
  }
  
  if (isPlaying) {
    sound.stop();
    isPlaying = false;
  } else {
    sound.play();
    isPlaying = true;
  }
});

5. 验证音频文件路径 #

在浏览器控制台的Network标签中检查音频文件的请求状态，确保返回200。也可尝试使用绝对路径测试：

src: [window.location.origin + "/sounds/crash.mp3"]

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