CORS issue from audio file in same directory?

General Web Dev
1

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>

We also have, in the JavaScript:

const audioElement = document.querySelector('audio');

And the line where that throws the error:

audioElement.play();

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.

2

Please tell us a bit more about your local setup. Are you running your own web server on your laptop and serving the html through that or are you just writing an HTML file?

What happens if you don’t specify the crossorigin attribute at all? Does it work then?

3

I am setting this up locally just for the purpose of running the tutorial. I wasn’t planning to put this tutorial’s code on a web server. The laptop is Windows 10. I click-run the index.html or “Open With…” and pick a browser. I use Atom, and the project folder has three files: index.html, style.css, and outfoxing.mp3.

When the crossorigin attribute is omitted, Firefox complains as follows:

The HTMLMediaElement passed to createMediaElementSource has a cross-origin resource, the node will output silence.

Chrome’s error is similar:

MediaElementAudioSource outputs zeroes due to CORS access restrictions for [file name specified]

I can follow the tutorial by putting in the https file address that is used in the CodePen version, and have gotten what I can, for now, from that introductory tutorial. This error message caught me by surprise, indicating my understanding of CORS is too shallow to account what is going on!

Eventually (working towards this), I intend to use Spring/Thymeleaf and Web Audio API to directly load PCM into an AudioBuffer, and play sounds (of max 2 seconds length) via the client’s browser. Since this is my first delve into the Web Audio API, I’m checking out the tutorials.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.