title: CORS headers for accessing a file on another domain
body: <p>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.</p>
  
  <p>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 <code>createMediaElementSource</code> 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?</p>
  
  <p>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:</p>
  
  <blockquote>
    <p>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="http://williamgreen.hopto.org/audioVisualization/song.mp3" rel="nofollow noreferrer">http://williamgreen.hopto.org/audioVisualization/song.mp3</a>. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’).</p>
  </blockquote>
  
  <p>The file returns <code>206 partial content</code>.
  Here are the returned server headers (currently):
  <a href="https://i.stack.imgur.com/juzS7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/juzS7.png" alt="Audio file returned headers"></a>
  Here are the sent headers (currently):
  <a href="https://i.stack.imgur.com/PofDF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PofDF.png" alt="audio file send headers"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="log"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What do I need to change to get this working?</p>