使用react-app从docker播放本地音频wav文件

Question

我正在尝试使用react-player播放本地wav文件。

我不确定以下内容。播放器是否支持wav文件?当我通过docker运行react-app时，我应该在url prop中放什么?

Docker-compose volume setup

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.。

在控制台中，我得到一个空src prop

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

这是组件

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

Answer 1

对于那些可能偶然发现这个问题的人。我了解到，如果没有在应用程序中导入声音，就不能从React App中播放本地文件。这是出于安全原因，我能够发现这一点，因为托管声音播放得很好，但本地文件给出了一个错误。这让我创建了一个API端点，将wav文件流式传输到React应用程序。