Using with files with disabled CORS

I want to play sound from Amazon S3 from bucket where I don’t have access to change CORS.

When I create <audio> without this library then it works

<audio>
  <source src={url} type="audio/ogg"/>
</audio>

How I use ReactAudioPlayer:

<ReactAudioPlayer src={url}/>

It renders:

<audio class="react-audio-player " id="" preload="metadata" src="__URL__">
  <p>
    <!-- react-text: 508 -->Your browser does not support the <!-- /react-text --> 
    <code>audio</code><!-- react-text: 510 --> element.<!-- /react-text -->
  </p>
</audio>

Error:

Failed to load https://s3-eu-west-1.amazonaws.com/…: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://…’ is therefore not allowed access.

Is this bug or I just can’t use this library without changing CORS?

[justinmc]

@kkshyu thanks for following up and glad you got this fixed! Hopefully it will help other people with the same problem.

[kkshyu]

@justinmc thx for your reply

I use create-react-app development server and browse on Chrome. In the console, i will see like this:

i just realize the problem. It is not about RAP. Actually firebase should be setup up the cors.json to make js in server load the resource. Thanks for your insight!

here is the reference: https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin/37765371#37765371