音频播放遇DOM Exception 404无支持源，请求技术排查帮助

问题描述 #

我用以下代码尝试播放音频：

const playMusic = (track) => {
         currentSong.src = "/songs/" + track + ".mp3";
         currentSong.play().catch(error => {
             console.error('Error playing music:', error);
    });
};

尝试通过 http://127.0.0.1:3000/songs/ 加载音频时，持续出现404错误，报错信息：

DOM Exception: Failed to load because no supported source was found.

播放其他歌曲也有同样错误，直接通过URL访问音频文件也失败，求技术帮助。

排查与解决步骤 #

• 核对文件路径与结构
  确认项目根目录下存在 songs 文件夹，且目标 .mp3 文件确实在该目录内。注意文件名大小写要完全匹配（部分系统区分大小写，比如 Song1.mp3 和 song1.mp3 会被判定为不同文件），调用 playMusic 时传入的 track 参数要和文件名（不含后缀）一致。

• 配置静态资源访问权限
  如果使用后端框架（如Express），需配置静态资源目录，让服务器能正确映射到 songs 文件夹：

  // Express示例：允许直接访问songs目录下的文件
  app.use('/songs', express.static('songs'));
  

  如果是前端项目（如Vue/React），要把 songs 文件夹放在框架指定的静态资源目录（比如Vue的 public、React的 public 文件夹），避免打包时资源被遗漏。

• 验证完整URL的可访问性
  在浏览器地址栏输入完整音频URL（如 http://127.0.0.1:3000/songs/test.mp3），如果仍返回404，说明文件不存在或路径配置错误；如果能正常播放，检查代码中 track 参数的传递是否存在空格、拼写错误等问题。

• 确认音频文件有效性
  排除文件损坏或格式兼容问题：换一个已知正常的MP3文件放入 songs 目录测试，确认浏览器能正常解析该格式的音频。

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