HTML5 音频可视化器的问题

Question

我正在试验我在网站上找到的代码。来源在这里：

http://themaninblue.com/experiment/webAudioAPI/Source.zip

现在的问题是：使用本地文件它工作正常，但是当我尝试连接到 Internet 上的文件时（基本上更改音频的 src 属性），它可以播放，但是我什么也听不见。此外，可视化工具没有做任何事情。

编辑：我在 HTML 代码中唯一更改的是：

<audio id="music" src="http://www.mfiles.co.uk/mp3-downloads/edvard-grieg-peer-gynt1-morning-mood.mp3" autoplay controls preload="auto" ></audio>

我还使用了 <body onload="init()"> 而不是事件侦听器。我没有改变任何其他东西

如何才能让可视化工具处理在线文件（甚至流）？

Answer 1

任何允许您读取和分析位和字节的内容，例如字节数组 (XMLHttpRequest)、音频数据（网络音频 api）或图像数据（通过 canvas 二维上下文）都受到限制通过 cross-origin resource sharing，或简称 CORS。

这与安全有关，如果源服务器不允许使用 CORS，并且源服务器（来源）与页面本身不同，所有浏览器都会阻止使用 CORS。

解决此问题的唯一方法是：

将文件复制到与页面加载来源相同的服务器（或来源）
配置远程服务器以允许使用 CORS - 如果您无权这样做，这将不是一个选项
在您自己的服务器上设置一个代理页面（与播放音频的页面相同），在服务器端加载音频文件并通过服务器将其传递给页面。

如果服务器允许使用 CORS，您可以尝试将 crossOrigin 属性添加到标签中：

<audio id="music" 
       crossOrigin = "anonymous"
       src="http://www.mfiles.co.uk/mp3-downloads/edvard-grieg-peer-gynt1-morning-mood.mp3" 
       autoplay 
       controls 
       preload="auto" >
</audio>

有关详细信息，请参阅 this link。

HTML5 音频可视化器的问题

Issues with HTML5 Audio Visualiser

html

javascript

html5-audio

html5-canvas