HTML5 Audio Visualiser的问题

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），音频数据（Web Audio api）或图像数据（通过canvas 2d上下文），都受到跨域资源共享（或简称为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>

有关更多详细信息，请参见此链接。

HTML5 Audio Visualiser的问题

问题描述

1 个解决方案

解决方案1
1 已采纳

HTML5 Audio Visualiser的问题

问题描述

1 个解决方案

解决方案1 1 已采纳

解决方案1
1 已采纳