javascript - HTML5 音频、网络音频 API、CORS 和 Firefox

Question

我一直在努力让它正常运行，所以现在运气不好。

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

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

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

这是我的 jFiddle。我用注释将音频播放器控件脚本与可视化工具脚本分开，以便您了解它在 Firefox 中的工作方式，以及它在 Firefox 中的工作方式。

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

我可以在这里调用 CORS 吗？

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

Answer 1

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

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

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

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

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