I imported the code and mp3 resource from an introductory tutorial about the Web Audio API to my laptop. When attempting to run it locally, I get an error that seems to pertain to CORS permissions.
Error in Firefox:
Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable.
Error in Chrome:
Uncought (in promise) DOMException: The element has no supported sources.
However, when I swap in the link used in the CodePen version, the same code works fine.
Why isn’t a file located in the very same directory on my laptop as the html and css valid?
The audio tag (that does not work) follows:
<audio src="outfoxing.mp3" crossorigin="anonymous"></audio>
const audioElement = document.querySelector('audio');
And the line where that throws the error:
The page source shows the mp3 file link is valid, as does copying the audio tag’s src value in Dev mode and posting the URL to the browser.
If I click on the mp3 file on my laptop directly, it plays. The issue seems to be simply that reading from the laptop directory is disallowed, but I don’t understand why.
I’ve opened up a couple documents on CORS but am finding them a difficult read, and am having trouble locating information pertinent to my specific situation. It would be great to get some explanation as to what is going on here, so I could better understand how CORS works.