I am wondering how to integrate integrate Webmidi.js, p5.js, and my Akai mPK49 midi controller? This is for a final project for school.

Reading through the Webmidi.js Basics, I was able to get the program to “listed” to my midi controller. Even though the p5 website was throwing a “TypeError: Cannot read properties of undefined (reading ‘channels’)” error, the note names were printing in the console. I then tried to see if I could play midi notes in my DAW Logic Pro X. I noticed that both logic and the P5.js/Webmidi.js program were both acknowledging that I was playing keys on the controller.

I went on to the next step to add a basic synth and to try to play an actual note. The console stopped showing that I was playing notes and only showed the Akai ports and that Logic Pro was an input and output.

Additionally, I commented out new lines of code for the synth and the console still would not show the midi notes in the console. So I am a bit stumped. Here is a link to the P5.js sketch. Any help is appreciated!

  function setup() {
  [![enter image description here][3]][3]createCanvas(400, 400);
  WebMidi
  .enable()
  //.then(() => console.log("WebMidi enabled!"))
  .then(onEnabled)
  .catch(err => alert(err));
  
}

function draw() {
  background(220);
 
}
function onEnabled() {

  // Inputs
  WebMidi.inputs.forEach(input => console.log(input.manufacturer, input.name));
  
  // Outputs
  WebMidi.outputs.forEach(output => console.log(output.manufacturer, output.name));

   const myInput = WebMidi.getInputByName("Akai MPK 49");
   const mySynth = myInput.channels[1]; // <-- the MIDI channel (10)
  
  myInput.addListener("noteon", e => {
  console.log(e.note.identifier);
    })
  
  mySynth.addListener("noteon", e => {
  console.log(e.note.identifier, e.message.channel);
})
  
  let output = WebMidi.outputs[0];
let channel = output.channels[1];
channel.playNote("C3");
}