Use the audiocontext as audio input in p5.js

Question

I am implementing a synthesizer which 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 haven't 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);
  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 very appreciated!

Answer 1

Audiocontext is not an input himself but contains one or more input nodes (and output and connections and ...). P5 creates own Audiocontext and operates inside of that.

So, option one: build your app using p5 functionality only. It's a powerful library, all the needed tools (e.g. AudioIn(), MonoSynth() etc.) should be available.

Option two: initialize p5 first and then use p5 created audiocontext to add extra nodes, which can later be used by p5.

var cnv, fft, audiocontext, osc;
//p5 setup.
function setup() {
    cnv = createCanvas();
    fft = new p5.FFT(0.8);
    audiocontext = getAudioContext(); //if p5.Audiocontext doesn't exist
                                      // then new is created. Let's make
                                      // it global.

    myCustomSetup();  //now we can create our own input nodes, filters...

    fft.setInput(osc); //after which we can connect fft to those created
                       //nodes
}

function myCustomSetup() {
    //p5 audiocontext is usable here, allowing to use full WebAudioApi
    //and connect all nodes, created here or by some p5 function. 
    osc = audiocontext.createOscillator();

}