问题
I am experimenting with code that I found on a website. The source of it is here:
http://themaninblue.com/experiment/webAudioAPI/Source.zip
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.
Edit: 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>
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)?
回答1:
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.
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:
- Copy the file to the same server (or origin) as the page is loading from
- Configure the remote server to allow CORS usage - if you don't have access to do so this will not be an option
- Set up a proxy page on your own server (the same as the page playing the audio) which on server side loads the audio file and hand it through the server to the page.
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>
See this link for further details.
来源：https://stackoverflow.com/questions/30634060/issues-with-html5-audio-visualiser