由于 CORS 访问限制本地 mp3 文件，MediaElementAudioSource 输出零
Posted
技术标签:
【中文标题】由于 CORS 访问限制本地 mp3 文件，MediaElementAudioSource 输出零【英文标题】：MediaElementAudioSource outputs zeros due to CORS access restrictions local mp3 file 【发布时间】：2015-09-27 07:24:31 【问题描述】：我有以下 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>
在使用脚本标签中的所有代码之前，我已经让 mp3 文件自动播放，不包括行下的代码
audio.autoplay = true;
但是当我包含 frameLooper 函数时，我收到消息“MediaElementAudiosource 由于 CORS 访问限制而输出零”。既然是本地文件，有没有办法规避这个问题？
【问题讨论】：
你不能像那样从文件系统访问文件，使用网络服务器并从相同的域、协议和端口访问它们 安装 Python 并查看如何使用 Python 从当前文件夹启动本地 Web 服务器：python -m http.server 8000 docs.python.org/3/library/http.server.html - 通过 http 访问时，许多 CORS 限制变得更加合理。
@adeneo 这些东西是在 web 框架项目的 wsgi 文件中配置的吗？
【参考方案1】：
在初始化 Audio 对象后，添加以下内容：
audio.crossOrigin = "anonymous";
这应该可以防止 CORS 访问限制。
【讨论】：
仅当服务器具有正确的 Access-Control-Allow-Origin 设置时，如果 OP 一直试图从他的文件系统（而不是服务器）获取文件，这真的不太可能发生 也可以设置<audio crossorigin="anonymous">。无论哪种方式，您都需要访问 Web 服务器，因此您可以确保它发送 Access-Control-Allow-Origin: * 标头。
最简单/最短的直接有效答案！喜欢，谢谢！
在<audio crossorigin="anonymous"> 上设置这个是唯一对我有用的东西以上是关于由于 CORS 访问限制本地 mp3 文件，MediaElementAudioSource 输出零的主要内容，如果未能解决你的问题，请参考以下文章
由于 CORS 限制，无法使用 firebase 在本地进行测试
由于 CORS 访问限制，MediaElementAudioSource 输出零
由于 Rails/AJAX 应用程序上的 CORS，无法在本地访问 IBM Watson API
尝试访问本地 json 文件时出现 CORS 错误 [重复]
从本地 html 文件到服务器的 JSON 请求引发 CORS 错误：CORS 策略已阻止从源“null”访问 <URL> 处的 XMLHttpRequest