How can I always display the frequencies of the audio object currently playing on a Canvas object?

I am currently programming an audiovisualizer for my own web player. My goal is to always display the frequencies of the currently playing audio object on a canvas object even if this audio object will be changed.

To explain: Whenever Play is pressed, the initPlayer function is called with the corresponding audioElement.

var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
var audio = [document.getElementById("aBleibBeiUns"), document.getElementById("aOffline"), document.getElementById("aLeuchtturm"), document.getElementById("aImmerBegleiten"), document.getElementById("aCan'tHelpFallingInLove"), document.getElementById("aDerGedanke"), document.getElementById("aGefälltMir"),document.getElementById("aGL713"),document.getElementById("aDuBistDa"),document.getElementById("aAllOfMe"),document.getElementById("aCelloSuiteNo2"),document.getElementById("aDerSchwan"),document.getElementById("aRhapsodie")];    

function initPlayer(audio){

    document.getElementById('audioselect').appendChild(audio);
    context = new AudioContext(); //THE NUMBER IS LIMITED TO 6

    analyser = context.createAnalyser();
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    try{
        source = context.createMediaElementSource(audio);  //HOW CAN I RECREATE THE SOURCE ITEM OVER AND OVER AGAIN OR REMOVE THE CONNECTION TO THE PREVIOUS SOURCE NODE?
        source.connect(analyser);
    }catch(e){console.log(e);}
    analyser.connect(context.destination);

    new frameLooper();      
}


//graphics refresh

function frameLooper(){

    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount); 
    analyser.getByteFrequencyData(fbc_array);

    ctx.clearRect(0,0, canvas.width, canvas.height);
    ctx.fillStyle = '#333'; //Color of the Bars
    bars = 400;
    for (var i = 0; i < bars; i++){
        bar_x = i * 6;
        bar_width = 5;
        bar_height = -(fbc_array[i] / 2);
        //fillRect(x,y,width,height)            
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);  
    }       
}


Here is the code from which the initPlayer function is executed:

function aselect(snmbr){    
    var audio = [document.getElementById("aBleibBeiUns"), document.getElementById("aOffline"), document.getElementById("aLeuchtturm"), document.getElementById("aImmerBegleiten"), document.getElementById("aCan'tHelpFallingInLove"), document.getElementById("aDerGedanke"), document.getElementById("aGefälltMir"),document.getElementById("aGL713"),document.getElementById("aDuBistDa"),document.getElementById("aAllOfMe"),document.getElementById("aCelloSuiteNo2"),document.getElementById("aDerSchwan"),document.getElementById("aRhapsodie")];    

    if(!audio[snmbr].paused){       
        audio[snmbr].pause();       
    } else if(audio[snmbr].paused){         
        audio[snmbr].play();                
        new initPlayer(audio[snmbr], snmbr); //Here     
        audio[snmbr].volume = document.getElementById("currentvolume").value/100;       

        new playtime(snmbr);
    }
    for(var i=0;i < audio.length; i++){
        if(i != snmbr){                     
            audio[i].pause();
            audio[i].currentTime = 0;
        }
    }   
}

Error: 1. WEBAUDIO17026: HTMLMediaElement has previously connected to another MediaElementSourceNode. scripte.js (192,3)

2. WEBAUDIO17012: The number of AudioContexts has reached a maximum (6). scripte.js (185,2)

3. SCRIPT5022: SyntaxError scripte.js (185,2)

One solution is to just change the source of an audio element.