Error when changing input of P5.Amplitude() with p5.sound.js

Question

I Have this simple code which is supposed to show the amplitude of a signal from an oscillator, before and after passing it through a passBand filter. It looks like the error appears when I try to change the input of the p5.Amplitude object when I use p5.Amplitude.setInput(). What am I doing wrong here ?

Here the error message :

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at RingBuffer.push (ae4c7513-7172-4e09-988d-70743483fbb1:75:45)
    at AmplitudeProcessor.process (ae4c7513-7172-4e09-988d-70743483fbb1:193:28)

And here is my code : (I made my bandPass filter by adding a lowPass and an highPass, I don't use the bandPass object on purpose)

let cnv, soundOnCheckbox, filterOnCheckbox
let osc;
let OscAmpIn, OscAmpOut
let filterTab = []

function setup() {
  cnv = createCanvas(windowWidth, windowHeight); 

  //Signal and Amplitudes
  OscAmpIn = new p5.Amplitude(0.9)
  OscAmpOut = new p5.Amplitude(0.9)

  osc = new p5.Oscillator('sine');
  osc.freq(700)
  
 //Checkbox to turn sound and filters on/off
  soundOnCheckbox = createCheckbox('Sound On/Off', false)
  soundOnCheckbox.changed(soundOn);
  soundOnCheckbox.position(width/2,height/2)


  filterOnCheckbox = createCheckbox('Filter On/Off', false)
  filterOnCheckbox.changed(filterOn);
  filterOnCheckbox.position(width/2,height/2+20)


  creationFilter()
}

function draw() {
  background(55);
  translate(width/2, height/2)
  noStroke()
  fill(255)
  textSize(20)
  text("AmpIn = " + OscAmpIn.getLevel(),0,100)
  text("AmpOut = " + OscAmpOut.getLevel(),0,120)
}


//Turn the sound on/off
function soundOn() {
  userStartAudio();
  if(!soundOnCheckbox.checked()){
    osc.stop()
  }else{
    osc.start()
  }
} 


//Create two filters (lowpass and highpass) to create a passBand 
function creationFilter(){
      let lowPass = new p5.LowPass()
      let highPass = new p5.HighPass()
      lowPass.set(15000)
      highPass.set(10000)
      filterTab.push({lowPass,highPass})
}


//Turn the filter on/off
function filterOn(){
  if(filterOnCheckbox.checked()){
    osc.disconnect() //disconnect the osc from the main output
    osc.connect(filterTab[0].highPass) //Connect the osc to highpass
    filterTab[0].lowPass.connect(filterTab[0].highPass) //Connect the lowpass to the highpass. So we eventually have the osc connected to a bandpass
    setAmpInput()
  }else{ //If no filter, osc is linked to main output and AmpIn and AmpOut input are the same
    osc.connect()
    OscAmpIn.setInput(osc)
    OscAmpOut.setInput(osc)
  }
}

//Set the input of the amplitudes 
function setAmpInput(){
    OscAmpIn.setInput(osc) //Set input of the amp as the sound before the filter
    OscAmpOut.setInput(filterTab[0].lowPass) //Set input of the amp as the sound after the filter
}

Answer 1

I think this might be a bug and you could post an issue on the p5.sound github. You should be able to connected a filter to the Amplitude...

OscAmpOut.setInput(filterTab[0].lowPass); isn't connecting the Amplitude to the output of the filter correctly. You have two options;

You can do OscAmpOut.setInput(); so that the Amplitude connects to the main output, which is the same as the output of the filter.

Or, if you want to use the actual output of this osc/filter configuration, you should add a Gain node. It connects after the filter, osc -> lowPass -> highPass -> gain -> main output.

let cnv, soundOnCheckbox, filterOnCheckbox;
let osc;
let OscAmpIn, OscAmpOut;
let filterTab = [];

function setup() {
  cnv = createCanvas(windowWidth, windowHeight);

  //Signal and Amplitudes
  OscAmpIn = new p5.Amplitude(0.9);
  OscAmpOut = new p5.Amplitude(0.9);

  osc = new p5.Oscillator("sine");
  osc.freq(700);

  //Checkbox to turn sound and filters on/off
  soundOnCheckbox = createCheckbox("Sound On/Off", false);
  soundOnCheckbox.changed(soundOn);
  soundOnCheckbox.position(width / 2, height / 2);

  filterOnCheckbox = createCheckbox("Filter On/Off", false);
  filterOnCheckbox.changed(filterOn);
  filterOnCheckbox.position(width / 2, height / 2 + 20);

  creationFilter();
}

function draw() {
  background(55);
  translate(width / 2, height / 2);
  noStroke();
  fill(255);
  textSize(20);
  text("AmpIn = " + OscAmpIn.getLevel(), 0, 100);
  text("AmpOut = " + OscAmpOut.getLevel(), 0, 120);
}

//Turn the sound on/off
function soundOn() {
  userStartAudio();
  if (!soundOnCheckbox.checked()) {
    osc.stop();
  } else {
    osc.start();
  }
}

//Create two filters (lowpass and highpass) to create a passBand
function creationFilter() {
  let lowPass = new p5.LowPass();
  let highPass = new p5.HighPass();
  let gain = new p5.Gain(); // setup a gain node

  //connect filter to gain
  lowPass.set(680);
  highPass.set(720);
  lowPass.disconnect();
  highPass.disconnect();

  lowPass.connect(highPass); //output from lowPass -> highPass
  highPass.connect(gain); //output from highpass -> gain
  gain.connect(); //output from gain -> main output

  filterTab.push({ lowPass, highPass, gain });
}

//Turn the filter on/off
function filterOn() {
  if (filterOnCheckbox.checked()) {
    //disconnect osc from main output
    osc.disconnect();
    //connect osc to filter
    //output from osc -> lowpass -> highpass -> gain
    osc.connect(filterTab[0].lowPass);    
    //set amplitude inputs
    OscAmpIn.setInput(osc);
    OscAmpOut.setInput(filterTab[0].gain);
  } else {
    //connect osc to main output
    osc.disconnect();
    osc.connect();
    //set amplitude inputs
    OscAmpIn.setInput(osc);
    OscAmpOut.setInput(osc);
  }
}