Use the audiocontext as audio input in p5.js

p5.js Libraries
1

I am implementing a syntheziser wich uses the nodes of the audio-api to generate sound and my goal is to visualize it using p5.

I currently have a script that analyzes audio with fft and visualizes the frequencies with bars. My audio input at the moment is a locally saved song but I need to change it, so it uses the audiocontext as input.
Currently I can get the audiocontext with p5’s own method getAudioContext() but then I have no clue how to set it as input for the visualization.

I know the API has a createBuffer()-Method but I havent found a way to use it as input for p5.


var fft;
var button;
var song;
var slider;
var audiocontext;
var out;
var prue;
var source;


function preload(){
    song = loadSound("src/media/Chopin - Nocturne op.9 No.2.mp3");
    button = createButton("Play");
    button.mousePressed(togglePlaying);
    slider = createSlider(0,1,0.5,0.01);
    this.audiocontext = getAudioContext();
}

function setup() {
  createCanvas(windowWidth,windowHeight);
  fft = new p5.FFT(0.8);
  source = context.createBufferSource();
  widthBand = (width / 128);
  source.connect(context.destination);

}


function draw() {
  background(61);
  //Berechnet Amplitudenwerte im Frequenzbereich -> Zu Array
  var spectrum = fft.analyze();
  noStroke();
  for (var i = 0; i<spectrum.length; i++) {
    var amp = spectrum[i];
    var y = map(amp, 0, 256, height, 0);
    fill(i, 255, 255);
    rect(i*widthBand,y,widthBand-2, height - y );
  }

  //Set Volume according to slider
  audiocontext.setVolume(slider.value());


}


//Play/Pause Button
 function togglePlaying(){
   if(!song.isPlaying()){
     song.play();
     button.html("Pause");
   }else if(song.isPlaying()){
     song.pause();
     button.html("Play");
   }
 }

Any help would be good!