React动态播放数据库音频：非导入路径报错解决方法

嘿，我来帮你搞定这个音频播放的问题！你遇到的错误本质是Create React App的静态资源处理规则导致的——src目录下的文件如果不通过import引入，webpack不会把它们打包到最终的输出文件夹里，当你直接请求../audio-lib/soundTest.mp3时，服务器找不到这个文件，返回的是React的404页面（Content-Type为text/html），所以浏览器会报错说不支持这个类型。

下面是具体的解决步骤：

1. 调整音频文件的存放位置 #

把你的audio-lib文件夹整个移到项目根目录的public文件夹下，最终路径应该是：public/audio-lib/soundTest.mp3。

为什么要放public里？因为Create React App会把public目录下的所有文件原封不动地复制到最终的构建文件夹中，并且可以直接通过网站根路径访问这些资源。

2. 修改React组件代码 #

去掉不需要的import语句，直接给audioSrc赋值为相对于网站根目录的绝对路径：

// 移除这行导入语句
// import soundTest from "../audio-lib/soundTest.mp3"

class AudioPlayer extends React.Component {
  state = { 
    audioSrc: "/audio-lib/soundTest.mp3" // 直接用根路径
  };

  // 如果需要动态切换音频，可以加个方法
  switchAudio = (newSrc) => {
    this.setState({ audioSrc: newSrc });
    // 切换后可以自动播放（可选）
    this.player.load();
    this.player.play();
  };

  render () {
    return(
      <div>
        <audio controls ref={ ref => this.player = ref} >
          <source src={this.state.audioSrc} type="audio/mp3"/>
        </audio>
        {/* 示例：动态切换按钮 */}
        <button onClick={() => this.switchAudio("/audio-lib/anotherSound.mp3")}>
          切换到另一个音频
        </button>
      </div>
    );
  }
}

3. 原理说明 #

• 当你用/audio-lib/soundTest.mp3时，浏览器会请求http://localhost:3000/audio-lib/soundTest.mp3，这个路径对应public文件夹下的文件，服务器能正确返回音频文件（Content-Type为audio/mp3），就能正常播放了。
• 动态切换音频时，只要给audioSrc赋值对应的根路径（确保文件在public/audio-lib下存在），调用load()方法刷新音频源，就能切换播放了。

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