Question

我在亚马逊s3上有一个mp3的链接（aws mp3设置为公开）音频播放器运行良好。

但是当我尝试制作可视化工具时，一旦连接到音频层，就会出现CORS错误。我不明白为什么会这样。

我一直在使用dbN示例作为analyserNode作为基础 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 =“anonymous”，那么我什么都得不到，音频播放器就不会播放音轨

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

'make public'之后的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，允许所有来源和所有标头

Answer 1

我最终想出了经过数小时的研究和实验后该做些什么。截至撰写本文时，很少有文档在线提供如何执行此操作的文档。我希望人们会觉得这很有帮助。

了解CORS：

CORS是Cross Origin Resoruce Sharing的首字母缩写。 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。

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

MediaElementAudioSource由于CORS访问限制而输出零

1 个答案: