Question

我正在尝试在网站上找到的代码。它的来源是：

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

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

编辑：我在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）或图像数据（通过画布2d上下文））的任何内容都受cross-origin resource sharing或CORS的限制短。

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

解决这个问题的唯一方法是：

将文件复制到与
配置远程服务器以允许使用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 Audio Visualiser的问题

1 个答案: