Play local audio wav file with react-app from docker

Question

I'm trying to use react-player to play local wav files.

I'm not sure of the following. Does the player support wav files? When I'm running the react-app through docker what should I put in the url prop?

Docker-compose volume setup

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

My app is running on http://localhost:3000

I tried the following

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

I tried the static method ReactPlayer.canPlay(path)

I get Invalid URI. Load of media resource failed..

In the console I get an empty src prop

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

Here is the component

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

score 0 · Answer 1 · answered Jan 09 '23 at 20:48

For people who might stumble upon the question. I learned that one cannot play local files from React App without importing the sounds in the app. This is for security reasons and I was able to find that out because hosted sounds played fine but local files gave an error. This led me to create an API endpoint which streams the wav file to the React app.

Play local audio wav file with react-app from docker

1 Answers1