集成Webmidi.js和p5.js

Question

我想知道如何集成 Webmidi.js、p5.js 和我的 Akai mPK49 midi 控制器？这是学校的期末项目。

通读 Webmidi.js 基础知识，我能够将程序“列出”到我的 midi 控制器。尽管 p5 网站抛出“TypeError：无法读取未定义的属性（读取“通道”）”错误，但注释名称仍在控制台中打印。然后我尝试看看是否可以在 DAW Logic Pro X 中播放 midi 音符。我注意到逻辑和 P5.js/Webmidi.js 程序都确认我正在控制器上弹奏琴键。

我继续下一步添加基本合成器并尝试演奏实际的音符。控制台停止显示我正在演奏音符，只显示 Akai 端口，并且 Logic Pro 是输入和输出。

此外，我注释掉了合成器的新代码行，但控制台仍然不会在控制台中显示 MIDI 音符。所以我有点难住了。这是 P5.js 草图的链接。 感谢任何帮助！

  function setup() {
  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");
}

Answer 1

以下内容适用于我的系统。 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.log("WebMidi enabled!"))
    .then(onEnabled)
    .catch((err) => alert(err));
}

function draw() {
  background(220);
}

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

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("Q Mini");
  const mySynth = myInput.channels[1]; // <-- the MIDI channel (10)

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

感谢您发帖。