MediaElementAudioSource输出零由于CORS访问限制

我必须在亚马逊S3（AWS的MP3设置为公共）的MP3链接的音频播放器运行正常。MediaElementAudioSource输出零由于CORS访问限制

但是当我尝试做一个可视化工具，只要我连接到audioplayer存在CORS错误。我不明白为什么会这样。

我一直在使用analyserNode的MDN样本为基础 https://developer.mozilla.org/en/docs/Web/API/AnalyserNode

<audio id="audio-player-console" src="${AWS_songUrl}" autoplay> 
    <p>Your browser does not support this audio player </p> 
</audio>

只是为了澄清，只要不试图为analyserdata连接时，运行audioplayer没有问题的轨道。

如果我添加crossorigin =“匿名”的音频标签，然后我在所有得到什么和音频播放器不能播放的曲目

<audio id="audio-player-console" src="${AWS_songUrl}" crossorigin="anonymous" autoplay> 
    <p>Your browser does not support this audio player </p> 
</audio>

后“公开”我的AWS CORS配置已经设置

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
</CORSRule> 
</CORSConfiguration>

这里是我尝试将音频标签连接到audiocontext的可视化，这是一个启动失败的CORS检查

canvasCtx = visualizerCanvas.getContext("2d") 
audioCtx = new (window.AudioContext || window.webkitAudioContext)() 
var audioSrc = audioCtx.createMediaElementSource(aPlayer) 
var analyser = audioCtx.createAnalyser() 
audioSrc.connect(analyser) 
analyser.fftSize = 2048 
var bufferLength = analyser.frequencyBinCount 
var dataArray = new Uint8Array(bufferLength) 
analyser.getByteTimeDomainData(dataArray)

我只是不知道我能做什么。我已经设置了AWS配置为public，允许所有的起源和所有的头

来源

2016-10-02 Jope

我有永远同样的问题。我花了好几个小时试图弄清楚这一点。我问过两个SO问题（每个问题都收到upvotes），我刚刚在askubuntu.com上提出了一个问题。我希望我能尽快找出解决办法，然后我可以在这里重新发布。 – www139

我认为这个问题与音频标记已经创建一个之后可视化器节点导致第二次cors检查有关。此时文件位于不同位置，因此cors检查失败。但我对此并不确定。我通过完全放弃音频标签并仅为整个播放器使用audiocontext对象解决了这个问题：joegrundman.github.io/gplayer-react/ – Jope

我终于想通了小时的研究和实验小时后做什么。在写这篇文章的时候，很少有文档可以在网上看到如何做到这一点。我希望人们会觉得这很有帮助。

了解CORS：

CORS是跨源Resoruce共享的缩写。 CORS是不同领域之间共享/访问信息的新标准。 CORS基本上是一种使用服务器头文件告诉浏览器是否允许访问或与另一台服务器上的特定文件进行交互的方法。虽然你可以加载大多数事情，而不必担心CORS（如图像，音频，视频，甚至其他网页），这些元素的互动，需要从服务器特别许可。就我而言，我试图从另一台服务器上的音频文件中读取频率。在这种情况下，我试图访问需要服务器上特殊标题授权的信息。

浏览器支持是非常好的，但是，如果你是支持旧的浏览器，你可能想看到这里支持表（http://caniuse.com/#search=cors）

我做了什么：

启用使用的.htaccess的（我想你可以做到同样的事情apache2.conf或000-default.conf但.htaccess文件更容易修改和维护）。这些文件用于设置apache的标题和设置。通过转到/ etc/apache2 /并编辑了apache2.conf，我启用了.htaccess文件。确保您的条目匹配下面：

<Directory /var/www/> 
     Options Indexes FollowSymLinks 
     AllowOverride All 
     Require all granted 
</Directory>

我设置在我的.htaccess文件的标题，可让来自Codepen访问。在要共享的文件所在的目录中创建一个.htaccess文件。你只想分享你所需要的，或者你可能会造成安全风险。在你的.htaccess文件中输入：

Header set Access-Control-Allow-Origin: "http://websiteWantingToAccessYourFile.com"。

保存您的文件。用此命令重新启动Apache sudo service apache2 restart。如果有提示，请输入密码。随着音频，我添加了crossorigin="anonymous"属性。你可以在这里阅读更多关于CORS设置（crossorigin）（https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes）我想你可以用ajax和xhr请求来设置它。不同版本的Apache可能有不同的文件名或标准。检查并确保您的版本正确无误。我在我的Ubuntu服务器上运行Apache 2.4.18。

请告诉我这是否可以改善。我花了很多时间了解这一点，但我不是专家。在评论中发布您的问题或建议。 :)

来源

2016-12-29 17:14:04 www139

您可以发布设置crossorigin =“anonymous”属性的代码吗？ –

MediaElementAudioSource输出零由于CORS访问限制

回答

相关问题