title: HTML5 Audio: createMediaElementSource breaks audio output
body: <p>I am learning webgl and I am going through <a href="https://www.patrick-wied.at/blog/how-to-create-audio-visualizations-with-javascript-html" rel="nofollow">this</a> tutorial to extract the frequencies from an mp3 file so they can be visualized.
  <br/><br/>
  I have it working where given an mp3 file it plays the file. But if I try to use <code>createMediaElementSource</code> to connect to <code>AudioContext</code>'s analyser to get the frequency data, it does not work.</p>
  
  <p><a href="https://jsfiddle.net/jn59mq4h/" rel="nofollow">Fiddle</a></p>
  
  <p>JS:</p>
  
  <pre><code>window.onload = function(e) {       
      document.getElementById('music-files').addEventListener('change', selectMusic, false);
  }
  
  var musicFiles = [];
  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  var audio;
  var audioSrc;
  var analyser;
  var bufferLength;
  var dataArray;
  
  function selectMusic(e) {   
      musicFiles = e.target.files;    
  }
  
  function getFreq(){
      requestAnimationFrame(getFreq);
      analyser.getByteFrequencyData(dataArray);
      console.log("&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;");
      console.log(dataArray[240])
  }
  
  function play(){    
      var num = Math.floor(Math.random()*musicFiles.length);
      console.log("playing=" + num);
      var musicFile = URL.createObjectURL(musicFiles[num]); 
      $("#music").attr("src", musicFile);
      document.getElementById('music').play();
  
      audio = document.getElementById('music');
      audioSrc = audioCtx.createMediaElementSource(audio);    
      analyser = audioCtx.createAnalyser();
      audioSrc.connect(analyser);
      bufferLength = analyser.frequencyBinCount;
      dataArray = new Uint8Array(bufferLength);
      getFreq();
  }
  
  function stop(){
      document.getElementById('music').pause();
  }
  </code></pre>
  
  <p>If you take a look at the fiddle, you can select an mp3 file and hit play and it will log one of the frequency bands in the browser console but there is no sound (atleast on my pc), which probably means it is playing the song but there is no sound.  But if you comment these lines below, it plays the song and I can hear it.</p>
  
  <p><a href="https://jsfiddle.net/1jp6x3eh/" rel="nofollow">Fiddle with commented code</a></p>
  
  <pre><code>/*audioSrc = audioCtx.createMediaElementSource(audio);  
      analyser = audioCtx.createAnalyser();
      audioSrc.connect(analyser);
      bufferLength = analyser.frequencyBinCount;
      dataArray = new Uint8Array(bufferLength);
      getFreq();*/
  </code></pre>
  
  <p><br/><br/>
  My setup: Windows 10/Chrome52
  <br/><br/>
  Any advice regarding this issue is appreciated. Thank you.</p>