React中音频播放异常，导入MP3/WAV文件报错如何解决？

问题描述 #

尝试直接用相对路径引入音频文件时无法播放：

<audio controls>
   <source src="./audio/sound.mp3" type="audio/mpeg" />
</audio>

改用ES模块导入后出现模块解析错误：

import sound from './audio/sound.mp3'

<audio controls>
   <source src={sound} type="audio/mpeg" />
</audio>

错误提示：

Module not found: Error: Can't resolve './notes/c.mp3' in the src

解决方案 #

1. Create React App（CRA）环境 #

CRA默认支持音频等静态资源的导入，注意以下要点：

• 路径校验：先确认音频文件的实际路径与代码中导入路径完全匹配，比如错误提示中的./notes/c.mp3和你代码里的./audio/sound.mp3是否存在拼写、目录结构差异，尤其注意Linux/macOS系统区分文件名大小写。
• ES模块导入方式：直接导入后即可使用，CRA会自动处理资源打包：

  import sound from './audio/sound.mp3';
  
  function AudioPlayer() {
    return (
      <audio controls>
        <source src={sound} type="audio/mpeg" />
        你的浏览器不支持音频播放
      </audio>
    );
  }
  
  export default AudioPlayer;
  

• public目录替代方案：若不想用ES模块导入，可将音频文件放在项目根目录的public文件夹下，直接使用根路径访问：

  <audio controls>
    <source src="/audio/sound.mp3" type="audio/mpeg" />
  </audio>
  

  注：public目录下的文件不会被webpack处理，路径直接基于public根目录。

2. Vite搭建的React项目 #

Vite天然支持静态资源导入，只需保证路径正确即可：

• 导入方式与CRA一致：

  import sound from './audio/sound.mp3';
  
  <audio controls src={sound} />
  

• 同样支持将音频放在public目录下，使用根路径访问。

3. 自定义Webpack配置的React项目 #

若为自行配置webpack的项目，需添加对应loader处理音频文件：

• 安装file-loader：

  npm install file-loader --save-dev
  

• 在webpack配置文件中添加规则：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(mp3|wav)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'audio/'
              }
            }
          ]
        }
      ]
    }
  };
  

  配置完成后即可正常导入音频文件。

通用排查点 #

• 确认文件存在：手动检查项目目录中是否存在目标音频文件，避免漏放或误删。
• 检查依赖配置：非CRA/Vite的项目，必须确保webpack配置了对应的资源解析规则，否则无法识别音频文件模块。

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