title: WEB Audio API Error: Cannot read Property 'getByteFrequencyData'
body: <p>I am attempting to make an audio bar visualizer.</p>
  
  <p>Reading up on Web Audio API, I have the following code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;audio controls&gt;  
        &lt;source src="video/DownToEarth.mp3" type="audio/mp3"&gt;
  &lt;/audio&gt;
  &lt;canvas id="analyser_render"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>var audioCtx, myAudio, canvas, ctx, source, analyser, bufferLength, dataArray, bars, bar_x, bar_width, bar_height;
  
  window.addEventListener("load", initMp3Player, false);
  
  function initMp3Player(){
      var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      var myAudio = document.querySelector('audio');
      var source = audioCtx.createMediaElementSource(myAudio);
  
      var analyser = audioCtx.createAnalyser();
      var bufferLength = analyser.frequencyBinCount;
      var dataArray = new Uint8Array(bufferLength);
      analyser.minDecibels = -90;
      analyser.maxDecibels = -10;
  
      var canvas = document.getElementById('analyser_render');
      ctx = canvas.getContext('2d');
  
      source.connect(analyser);
      analyser.connect(audioCtx.destination);
      frameLooper();
  }
  
  function frameLooper(){
      window.requestAnimationFrame(frameLooper);
  
      analyser.getByteFrequencyData(dataArray);
  
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#00CCFF';
      bars = 100;
      for (var i = 0; i &lt; bars; i++) {
          bar_x = i * 3;
          bar_width = 2;
          bar_height = -(dataArray[i] / 2);
          ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
      }
  }
  </code></pre>
  
  <p>Now everything looks to be in order, but every time I try to run it I continue to get an error:
  <strong><em>Uncaught TypeError: Cannot read property 'getByteFrequencyData' of undefined</em></strong>
  I have data going INTO dataArray, but the getByteFrequencyData doesn't seem to be getting anything out of it.</p>
  
  <p>I read from <a href="https://stackoverflow.com/questions/14677221/web-audio-api-analyser-node-getbytefrequencydata-returning-blank-array"><strong>THIS POST</strong></a> that I might want to include some lines about the min and max decibel range, but that didn't make an ounce of difference, I am still receiving this error.</p>