title: remove createMediaElementSource
body: <p>I've google all over for this issue, but couldn't find anything.
  I am in a situation where I need to remove a <code>source = createMediaElementSource</code> so that I can create it again. I am using an audio analyzer which has to load each time you load a specified track using ajax. As soon as you go to another page, and then back, the analyzer is gone. Therefore I need to re-initialize it somehow. </p>
  
  <p>My code:</p>
  
  <pre><code>var analyserElement = document.getElementById('analyzer');
  var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x,
      bar_width, bar_height;
  
  function analyzerSetElements() {
      var analyserElement = document.getElementById('analyzer');
  }
  
  function analyzerInitialize() {
      if (context == undefined) {
      context = new AudioContext();
      }
      analyser = context.createAnalyser();
      canvas = analyserElement;
      ctx = canvas.getContext('2d');
      source = context.createMediaElementSource(audio);
      source.connect(analyser);
      analyser.connect(context.destination);
      frameLooper();
  }
  
  function analyzerStop(){
      context = undefined;
      analyser = undefined;
      source = undefined;
  }
  
  function frameLooper() {
      canvas.width = canwidth;
      canvas.height = canheight;
      ctx.imageSmoothingEnabled = false;
      fbc_array = new Uint8Array(analyser.frequencyBinCount);
      analyser.getByteFrequencyData(fbc_array);
      ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
      ctx.fillStyle = "white"; // Color of the bars
      function valBetween(v, min, max) {
          return (Math.min(max, Math.max(min, v)));
      }
      var beatc = fbc_array[2] / 4;
      var beatround = Math.round(beatc);
      //if (beatround &lt; 10) {
      //    ctx.globalAlpha = '0.1125';
      //}
      //else {
      //    ctx.globalAlpha = '0.' + beatround;
      //}
      bars = canbars;
      for (var i = 0; i &lt; bars; i += canmultiplier) {
          bar_x = i * canspace;
          bar_width = 2;
          bar_height = -3 - (fbc_array[i] / 2);
          ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
      }
      window.requestAnimationFrame(frameLooper);
      console.log('Looped')
  }
  </code></pre>
  
  <p>So when I run <code>analyzerInitialize()</code> after running <code>analyzerStop()</code> I still get this error: </p>
  
  <blockquote>
    <p>audio.js:179 Uncaught DOMException: Failed to execute
    'createMediaElementSource' on 'AudioContext': HTMLMediaElement already
    connected previously to a different MediaElementSourceNode</p>
  </blockquote>
  
  <p>How can I make it so running <code>analyzerInitialize()</code> will never fail?</p>