如何整合Webmidi.js、p5.js与Akai mPK49 MIDI控制器？

核心问题 #

你遇到的TypeError: Cannot read properties of undefined (reading 'channels')错误，是因为WebMidi.getInputByName("Akai MPK 49")未找到对应设备，导致myInput为undefined，后续访问myInput.channels[1]直接抛出错误，中断了整个onEnabled函数的执行——这就是控制台不再打印MIDI音符的根本原因（监听器注册代码根本没机会运行）。

修复后的代码 #

function setup() {
  createCanvas(400, 400);
  WebMidi
    .enable()
    .then(onEnabled)
    .catch(err => console.error("WebMidi启用失败:", err));
}

function draw() {
  background(220);
}

function onEnabled() {
  // 打印所有输入输出设备，确认设备准确名称
  console.log("=== 输入设备 ===");
  WebMidi.inputs.forEach(input => console.log(input.name));
  console.log("=== 输出设备 ===");
  WebMidi.outputs.forEach(output => console.log(output.name));

  // 1. 安全获取输入设备，添加空值检查
  const myInput = WebMidi.getInputByName("Akai MPK 49");
  if (!myInput) {
    console.error("未找到Akai MPK 49输入设备，请检查设备连接或名称");
    return;
  }

  // 2. 为输入设备添加noteon监听器
  myInput.addListener("noteon", e => {
    console.log("按键音符:", e.note.identifier, "通道:", e.message.channel);
  });

  // 3. 安全获取输出设备并播放测试音符
  const output = WebMidi.outputs[0];
  if (!output) {
    console.error("未找到输出设备");
    return;
  }
  const channel = output.channels[1];
  channel.playNote("C3", { duration: 1000 }); // 添加播放时长，避免音符持续播放
}

关键修复要点 #

• 添加空值检查：每次获取输入/输出设备后，先判断是否存在，避免因设备未连接、名称错误导致的代码崩溃。
• 验证设备名称：通过打印所有设备名称，确认getInputByName的参数和实际设备名称完全一致（注意大小写、空格、后缀差异）。
• 避免代码中断：原代码中myInput.channels[1]的错误会直接终止函数，修复后确保监听器能正常注册执行。
• 优化测试音符：给playNote添加duration参数，避免音符无限持续播放。

内容的提问来源于stack exchange，提问作者K-PopCorn