title: Cannot read property 'addEventListener' of null--- But ID is there
body: <p>I want to use the web audio API and make an audio visualization.</p>
  
  <p>Im following this <a href="http://ianreah.com/2013/02/28/Real-time-analysis-of-streaming-audio-data-with-Web-Audio-API.html" rel="nofollow">tutorial</a> but i get this error :</p>
  
  <pre><code>Cannot read property 'addEventListener' of null
  </code></pre>
  
  <p>in this part of the code:</p>
  
  <pre><code>audioElement.addEventListener("canplay", function() {
  var source = context.createMediaElementSource(audioElement);
  source.connect(context.destination);
  </code></pre>
  
  <p>});</p>
  
  <p>I do have an id called player in the html like so : </p>
  
  <pre><code>&lt;audio id="player" src="tune.wav"&gt;&lt;/audio&gt;
  </code></pre>
  
  <p>My full code is this :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var context = new AudioContext(); // Create audio container 
  var request = new XMLHttpRequest();
  
  
  
  var dataArray = new Float32Array(bufferLength);
  
  var analyser = context.createAnalyser();
      analyser.smoothingTimeConstant = 0.3;
      analyser.fftSize = 1024;
      analyser.getFloatFrequencyData(dataArray);
  var bufferLength = analyser.frequencyBinCount;
  
  
  
  
  var audioElement = document.getElementById("player");
  
  audioElement.addEventListener("canplay", function() {
      var source = context.createMediaElementSource(audioElement);
      source.connect(context.destination);
  });
  
  
  
  function start(){ 
  
      
      request.open("GET", "tune.wav", true);
      request.responseType = "arraybuffer"; // Read as binary data 
  
      request.onload = function(){ 
          var data = request.response;        
          audioRouting(data);
      };  
  
      request.send(); 
  }
  
  function stop() { 
  source.stop(context.currentTime); // stop the source immediately 
  }
  
  // Create Buffered Sound Source 
  function audioRouting(data) { 
      source = context.createBufferSource(); // Create sound source 
      context.decodeAudioData(data, function(buffer){ // Create source buffer from raw binary 
      source.buffer = buffer; // Add buffered data to object 
      source.connect(context.destination); // Connect sound source to output 
  
      playSound(source); // Pass the object to the play function 
      }); 
  }
  
  // Tell the Source when to play 
  function playSound() { 
  source.start(context.currentTime); // play the source immediately 
  }
  
  console.log();
  
  
  $( document ).ready(function() {
  
      $( ".play" ).click(function() {
      start();
      console.log("yo");
      });
  
      $( ".stop" ).click(function() {
      stop();
      });
  
  });</code></pre>
  </div>
  </div>
  </p>