TypeError: Cannot read properties of undefined (reading 'channels')

[theslyprofessor]

Upon trying to complete one of the very first examples, I fail.

This is the code:

  let input = WebMidi.inputs[2];
  let channel = input.channels[1]; // channel 1

  channel.addListener('pitchbend', e => {
   console.log("Pitch value: " + e.value);
  });

It can't recognize the channels despite there being seventeen of them available to me. Notably, it outputs to channel 1 just fine. Here are my input channels:

channels: Array(17)

1: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 1, _octaveOffset: 0}
2: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 2, _octaveOffset: 0}
3: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 3, _octaveOffset: 0}
4: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 4, _octaveOffset: 0}
5: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 5, _octaveOffset: 0}
6: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 6, _octaveOffset: 0}
7: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 7, _octaveOffset: 0}
8: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 8, _octaveOffset: 0}
9: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 9, _octaveOffset: 0}
10: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 10, _octaveOffset: 0}
11: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 11, _octaveOffset: 0}
12: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 12, _octaveOffset: 0}
13: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 13, _octaveOffset: 0}
14: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 14, _octaveOffset: 0}
15: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 15, _octaveOffset: 0}
16: i {eventMap: {…}, eventsSuspended: false, _output: o, _number: 16, _octaveOffset: 0}

Am I missing something with regards to async/await? I am having a lot of trouble.

[djipco]

The first thing you need to do is call WebMidi.enable(). Then, inside the callback, you can get full access to all objects.

Having said that, if you are starting out with WebMidi.js, you are probably better off looking at the dev branch. Version 3 will soon go to beta and has significant changes compared to version 2.