Getting "Cannot play media. No decoders for requested formats: text/html" Error when using react-player to play mp3 file

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

Solution

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'
/>