I am working on a virtual piano application, and I’m having a lot of issues with trying to fetch audio files from github. Specifically, I keep getting the errors

Access to fetch at 'https://github.com/benvessely/virtual-piano/blob/main/sounds/c4-virtual-piano.mp3' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 

GET https://github.com/benvessely/virtual-piano/blob/main/sounds/c4-virtual-piano.mp3 net::ERR_FAILED 200 (OK)
@ piano.js:57 ready  

Uncaught (in promise) TypeError: Failed to fetch at createAudioBuffers (piano.js:57:26) at ready (piano.js:28:26) at piano.js:13:5

In my code, I am simply calling fetch via

const c4AudioURL = "https://github.com/benvessely/virtual-piano/blob/main/sounds/c4-virtual-piano.mp3";   
const c4AudioFetch = fetch(c4AudioURL);  

I am using Live Server on VSCode, so I tried to deploy my site to GH Pages to see if that would fix things, but I still got the errors. After trying two different CORS proxies to see if that would help, there was again no change.

Am I missing something here? I suppose It’s that possible that I’m missing something in my code or in the way I’m using Github, as I’m a pretty inexperience programmer. I’ve been stuck on this for a while, so I appreciate any ideas you might have!

New contributor

Ben Vessely is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

2