remove createMediaElementSource
<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>