为什么使用 new Audio() 播放背景音乐时，音乐无法播放？

解决 JS 中 new Audio() 音乐不播放的问题

问题溯源

使用 new audio(url) 时，如果不播放背景音乐，控制台通常会提示：“failed to load because no supported source was found.”，意味着没有可支持的音频源。

解决方法

1. 确保资源加载

首先，确认音频文件能被浏览器加载。可以通过如下方式检查：

• 仔细检查音频文件的路径，确保无误。
• 确保音频文件格式为浏览器支持的类型（如 MP3、WAV）。
• 检查服务器配置，确保允许从站点加载音频文件。

2. 使用事件触发钩子

由于加载音频是异步的，建议在加载事件触发钩子函数中执行播放操作。示例代码如下：

const music = new Audio('./1.mp3');
music.addEventListener("canplaythrough", event => {
  // 音频可以播放；如果权限允许则播放
  music.play();
});

3. 检查浏览器权限

某些浏览器会禁止非用户交互的播放。如果上述方法仍无法解决问题，可以尝试添加按钮，点击后触发播放。

以上就是为什么使用 new Audio() 播放背景音乐时，音乐无法播放？的详细内容，更多请关注其它相关文章！