HTML5音频，网络音频API，CORS和Firefox [英] HTML5 Audio, Web Audio API, CORS and Firefox
问题描述
我一直试图让这个正确天左右，现在没有运气运行。
我创建了一个自定义的音频播放器，一个可访问亚马逊S3服务器上的MP3。音频播放器具有通过启用Javascript自定义控件和音频可视化的网络音频API来实现。
现在我遇到的问题是这样的：在Chrome做工精细。 Safari浏览器进行正确的说，它不能运行网络音频API，但音频仍将发挥。在Firefox中，整个事情关闭。点击播放...什么都没有。我认为这是一个CORS问题，所以我们设置了服务器，仍然没有正确的头。不过......如果我停用网络音频可视化的API，那么我可以让玩家玩就好了。
http://jsfiddle.net/murphy1976/yqqf7uL1/1/
下面是我的jFiddle。我已经分居的音频播放器控制与评论从展示台脚本脚本，所以你可以看到它是如何工作在Firefox，以及它将如何不工作在Firefox。
我读的地方，这个问题是我运行到可能是Firefox的一个bug。我只是想确保这样我就可以停止跳动我的脑壳这个了。
我能提出一个电话CORS这里：
＆lt;信源crossorigin =匿名SRC =语音文件/ 35022797.mp3ID =srcMP3TYPE =音频/ MP3＆GT;
同样的原产地政策说，剧本上的一些渊源运行无法从其他产地阅读资源。 （的原点是一个域，再加上计划和端口，如 http://foo.example.com:80 ）
注意，同源策略被不prevent跨域媒体的显示的用户。相反，它prevents的脚本的以编程方式读取跨域资源。考虑＆LT; IMG＆GT; 标签：关于 example.com A页面可以显示从<一个跨域图像code> other.com ，但在一个脚本 example.com 的页面无法的阅读的内容该图像。用户可以看到它;页面无法
网络音频API可以读取的音频文件的内容。如果音频文件来自不同的产地，这种阅读不是由同源策略允许。用户可以听一个跨源音频文件，但页面上的脚本无法读取该文件的内容。当您尝试喂跨域音频文件到分析器脚本（例如，让你可以画在画布上可视化），同源政策应该阻止你。您正在尝试违反同源策略，而浏览器被拒绝的方式，将让你阅读文件内容播放音频正确地阻止你。
需要注意的是Chrome不prevent这种跨域文件中读取音频文件，这是不正确的行为。
正确的解决办法是让你的媒体服务器成为了CORS的音频文件访问控制允许来源：* HTTP响应报头。但是，目前这不会在Firefox ，这是不正确的行为工作。如果Firefox希望有一个兼容的实现，这将是最终解决。
I have been trying to get this to run correctly so days now with no luck.
I have created a custom audio player, that accesses an MP3 on a S3 Amazon server. The audio player has custom controls enabled by Javascript, and a Audio Visualizer made possible by the Web Audio API.
Now the problem I am running into is this: Work fine on Chrome. Safari out right says it can't run the Web Audio API, but the audio will still play. In Firefox, the entire thing shuts down. Click play... nothing. I thought it was a CORS issue, so we set the proper headers on the server and still nothing. BUT... if I deactivate the Web Audio API visualizer, then I can get the player to play just fine.
http://jsfiddle.net/murphy1976/yqqf7uL1/1/
Here is my jFiddle. I have separated the Audio Player controls Script from the Visualizer Script with comments so you can see how it will work in Firefox, and how it will NOT work in Firefox.
I read somewhere that this issue that I'm running into MAY be a bug with Firefox. I just want to make sure so that I can stop beating my skull over this.
Could I put a call to CORS here?:
<source crossorigin="anonymous" src="audioFiles/35022797.mp3" id="srcMP3" type="audio/mp3">
The same-origin policy says that scripts run on some origin cannot read resources from another origin. (An origin is a domain, plus a scheme and port, like http://foo.example.com:80.)
Note that the same-origin policy does not prevent cross-origin media from being displayed to the user. Rather, it prevents scripts from programmatically reading cross-origin resources. Consider the <img> tag: a page on example.com can show a cross-origin image from other.com, but a script on example.com's page cannot read the contents of that image. The user can see it; the page cannot.
The Web Audio API can read the contents of audio files. If an audio file is from a different origin, this kind of reading is not allow by the same-origin policy. A user can listen to a cross-origin audio file, but a script on the page cannot read the contents of the file. When you attempt to feed a cross-origin audio file into an analyzer script (e.g., so that you can draw a visualization on a canvas), the same-origin policy should stop you. You are attempting to violate the same-origin policy, and the browser is correctly stopping you by refusing to play the audio in way that would allow you to read the file contents.
Note that Chrome does not prevent such cross-origin file reading for audio files, and this is incorrect behavior.
The correct solution is to have your media servers serve the audio files with a CORS Access-Control-Allow-Origin: * HTTP response header. However, this currently does not work in Firefox, which is incorrect behavior. If Firefox hopes to have a compliant implementation, this will be fixed eventually.
这篇关于HTML5音频，网络音频API，CORS和Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
