title: createMediaElementSource plays but getByteFrequencyData returns all 0's
body: <p>I am attempting to visualize audio coming out of an  element on a webpage. The source for that element is a WebRTC stream connecting to an Asterisk call via sip.js. The audio works as intended.</p>
  
  <p>However, when I attempt to get the frequency data using web audio api, it returns an array of all 0's, even though the audio is working. This seems be a problem with createMediaElementSource. If I call  getUserMedia and use createMediaStreamSource to connect my microphone to the input, I indeed get the frequency data returned.</p>
  
  <p>This was attempted in both Chrome 40.0 and Firefox 31.4. In my search I found similar errors with Android Chrome but my versions of desktop Chrome and Firefox seem like they should be functioning correctly. So far I have a feeling that the error may be due to the audio player getting it's audio from another AudioContext in sip.js, or something having to do with CORS. All of the demos that I have tried work correctly, but only use createMediaStreamSource to get mic audio, or use createMediaElementSource to play a file (rather than streaming to an  element).</p>
  
  <p>My Code: </p>
  
  <pre><code>var context = new (window.AudioContext || window.webkitAudioContext)();
  
      var analyser = context.createAnalyser();
      analyser.fftSize = 64;
      analyser.minDecibels = -90;
      analyser.maxDecibels = -10;
      analyser.smoothingTimeConstant = 0.85;
  
      var frequencyData = new Uint8Array(analyser.frequencyBinCount);
      var visualisation = $("#visualisation");
      var barSpacingPercent = 100 / analyser.frequencyBinCount;
      for (var i = 0; i &lt; analyser.frequencyBinCount; i++) {
              $("&lt;div/&gt;").css("left", i * barSpacingPercent + "%").appendTo(visualisation);
      }
      var bars = $("#visualisation &gt; div");
      function update() {
              window.requestAnimationFrame(update);
              analyser.getByteFrequencyData(frequencyData);
              bars.each(function (index, bar) {
                      bar.style.height = frequencyData[index] + 'px';
                      console.debug(frequencyData[index]);
              });
      };
  
  $("audio").bind('canplay', function() {
      source = context.createMediaElementSource(this);
      source.connect(analyser);
      update();
  });
  </code></pre>
  
  <p>Any help is greatly appreciated.</p>