CODEWITHSUNDEEP
javascriptreactjsreact-player
Patrick Finnigan
Patrick Finnigan

Reputation: 21

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

Upvotes: 0

Views: 7868

Answers (2)

Deus
Deus

Reputation: 13

If you get this error:

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.

Use

const videopath = require("path");

and put the videopath into the <video> src tag.

Upvotes: 0

Joe Lloyd
Joe Lloyd

Reputation: 22483

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

Upvotes: 1

Related Questions