javascript 由于 CORS 访问限制本地 mp3 文件，MediaElementAudioSource 输出零
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31308679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MediaElementAudioSource outputs zeros due to CORS access restrictions local mp3 file
提问by Adam Freymiller
I have the following html page that I'm trying to show a class for demonstrating an audio visualizer with an mp3 stored locally:
我有以下 html 页面，我试图显示一个类，用于演示带有本地存储的 mp3 的音频可视化器：
<!doctype html>
<html>
<head>
<header name = "Access-Control-Allow-Origin" value = "*" />
<style type = "text/css">
div#mp3_player{ width: 500px; height: 60px; background: #000; padding: 5px; margin: 50px auto;}
div#mp3_player > div > audio{ width: 500px; background: #000; float: left; }
div#mp3_player > canvas { width: 500px; height: 30px; background: #002D3C; float: left;}
</style>
<script>
//create new instance of audio
var audio = new Audio();
audio.src = 'C:/Users/Adam/Desktop/1901.m4a';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
window.addEventListener("load", initMp3Player, false);
function frameLooper(){
window.webkitRequestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00CCFF";
bars = 100;
for (var i = 0; i < bars; i++){
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i]/2);
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
function initMp3Player(){
document.getElementById('audio_box').appendChild(audio);
context = new AudioContext();
analyser = context.createAnalyser();
canvas = document.getElementById('analyser_render');
ctx = canvas.getContext('2d');
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
</script>
</head>
<body>
<div id = "mp3_player">
<div id = "audio_box"></div>
<canvas id = "analyser_render"></canvas>
</div>
</body>
I've gotten the mp3 file to play automatically before using all of the code in the script tag excluding what's below the line
在使用脚本标签中的所有代码之前，我已经让 mp3 文件自动播放，不包括该行下方的代码
audio.autoplay = true;
but when I include the frameLooper function I get the message "MediaElementAudioSource outputs zeros due to CORS access restrictions." Is there anyway to circumvent this since it's a local file?
但是当我包含 frameLooper 函数时，我收到消息“由于 CORS 访问限制，MediaElementAudioSource 输出零”。因为它是本地文件，所以有没有办法绕过这个？
回答by Fergal
Just after initializing the Audio object, add the following:
在初始化 Audio 对象之后，添加以下内容：
audio.crossOrigin = "anonymous";
This should prevent the CORS access restriction.
这应该可以防止 CORS 访问限制。
