CORS headers for accessing a file on another domain

Question

I am attempting to create an audio visualization program on Codepen. I have created my own Ubuntu web server with apache which allows me direct access to modify headers and configuration of the server.

While browsers can access files on a different domain, it requires special CORS headers to read the frequencies within the audio. To read audio frequencies, I must use createMediaElementSource to access audio information including the frequencies. When the browser sees this JavaScript method, it knows that there must be certain headers set on the server to allow access. Which brings us to the motives of this question: What headers need to be set?

All of the browsers I have tested return a variation of a CORS error. This is what the error looks like in Firefox although I've tested it in Chrome, Opera, and Safari with similar results:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://williamgreen.hopto.org/audioVisualization/song.mp3. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’).

The file returns 206 partial content. Here are the returned server headers (currently): Here are the sent headers (currently):

function log(text) {
  document.getElementById("log").textContent += text + "\n";
}

var audio, source, context;
var url = "http://williamgreen.hopto.org/audioVisualization/song.mp3";

document.addEventListener("DOMContentLoaded", function() {
  log("URL: " + url);
  
  log("Creating Audio instance from audio file");
  audio = new Audio(url);
  audio.crossOrigin="anonymous";
  
  audio.addEventListener("canplay", function() {
    log("Playing audio file through HTML5 Audio for 3 seconds");
    audio.play();
    
    setTimeout(function() {
      log("Creating Web Audio context");
      context = new (typeof AudioContext != "undefined" ? AudioContext : webkitAudioContext)();

      log("Calling createMediaElementSource on audio (switching to Web Audio)");
      source = context.createMediaElementSource(audio);
      
      setTimeout(function() {
        log("Connecting source to context destination");
        source.connect(context.destination);
        
        log("\nIf no sound can be heard right now, the problem was reproduced.");
      }, 1000);
    }, 3000);
  });
});

<div id="log"></div>

What do I need to change to get this working?

Michael Lorton · Answer 1 · 2016-12-23T19:22:45.367

2

My first thought is that the problem is your

Access-Control-Allow-Origin: *, *

I don't think it is understanding the *, * thing. Try just *.

Edit: you can check what the header really looks like with a command like this:

curl -v -o /dev/null http://williamgreen.hopto.org/audioVisualization/song.mp3

And, lo, it even works for me, yielding (among a lot of other headers):

< Access-Control-Allow-Origin: *

So that is hunky-dory.

Second, are you running this from a file: origin? That doesn't work on Chrome (I thought it would work on Firefox, but maybe that's changed). You have to run it from an http: or https: origin.

By "running from an file: origin" I mean, is the HTML file that is running that Javascript being loaded from an URL that beings with "file:". If so, that is not likely to work.

edited Dec 23 '16 at 19:22

answered Dec 23 '16 at 19:10

Michael Lorton

43,060
26
103
144

Thank you for answering. I tried `*` and I still have the same error. I think `*, *` is the formatting Firefox gives for that header. idk why it looks like that. I don't think that's how I had set it on the server. What is a `file:` origin? I'm not especially fluent at the server side. Thank you for answering. – www139 Dec 23 '16 at 19:18
ah, I think I know what a `file` origin is now. I read this answer http://stackoverflow.com/a/3744697/3011082 – www139 Dec 23 '16 at 19:20
No, the html file is on Codepen's servers. I think I'm close to getting it working (that's the codepen project with the media method which requires cores) http://codepen.io/www139/pen/RomreZ?editors=1010 – www139 Dec 23 '16 at 19:41
@www139 -- it works fine for me, if playing slightly repetitive house music can be considered "working". (J/K, I actually like the tune, but I am congenitally incapable of missing any chance to snark.) – Michael Lorton Dec 23 '16 at 19:43
lol. Yeah, it's "ok" music. I picked it for the visualization effects. It'll be cool once the frequency reading works. I'm going to give it a shot right now. I think it might work... – www139 Dec 23 '16 at 19:45
It's closer but I now have the error `The HTMLMediaElement passed to createMediaElementSource has a cross-origin resource, the node will output silence.` – www139 Dec 23 '16 at 19:50
I'll probably find better audio once I have it working. I picked that one because it doesn't have copy right. – www139 Dec 23 '16 at 19:52
Yes, I have it working!!!! I only needed to add `crossorigin="anonymous"` to the audio and it worked! – www139 Dec 23 '16 at 19:56
@www139 -- I liked the first song better, the new one is too Snoop-y for my taste. You should answer your own question, especially the part about the attribute to Audio. Pay it forward. – Michael Lorton Dec 23 '16 at 23:30
@molvolio what music do you like? Yeah, I've already answered one of the questions I've asked. I've been so involved with this issue over the last few months that it's difficult to keep track. Is it possible to merge questions? – www139 Dec 24 '16 at 01:21
@www139 -- anything by Annie Lennox or early Zombies. I don't think you can merge questions, but you can link from one to another. – Michael Lorton Dec 24 '16 at 01:36

CORS headers for accessing a file on another domain

1 Answers1

Linked