HTML5 Audio Visualiser的问题 [英] Issues with HTML5 Audio Visualiser
问题描述
我正在尝试在网站上找到的代码。它的来源是：
I am experimenting with code that I found on a website. The source of it is here:
http ：//themaninblue.com/experiment/webAudioAPI/Source.zip
现在的问题是：使用本地文件它可以正常工作，但是当我尝试连接到Internet上的文件（基本上从音频更改 src 属性），它播放，但我听不到任何声音。此外，可视化工具没有做任何事情。
Now the thing is: with a local file it works fine, but when I attempt to connect to a file that is on the Internet (basically changing the src attribute from audio), it plays, but I can't hear anything. Further, the visualizer is not doing anything.
编辑：我在HTML代码中唯一更改的内容是：
The only thing I changed in the HTML Code is:
<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（）> 而不是事件监听器。我没有改变任何其他东西
I also used <body onload="init()"> instead of the event listener. I haven't changed anything else
可以做什么使得可视化工具可以使用在线文件（甚至是流）？
What may be done such that the visualizer will work with online files (or even streams)?
推荐答案
允许您读取和分析位和字节的任何内容，例如字节数组（XMLHttpRequest），音频数据（Web Audio api） ）或图像数据（通过画布2d上下文）受跨源资源共享的限制，或简称CORS。
Anything that allows you to read and analyze bits and bytes such as byte arrays (XMLHttpRequest), audio data (Web Audio api) or image data (via canvas 2d context) are restricted by cross-origin resource sharing, or CORS for short.
它与安全性有关，如果源服务器不允许这样的使用，所有浏览器都会阻止CORS使用，并且源服务器（源）不同于页面本身。
It is related to security and all browsers will prevent CORS usage if the source server doesn't allow such usage, and the source server (origin) is not the same as the page itself.
解决这个问题的唯一方法是：
The only way to get around this is to either:
- 在页面加载时将文件复制到同一服务器（或源）
- 配置远程服务器以允许CORS使用 - 如果您没有访问权限，请执行此操作将不是一个选项
- 在您自己的服务器上设置一个代理页面（与播放音频的页面相同），在服务器端加载音频文件并通过服务器将其传递给服务器页面。
如果服务器允许使用CORS，您可以尝试将crossOrigin属性添加到标记中：
If the server allow CORS usage you can try to add the crossOrigin attribute to the tag:
<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的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
