Access to fetch at '####' from origin 'http://localhost:3000' has been blocked by CORS policy

[Omdaprog]

Describe the bug

Hi , im trying to play a song that hosted in firebase and this is the link "https://firebasestorage.googleapis.com/v0/b/musicplayer-458d4.appspot.com/o/music%2FMr.Kitty%20-%20After%20Dark.mp3?alt=media&token=74ac8d78-0216-4c07-9b46-b9726fc040a4", when i implement it to html audio tag it's works nicely

this is my code

[tambien]

This is likely because the Web Audio API and HTMLAudioElement have different security policies.

This is from the Web Audio API Spec:

HTMLMediaElement allows the playback of cross-origin resources. Because Web Audio allows inspection of the content of the resource (e.g. using a MediaElementAudioSourceNode, and an AudioWorkletNode or ScriptProcessorNode to read the samples), information leakage can occur if scripts from one origin inspect the content of a resource from another origin.

I think you'll need to add a CORS header to the object you're retrieving.

[Omdaprog]

@tambien do you have any idea how to do that ?

[tambien]

It's something which is different for every server/setup. if you're using firebase to serve the audio, i would check the firebase docs for adding CORS to anobject.

[Omdaprog]

Ok , thanks