DEV Community

loading...
Cover image for Loading Local Files in Firefox and Chrome

Loading Local Files in Firefox and Chrome

Dan
brb getting better at stuff
・2 min read

One of the many cool things about working in the browser is you can just drag and drop a local HTML file into it and see your work. No local server running or anything, just files and a browser, like Adam and Eve. But due to browser security settings, developing this way can still trigger CORS-related errors when you load in local files, such as an mp4.

Let's see how to eliminate pesky CORS errors while doing this most foundational style of local development!

The Problem

So, I just spent about 10 minutes trying to load in a local audio file, and I kept getting the following error in the browser console:

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

In Chrome you may see something like:

MediaElementAudioSource outputs zeroes due to CORS access 
restrictions for file:///Users/dengel/code/experi/dengel.m4a
Enter fullscreen mode Exit fullscreen mode

I tried a few things that did not work:

  • adding the crossorigin="anonymous attribute to the <audio> tag
  • passing in the absolute filepath to the .mp4

These attempts just ended up raising different errors. It turns out you need to look to the browser settings to get past these errors.

Fixing this in Firefox

In Firefox, first you need to navigate to about:config in the Firefox browser, search for the privacy.file_unique_origin setting, and set it from true to false by double-clicking it. Voila, super easy!

Fixing this in Chrome

If you're working in Chrome it's a little more laborious and requires using the Terminal (I'm on a Mac, but judging from this StackOverflow post, for PowerShell users it's not much different):

  1. In the Chrome address bar, navigate to chrome://version
  2. On this page, find and copy the value of "Command Line". It will look like /Applications/Google Chrome.app/Contents/MacOS/Google Chrome.
  3. Open your Terminal and paste in the file path to the Chrome executable you just copied
  4. If it's not recognizing the path, the spaces in the file path might need to be escaped with a forward-slash like Google\ Chrome.app
  5. Before you hit enter, two more things to add to this command
  6. Add the following flag to the end of your command: --allow-file-access-from-files
  7. Finally, add the folder or file you want to open at the end, like audio.html

Your final command in Terminal will look something like this (assuming you're within your project folder):

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome  
--allow-file-access-from-files audio.html 
Enter fullscreen mode Exit fullscreen mode

If the command is successful, it should open up a Chrome window with your folder or file that you specified in the last step.

One gotcha I encountered was I needed to close my already-open instance of Chrome for the allow-file-access-from-files flag to register.

After that, my audio file was loaded and I got on my merry way. Hope this saves you a few minutes of searching!

Discussion (0)