Audio context breaks when switching to a new audio source

Question

I am using chrome and I have an HTML audio element hooked up to an analyzer like this:

            var audio = document.getElementById('audio');
            audio.src = "http://127.0.0.1:5000/api/getfile/new.wav";
            var ctx = new AudioContext();
            var analyser = ctx.createAnalyser();
            var audioSrc = ctx.createMediaElementSource(audio);

            audioSrc.connect(analyser); //breaks here on 2nd run 
            analyser.connect(ctx.destination);

And once finished, I call a reset method which passes in the four variables declared here, and I try to rest/reinitialize so I can use them for the next file that gets passed in from the same api/source:

            audioSrc.disconnect();//analyser);
            analyser.disconnect();//ctx.destination);
            audio.src = "";
            ctx.close();

But it does not seem to disconnect properly, as I get this error:

SimpleUpload.vue?3533:299 Uncaught (in promise) DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.

Here is the HTML:

        <div id="audiovis">
            <div v-if="loading"
                class="loadspin">
                <img class="spinner" src="./Wedges-3s-207px-trans.gif" width="80" height="80">
            </div>
            <canvas id='canvas' width="800" height="150"></canvas>
            <br>
            <br>
            <audio crossOrigin="anonymous"
                :src = "showVisualizer"
                id = "audio" controls>
                audio element not supported
                <!-- "http://127.0.0.1:5000/api/getfile/new.wav"  -->
            </audio>
        </div>

And the python Flask API:

@app.route('/api/getfile/<audiofile>')
def send_file(audiofile):
    try:
        return send_from_directory(os.getcwd(),filename=audiofile, as_attachment=True)
    except FileNotFoundError:
        abort(404)