Интеграция Webmidi.js и p5.js

В моей системе работает следующее. p5.TriOsc() используется для воспроизведения нот с помощью этой техники. Вам нужно будет изменить имя вашего устройства; вам не нужен производитель, только название устройства. Вам также потребуется добавить следующий скрипт в index.html:

<script src = "https://cdn.jsdelivr.net/npm/webmidi@latest/dist/iife/webmidi.iife.js"></script>

function setup() {
  createCanvas(200, 200);
  osc = new p5.TriOsc(); // Need this to play the notes
  env = new p5.Envelope();
  WebMidi.enable()
    .then(() => console.info("WebMidi enabled!"))
    .then(onEnabled)
    .catch((err) => alert(err));
}

function draw() {
  background(220);
}

function playSound(midiVal) {
  osc.start();
  freq = midiToFreq(midiVal);
  osc.freq(freq);
  env.ramp(osc, 0, 1.0, 0);
}

function onEnabled() {
  // Inputs
  WebMidi.inputs.forEach((input) =>
    console.info(input.manufacturer, input.name)
  );

  // Outputs
  WebMidi.outputs.forEach((output) =>
    console.info(output.manufacturer, output.name)
  );

  const myInput = WebMidi.getInputByName("Q Mini");

  myInput.addListener("noteon", (e) => {
    console.info(e.note.identifier);
    console.info("value  = ", e.message.data[1]);
    playSound(e.message.data[1]);
  });
}

Альтернативный метод:

Ниже приведен альтернативный метод, который не требует добавления какого-либо дополнительного кода в index.html или запроса «прослушивателя». Его недостатком является то, что onmidimessage сообщается дважды и, следовательно, нота воспроизводится дважды. Чтобы обойти эту проблему, добавляется счетчик, который сбрасывается в ноль после первой итерации, в результате чего нота воспроизводится только один раз.

let counter = 0;

function setup() {
  createCanvas(100, 100);
  osc = new p5.TriOsc(); // Need this to play the notes
  env = new p5.Envelope();
}

function playSound(midiVal) {
  osc.start();
  freq = midiToFreq(midiVal);
  osc.freq(freq);
  env.ramp(osc, 0, 1.0, 0);
}

navigator.requestMIDIAccess().then((midiAccess) => {
  console.info(midiAccess.inputs);
  Array.from(midiAccess.inputs).forEach((input) => {
    input[1].onmidimessage = (msg) => {
      if (counter == 0) {
        console.info("value  = ", msg.data[1]);
        playSound(msg.data[1]);
      }
      counter++;
      if (counter > 1) counter = 0;
    };
  });
});

function draw() {
  background(220);
}