Javascript HTML5音频、网络音频API、CORS和Firefox

我一直在努力让它正确运行，所以几天来没有运气

我创建了一个自定义音频播放器，可以在S3亚马逊服务器上访问MP3。音频播放器具有Javascript启用的自定义控件，以及Web音频API实现的音频可视化工具

现在我遇到的问题是：在Chrome上工作很好。Safari说它不能运行网络音频API，但是音频仍然可以播放。在Firefox中，整个程序都会关闭。点击播放。。。没有什么。我认为这是CORS的问题，所以我们在服务器上设置了正确的头，但仍然没有设置任何内容。但是如果我停用Web Audio API可视化工具，那么我可以让播放器正常播放

这是我的小提琴。我用注释将Audio Player控件脚本与Visualizer脚本分开，这样您就可以看到它在Firefox中是如何工作的，以及它在Firefox中是如何不工作的

我在某个地方读到，我遇到的这个问题可能是Firefox的一个bug。我只是想确定一下，这样我就不会再为这事伤脑筋了

我可以打电话到这里的CORS吗

<source crossorigin="anonymous" src="audioFiles/35022797.mp3" id="srcMP3" type="audio/mp3">

---

同源策略规定，在某些源上运行的脚本无法从另一个源读取资源。（来源是一个域，加上一个方案和端口，如

http://foo.example.com:80

）

请注意，同源策略不会阻止向用户显示跨源介质。相反，它阻止脚本以编程方式读取跨源资源。考虑<代码> <代码>标签：页面上的代码>示例.COM<代码>可以显示一个跨来源的图像，从代码>其他.COM<代码>，但是在代码>示例.COM< /代码>页面上的脚本不能读取该图像的内容。用户可以看到它；该页无法打开

Web音频API可以读取音频文件的内容。如果音频文件来自不同的来源，则同一来源策略不允许这种读取。用户可以收听跨源音频文件，但页面上的脚本无法读取该文件的内容。当您尝试将跨源音频文件馈送到analyzer脚本中（例如，以便您可以在画布上绘制可视化）时，同源策略应阻止您。您试图违反同源策略，浏览器拒绝以允许您读取文件内容的方式播放音频，从而正确阻止您

请注意，Chrome不会阻止音频文件的这种跨源文件读取，这是不正确的行为

---

正确的解决方案是让您的媒体服务器使用CORS

Access Control Allow Origin::

HTTP响应头为音频文件提供服务。然而，这目前是不正确的行为。如果Firefox希望有一个兼容的实现，这将最终得到解决。

确认Firefox在跨域源上使用createMediaElementSource方法时存在错误：

---

您的服务器是否为音频资源提供

访问控制允许源：

响应头？通常，脚本无法读取跨源资源，除非在服务资源时服务器的CORS响应头允许它。（如果您没有提供CORS响应，那么Chrome在允许您读取资源方面似乎是错误的。）@apsillers我们已经按照此处概述的正确步骤进行了操作：但仍然无法获取该标题。我们只能得到一个错误：访问被拒绝。我想我不明白为什么我没有在Chrome或Safari中看到这个错误。看起来Firefox忽略了CORS头，这应该允许它读取跨源音频文件。Chrome似乎过于宽容（即使缺少CORS也会播放），而Firefox则过于严格（即使有CORS也不会播放）。是否可以在与您的播放机相同的来源上主持媒体？不幸的是，由于我们业务的性质，这不是一个选项。如果它是一个bug，那么它就是一个bug，我们只能等待它被解决或修复。再次感谢您的帮助。Web Audio API在看到广泛成熟的实现之前还有很长的路要走（这个bug已经存在一年多了）。您现在可以实现的一个可能的解决方案是使用同一来源获取媒体（例如，

http://myorigin.com/fetch?path=http://otherorigin.com/song.mp3

）。您需要设置一个服务器来获取媒体并将其提供给您的源服务器。（注意，它不适用于受凭据保护的内容。），Chrome使用Web Audio API正确阻止跨源文件访问。您可以创建一个简单的

Audio

对象来播放跨源音频，但您不能从中创建

MediaElementAudioSourceNode

来分析原始音频数据。请继续了解您的选项：我从技术上理解您的答案，但这是一个安全问题吗？还是不是为了安全？（例如，我指的是阅读MP3文件的内容）。或者是为了保护他人的资产，而不是为了安全？此外，即使我将一个域中的文件的标题设置为“*”，Chrome仍会错误地阻止我读取另一个域中的文件。（这是一个MP3文件）。例如，请看下面的对话：这是Chrome中的CORS错误吗？还是我只是不知道自己在做什么？