title: The HTMLMediaElement passed to createMediaElementSource has a cross-origin resource, the node will output silence
body: <p>I was testing changing audio gain of a video. I created a sample HTML page, and the video file is on the same directory as the HTML file. There was no web server; I just created the file on my local disk and opened it with FireFox. The code is below, but when I clicked the button I got </p>
  
  <blockquote>
    <p>The HTMLMediaElement passed to createMediaElementSource has a
    cross-origin resource, the node will output silence.</p>
  </blockquote>
  
  <p>and the audio got muted. How can I fix this? I searched here and found <a href="https://stackoverflow.com/questions/51906591/is-it-possible-to-enable-webaudio-processing-for-cross-origin-resources-with-app">this</a>, and the answer was "The solution is to add crossOrigin="anonymous" attribute to corresponding audio element." but that did not seem to work.</p>
  
  <pre><code>   &lt;script crossOrigin="anonymous"&gt;
          function gain(value)
          {
              var vid = document.getElementById("testvideo");
  
              var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
              var gainNode = audioCtx.createGain();
              gainNode.gain.value = value;
  
              var source = audioCtx.createMediaElementSource(vid);
              ...
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;video id="testvideo" width="640", height="360" controls&gt;
          &lt;source src="sample.webm" type="video/mp4" crossOrigin="anonymous"/&gt;
      &lt;/video&gt;    
  
      &lt;div&gt;
          &lt;button onclick="gain(2)"&gt;Gain 2&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>