MediaElementAudioSource outputs zeroes due to CORS access restrictions
<p>I have a link to an mp3 on amazon s3 (the aws mp3 is set to public)
The audio player runs fine.</p>

<p>But when I try to make a visualizer, as soon as I connect to the audioplayer there is a CORS error. I don't understand why this should be so. </p>

<p>I have been using the MDN sample for analyserNode as the basis
<a href="https://developer.mozilla.org/en/docs/Web/API/AnalyserNode" rel="nofollow">https://developer.mozilla.org/en/docs/Web/API/AnalyserNode</a></p>

<pre><code>&lt;audio id="audio-player-console" src="${AWS_songUrl}" autoplay&gt;
    &lt;p&gt;Your browser does not support this audio player &lt;/p&gt;
&lt;/audio&gt;
</code></pre>

<p>Just to clarify, so long as no attempt to connect for analyserdata, the audioplayer runs the tracks without problem.</p>

<p>If I add crossorigin="anonymous" to the audio tag then I get nothing at all and the audio player won't play the track</p>

<pre><code>&lt;audio id="audio-player-console" src="${AWS_songUrl}" crossorigin="anonymous" autoplay&gt;
    &lt;p&gt;Your browser does not support this audio player &lt;/p&gt;
&lt;/audio&gt;
</code></pre>

<p>My AWS CORS configuration after 'make public' has been set</p>

<pre><code> &lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
&lt;CORSRule&gt;
    &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
    &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
    &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
    &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
&lt;/CORSRule&gt;
&lt;/CORSConfiguration&gt;
</code></pre>

<p>Here is where I try to connect the audio tag to the audiocontext for a visualizer, which is one it starts failing the CORS check</p>

<pre><code>canvasCtx = visualizerCanvas.getContext("2d")
audioCtx =  new (window.AudioContext  || window.webkitAudioContext)()
var audioSrc = audioCtx.createMediaElementSource(aPlayer)
var analyser = audioCtx.createAnalyser()
audioSrc.connect(analyser)
analyser.fftSize = 2048
var bufferLength = analyser.frequencyBinCount
var dataArray = new Uint8Array(bufferLength)
analyser.getByteTimeDomainData(dataArray)
</code></pre>

<p>I just don't know what I can do. I have set the AWS config to public, allow all origins and all headers</p>