Mur*_*976 5 javascript audio firefox html5 cross-domain
我一直试图让这个运行正常所以几天没有运气.
我创建了一个自定义音频播放器,可以访问S3亚马逊服务器上的MP3.音频播放器具有由Javascript启用的自定义控件,并且可通过Web Audio API实现Audio Visualizer.
现在我遇到的问题是:在Chrome上运行正常.Safari右边说它不能运行Web Audio API,但音频仍然会播放.在Firefox中,整个事情都会关闭.点击播放......没有.我认为这是一个CORS问题,所以我们在服务器上设置了正确的标题,但仍然没有.但是......如果我停用Web Audio API可视化工具,那么我可以让玩家玩得很好.
http://jsfiddle.net/murphy1976/yqqf7uL1/1/
这是我的jFiddle.我已将音频播放器控件脚本与Visualizer脚本中的注释分开,这样您就可以看到它在Firefox中的工作方式,以及它在Firefox中的工作方式.
我在某处读到,我遇到的这个问题可能是Firefox的一个错误.我只是想确保这样我就可以不停地击打我的头骨了.
我可以在这里打电话给CORS吗?:
<source crossorigin="anonymous" src="audioFiles/35022797.mp3" id="srcMP3" type="audio/mp3">
Run Code Online (Sandbox Code Playgroud)
aps*_*ers 20
同源策略表示在某些源上运行的脚本无法从另一个源读取资源.(原点是域,加上方案和端口,如http://foo.example.com:80.)
请注意,同源策略不会阻止跨源媒体显示给用户.相反,它可以防止脚本以编程方式读取跨源资源.考虑<img>标记:页面上example.com可以显示来自的跨源图像other.com,但是example.com页面上的脚本无法读取该图像的内容.用户可以看到它; 页面不能.
Web Audio API可以读取音频文件的内容.如果音频文件来自不同的来源,则同源策略不允许这种读取.用户可以收听跨源音频文件,但页面上的脚本无法读取文件的内容.当您尝试将跨源音频文件提供给分析器脚本时(例如,您可以在画布上绘制可视化),同源策略应该阻止您.您试图违反同源策略,并且浏览器通过拒绝播放允许您读取文件内容的方式播放音频来正确阻止您.
请注意,Chrome不会阻止音频文件的此类跨域文件读取,这是不正确的行为.
正确的解决方案是让您的媒体服务器使用CORS Access-Control-Allow-Origin: *HTTP响应标头提供音频文件.但是,这目前在Firefox中不起作用,这是不正确的行为.如果Firefox希望有一个兼容的实现,这将最终得到修复.