Setting cors on my GCP bucket not making a difference when accessing data from my bucket

Question

I set all my GCP bucket items to be accessible to the public. I also set cors on my bucket using gsutil cors set cors-config.json gs://myBucketName. My cors config file looks like this: [{"origin": ["http://example.com"],"responseHeader": ["Content-Type"],"method": ["GET"],"maxAgeSeconds": 3600}]. Now I have two problems. The first one is when I try to access an audio file from my bucket and play it on my website I get the error Access to audio at 'http://publicIpAddr/fileName.mp4' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

NOTE: I am accessing the file via an IP address because I set up a load balancer with cloud cdn enabled which cached objects matching a path pattern I specified.

This is how I am accessing the audio file on my website:

JS

const audioElem = document.querySelector('#audioElem')
audioElem.crossOrigin = 'use-credentials';
audioElem.setAttribute('src', 'http://publicIpAddr/fileName.mp4')
audioElem.play()

The second problem is if I remove the audioElem.crossOrigin = 'use-credentials'; line from my JS code. The audio starts playing without an error. The issue is the audio plays from any domain regardless of it being specified as an allowed origin on my bucket cors options. Why is this happening? What am I missing? Thanks in advance.