0

I've been trying to play a single audio file with react-player but it doesn't seem to be reading the file properly. This is the React prop that I'm using to play my file.

<ReactPlayer 
    forceAudio
    controls
    width='100%'
    url='../../../../../build/assets/audio/Big_O_Opening_US_Version.mp3'
    type = 'audio/mp3'
/>

Whenever my app renders the player doesn't read the file and gives me the following error in the Firefox console:

Cannot play media. No decoders for requested formats: text/html

Other browsers that I've used don't

Community
  • 1
  • 1
Patrick Finnigan
  • 21
  • 1
  • 6

1 Answers1

1

Add a file loader in webpack for mp3

Your loader needs to understand the file you use, you can use the standard file-loader in webpack to bundle these files to your build. There's a question on how to use this here. Then import the file as a variable and pass it to your component. Import is important because thats how webpack sees what to bundle.

import mp3 from '../../../../../build/assets/audio/Big_O_Opening_US_Version.mp3';

...

<ReactPlayer 
    forceAudio
    controls
    width='100%'
    url={mp3}
    type = 'audio/mp3'
/>
Joe Lloyd
  • 19,471
  • 7
  • 53
  • 81
  • Tried this out, but I ended up with this error in node: `Module not found: You attempted to import ../../../../../build/assets/audio/Big_O_Opening_US_Version.mp3 which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.` – Patrick Finnigan Mar 26 '20 at 09:17
  • yeah, correct your path or move your assets folder inside your project – Joe Lloyd Mar 26 '20 at 09:59