我正在尝试在 Codepen 上创建一个音频可视化程序。我使用 apache 创建了自己的 Ubuntu Web 服务器，它允许我直接访问以修改服务器的标头和配置。
虽然浏览器可以访问不同域上的文件，但它需要特殊的 CORS 标头来读取音频中的频率。要读取音频频率，我必须使用createMediaElementSource访问包括频率在内的音频信息。当浏览器看到这个 JavaScript 方法时，它知道服务器上必须设置某些标头才能允许访问。这让我们想到了这个问题的动机：需要设置哪些标题？
我测试过的所有浏览器都会返回 CORS 错误的变体。 尽管我在 Chrome、Opera 和 Safari 中测试过该错误，结果类似，但 Firefox 中的错误是这样的：
跨源请求被阻止：同源策略不允许读取远程资源http://williamgreen.hopto.org/audioVisualization/song.mp3。 （原因：CORS 标头“Access-Control-Allow-Origin”与“(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>我需要更改什么才能使其正常工作？
我的第一个想法是问题出在你身上
Access-Control-Allow-Origin: *, *
我不认为这是理解*, *事物。尝试一下*.
Edit:您可以使用如下命令检查标头的实际情况：
curl -v -o /dev/null http://williamgreen.hopto.org/audioVisualization/song.mp3
而且，瞧，它甚至对我有用，产生（在许多其他标头中）：
< Access-Control-Allow-Origin: *
所以这真是太好了。
其次，你是从一个file:起源？这在 Chrome 上不起作用（我以为它会在 Firefox 上起作用，但也许情况已经改变了）。你必须从一个运行它http: or https: origin.
我所说的“从文件运行：origin”是指从带有“file:”的 URL 加载正在运行的 Javascript 的 HTML 文件。如果是这样，那不太可能起作用。