Docker部署React项目中用react-player播放本地WAV文件的问题

问题背景 #

我尝试用ReactPlayer播放本地WAV文件，遇到两个问题：

1. ReactPlayer是否支持WAV格式？
2. 在Docker运行React应用时，url属性应该配置什么路径？

我的Docker Compose卷配置：

volumes:
  - /Users/user/app/sounds:/app/audioExport

应用运行在http://localhost:3000，我试过以下几种路径：

var path = "http://localhost:3000/app/audioExport/sound.wav"
var path = "/app/audioExport/sound.wav"
var path = "/Users/user/app/sounds/sound.wav" 

调用静态方法ReactPlayer.canPlay(path)时出现错误：Invalid URI. Load of media resource failed.，控制台显示audio标签的src属性为空：

<audio src="" style="width: 100%; height: 100%;" preload="auto" controls=""crossorigin="true"></audio>

我的ReactPlayer组件代码：

<ReactPlayer 
          className='react-player fixed-bottom'
          controls = {true}
          width='100%'
          height='100%'
          type="audio/wav"
          forceAudio = {true}
          config={{
            file: {
              attributes: {
                crossOrigin: "true",
              }
            }
          }}
          url={path}
        />

解答 #

1. ReactPlayer是否支持WAV格式？ #

支持。ReactPlayer底层依赖HTML5的<audio>标签，所有主流浏览器（Chrome、Firefox、Safari等）都原生支持WAV音频格式。你设置的type="audio/wav"和forceAudio={true}配置是正确的，格式本身不是问题，核心矛盾出在路径配置。

2. Docker环境下的正确路径配置 #

你尝试的几种路径都无法工作，原因如下：

• /Users/user/app/sounds/sound.wav：这是本地主机的文件系统路径，浏览器无权直接访问本地文件（除非是用户手动选择的文件，而非硬编码路径）。
• /app/audioExport/sound.wav：这是Docker容器内部的路径，浏览器运行在宿主机器，无法直接访问容器内的文件系统。
• http://localhost:3000/app/audioExport/sound.wav：React开发服务器默认只会serve项目根目录下的public文件夹作为静态资源，/app/audioExport不在静态资源目录范围内，所以无法通过该URL访问。

正确解决方案

方案一：将音频目录挂载到React应用的public静态资源目录
修改Docker Compose的volumes配置，把本地音频目录挂载到React项目的public子目录下（假设你的React项目代码在容器内的/app目录，public是默认的静态资源目录）：

volumes:
  - /Users/user/app/sounds:/app/public/audio

然后在代码中使用相对路径访问：

var path = "/audio/sound.wav"

方案二：通过后端服务提供音频文件访问
如果你的项目有后端服务，可以让后端serve/app/audioExport目录下的文件，前端通过后端的接口URL访问，例如：

var path = "http://localhost:8000/audio/sound.wav"

方案三：自定义React开发服务器的静态资源目录
如果你使用create-react-app，可以通过修改package.json或者使用serve工具自定义静态资源目录。例如，安装serve后运行：

serve -s public -l 3000 --public /app/audioExport

不过这种方式不如方案一直接高效。

额外注意事项 #

• 确认sound.wav文件存在于挂载的目录中，且文件名大小写与代码中的一致（Linux容器区分大小写）。
• 若仍有跨域问题，确保你的React开发服务器允许访问该静态资源目录，当前配置的crossOrigin: "true"是合理的。

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