问题
I am building an audio application that have two servers involved. Server A is dedicated for audio streaming, while B servers a HTML page that loads audio sources from A.
The audios are OK to play. However, when I try to do some magic with WebAudio API, I got message saying
"MediaElementAudioSource outputs zeroes due to CORS access restrictions for {{URL of audio src}}"
This is fair because WebAudio spec said
HTMLMediaElement allows the playback of cross-origin resources. Because Web Audio allows inspection of the content of the resource (e.g. using a MediaElementAudioSourceNode, and a ScriptProcessorNode to read the samples), information leakage can occur if scripts from one origin inspect the content of a resource from another origin.
To prevent this, a MediaElementAudioSourceNode MUST output silence instead of the normal output of the HTMLMediaElement if it has been created using an HTMLMediaElement for which the execution of the fetch algorithm labeled the resource as CORS-cross-origin.
The question is what if I do want to have this "Cross-origin" inspection?
I have full control on the outputs of both servers, so I came up with two ideas.
- Add
Access-Control-Allow-Originheaders. This is what worked for CORSXMLHttpRequest. However, it does not work for WebAudio API. Do I need some other headers? - Do some trick on domain mapping or headers, to let browser think A and B are (logically) the same domain. So far I have no idea if it is actually feasible.
Should I have more options? Any suggestion is appreciated.
Note:
Proxying with server B is not an option for me, because the purpose of A is to offload such work from B.
回答1:
Found answer by myself.
The solution is to add crossOrigin="anonymous" attribute to corresponding audio element.
来源：https://stackoverflow.com/questions/51906591/is-it-possible-to-enable-webaudio-processing-for-cross-origin-resources-with-app