Я пытаюсь создать программу аудио визуализации на Codepen. Я создал свой собственный веб-сервер Ubuntu с Apache, который позволяет мне прямой доступ для изменения заголовков и конфигурации сервера.

Хотя браузеры могут получать доступ к файлам в другом домене, для чтения частот в аудио требуются специальные заголовки CORS. Чтобы прочитать аудио частоты, я должен использоватьcreateMediaElementSource для доступа к аудио информации, включая частоты. Когда браузер видит этот метод JavaScript, он знает, что на сервере должны быть установлены определенные заголовки, чтобы разрешить доступ. Что подводит нас к мотивам этого вопроса: какие заголовки нужно установить?

Все протестированные мной браузеры возвращают ошибку CORS. Вот как выглядит ошибка в Firefox, хотя я тестировал ее в Chrome, Opera и Safari с похожими результатами:

Блокирован перекрестный запрос: одна и та же политика происхождения запрещает чтение удаленного ресурса вhttp://williamgreen.hopto.org/audioVisualization/song.mp3, (Причина: заголовок CORS ‘Access-Control-Allow-Origin’ не совпадает с nu (null) ’).

Файл возвращается206 partial content, Вот возвращенные заголовки сервера (в настоящее время):Вот отправленные заголовки (в настоящее время):

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>

Что мне нужно изменить, чтобы это работало?