阅读音频频率时,如何绕过音频文件的CORS限制



我试图在codepen.io(http://codepen.io/www139/pen/pen/olrjaz?editors=0010)上创建音频可视化程序。我已经构建了自己的Web服务器,用于上传该项目的音频。您可以在没有CORS问题的情况下收听音频(http://williamgreen.hopto.org/audiovisalization/song.mp3)。但是,音频可视化程序需要访问读取声音频率。当我尝试阅读音频频率时,我会出现此错误:

MedialementAudioSource由于http://williamgreen.hopto.org/audiovisualization/song.mp3 而导致的CORS访问限制引起的零输出零。

频率返回为0s。

当我添加此行时:

audio.crossOrigin = 'anonymous';

我不再收到错误,但音频不会加载。

我还尝试根据https://stackoverflow.com/a/11691776/3011082设置.htaccess中的CORS访问。这个问题似乎也很有趣,但缺乏我需要的信息(由于CORS访问限制本地MP3文件,MedialementAudioSource输出零是零)。我还引用了此(http://enable-cors.org/server_apache.html)。

有什么建议吗?是否需要设置Apache/PHP标头?我该如何工作?

我不久前问了这个问题(如何使用apache2在Linux Weberver上设置CORS访问?就是为什么我问这个问题。除了高中外,我的大脑一直在工作这个难题。)

编辑:我问了这个问题,其中揭示了更多信息。CORS标题CORS标头很可能是在另一个域上访问文件

的问题。

我最终弄清楚了几个小时和数小时的研究和实验后该怎么做。从本文开始,几乎没有文档在线显示如何做到这一点。我希望人们会发现这有帮助。

理解CORS:

CORS是 c ross o rigin r esoruce s haring的首字母缩写。CORS是在不同域之间共享/访问信息的新标准。基本上,CORS是一种使用服务器标头告诉浏览器是否允许浏览器访问或与另一台服务器上的特定文件进行交互的方法。虽然您可以加载大多数内容而不必担心COR(例如图像,音频,视频甚至其他网页),但与这些元素的互动需要服务器的特殊许可。就我而言,我正在尝试从另一台服务器上的音频文件读取频率。在这种情况下,我试图访问服务器上特殊标题的授权的信息。

浏览器支持非常好,但是,如果您支持较旧的浏览器,则可能需要在此处查看支持表(http://caniuse.com/#search = cors)

我做了什么:

  • 启用了.htaccess的使用(我认为您可以使用apache2.conf.conf或000-default.conf完成同一操作,但是.htaccess文件更容易编辑和维护)。这些文件用于设置Apache的标题和设置。我通过转到/etc/apache2/并编辑apache2.conf启用了.htaccess文件。确保您的<Directory /var/www/>条目匹配以下内容:

    <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"。保存文件。

  • 使用此命令sudo service apache2 restart重新启动Apache。如果提示说明您的密码。

  • 使用音频,我添加了crossorigin="anonymous"属性。您可以在此处阅读有关CORS设置(Crossorigin)的更多信息(https://developer.mozilla.org/en-us/docs/web/html/cors_settings_attributes),我想您可以使用AJAX和XHR请求设置此。

不同版本的Apache可能具有不同的文件名或标准。检查以确保您的版本是否正确。我正在Ubuntu服务器上运行Apache 2.4.18。

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

最新更新