HTML5 音频、网络音频 API、CORS 和 Firefox答案

【问题标题】：HTML5 Audio, Web Audio API, CORS and FirefoxHTML5 音频、网络音频 API、CORS 和 Firefox
【发布时间】：2015-02-10 07:22:15
【问题描述】：

这几天我一直在努力让它正确运行，但没有运气。

我创建了一个自定义音频播放器，它可以访问 S3 Amazon 服务器上的 MP3。音频播放器具有由 Javascript 启用的自定义控件，以及由 Web Audio API 实现的 Audio Visualizer。

现在我遇到的问题是：在 Chrome 上工作正常。 Safari 说它无法运行 Web Audio API，但音频仍会播放。在 Firefox 中，整个事情都关闭了。点击播放...什么都没有。我认为这是一个 CORS 问题，所以我们在服务器上设置了正确的标头，但仍然没有。但是...如果我停用 Web Audio API 可视化工具，那么我可以让播放器正常播放。

http://jsfiddle.net/murphy1976/yqqf7uL1/1/

这是我的 jFiddle。我已经用 cmets 将音频播放器控件脚本与 Visualizer 脚本分开了，这样您就可以看到它在 Firefox 中的工作方式，以及它在 Firefox 中的不工作方式。

我在某处读到，我遇到的这个问题可能是 Firefox 的一个错误。我只是想确定一下，这样我就可以停止为此敲打我的头骨了。

我可以在这里给 CORS 打电话吗？：

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

【问题讨论】：

您的服务器是否使用Access-Control-Allow-Origin: * 响应标头提供音频资源？通常，脚本无法读取跨域资源，除非在提供资源时来自服务器的 CORS 响应标头允许。（如果您没有提供 CORS 响应，Chrome 似乎在此处错误地允许您阅读资源。）
@apsillers 我们已按照此处列出的正确步骤进行操作：docs.aws.amazon.com/AmazonS3/latest/dev/cors.html，但仍然无法获取该标头。我们只能得到一个错误：拒绝访问。我想我对为什么在 Chrome 或 Safari 中没有收到此错误感到困惑。
根据this bug，Firefox 似乎忽略了应该允许它读取跨域音频文件的 CORS 标头。似乎 Chrome 过于宽松（即使缺少 CORS 也可以播放），而 Firefox 过于严格（即使存在 CORS 也不播放）。是否可以在与播放器相同的来源上托管媒体？
很遗憾，由于我们业务的性质，这不是一个选项。如果它是一个错误，那么它就是一个错误，我们只需要等到它被解决或修复。再次感谢您的帮助。
Web Audio API 有一段路要走，才能看到广泛成熟的实现（该错误已存在一年多）。您现在可以实施的一个可能的解决方案是使用同源reverse proxy 来获取媒体（例如，http://myorigin.com/fetch?path=http://otherorigin.com/song.mp3）。您需要设置一个服务器来获取媒体并在您的源上提供它。（请注意，它不适用于受凭据保护的内容。）

标签： javascript html firefox audio cross-domain

【解决方案1】：

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

https://bugzilla.mozilla.org/show_bug.cgi?id=937718

【讨论】：

【解决方案2】：

同源策略规定在某个源上运行的脚本不能从另一个源读取资源。（来源是一个域，加上一个方案和端口，例如http://foo.example.com:80。）

请注意，同源策略不会阻止跨源媒体向用户显示。相反，它会阻止 scripts 以编程方式读取跨域资源。考虑<img> 标签：example.com 上的页面可以显示来自other.com 的跨域图像，但example.com 页面上的脚本无法读取该图像的内容。用户可以看到；页面不能。

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

请注意，Chrome 不会阻止此类跨域文件读取音频文件，这是不正确的行为。

正确的解决方案是让您的媒体服务器使用 CORS Access-Control-Allow-Origin: * HTTP 响应标头提供音频文件。但是，这目前是does not work in Firefox，这是不正确的行为。如果 Firefox 希望有一个兼容的实现，这个问题最终会得到修复。

【讨论】：

As of Version 42，Chrome 使用 Web Audio API 正确阻止跨域文件访问。您可以创建一个简单的 Audio 对象来播放跨域音频，但您不能从中创建一个 MediaElementAudioSourceNode 来分析原始音频数据。
很好地跟进您的选择：stackoverflow.com/questions/30603872/…
我从技术上理解您的回答，但这是一个安全问题吗？还是与安全无关？（例如，我指的是读取 MP3 文件的内容）。或者是为了保护他人的资产，而不是为了安全？
此外，即使我将来自一个域的文件的标头设置为“*”，Chrome 仍会错误地继续阻止我读取另一个域中的文件。（这是一个 MP3 文件）。例如，查看此对话：twitter.com/CodePen/status/945810502399049728?s=09
这是 Chrome 中的 CORS 错误吗？ bugs.chromium.org/p/chromium/issues/detail?id=798043 还是我不知道自己在做什么？