Render audio from Firebase storage with MediaElementAudioSourceNode

I have a react audio component library (https://github.com/clxrityy/react-audio).

When rendering audio from an external source (such as a firebase storage URL) normal <audio /> component, it works fine.

However, in my <Waveform /> component, where the code has variables like so:

const [analyzerData, setAnalyzerData] = useState<AnalyzerData>();
const [audioCtx, setAudioCtx] = useState<AudioContext>();
const [audioSrc, setAudioSrc] = useState<string>();
const audioElement = useRef<ElementRef<'audio'>>(null);
const sourceNode = useRef<MediaElementAudioSourceNode | null>();

(see the link for the full code)

I receive this error:

Access to audio at 'https://firebasestorage.googleapis.com/v0/b/MYPROJECT.appspot.com/o/audio%2Fcan%20we%20be%20118%20A.wav?alt=media&token=TOKEN' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've tried things like:

const src = await fetch("theFirebaseUrl", {
    headers: {
        "Access-Control-Allow-Origin": "*",
    }
}).then((res) => res.url);

And numerous other attempts, but no luck.

Does anyone know how to solve this?

Notes

• My firebase storage rules are fine, and as I said, it only doesn't work with MediaElementAudioSourceNode.
• I have minimal understanding of the web audio API, so I apologize if the solution is in front of my face and I'm not noticing.

Thanks in advance.

I solved this by:

1. Going to console.cloud.google.com

2. Creating a cors.json file in the cloud shell.

   • Setting origin to *.

   [
      {
          "origin": ["*"],
          "method": ["GET"],
          "responseHeader": ["Content-Type"],
          "maxAgeSeconds": 3600
       }
   ]
   

3. Then opening the terminal and running

   gcloud storage buckets update gs://MY_STORAGE_BUCKET.appspot.com --cors-file=cors.json