javascriptcanvashtml5-audiomediaelement.jsaudiocontext

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)


Solution

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