当前位置：首页 > 文章列表 > 文章 > 前端 > 用WebMIDI打造浏览器音乐合成器教程

用WebMIDI打造浏览器音乐合成器教程

2025-09-25 09:51:49 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《用Web MIDI创建浏览器音乐合成器教程》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

首先请求MIDI权限并监听输入设备消息，再通过Web Audio API将MIDI音符转化为音频信号播放；使用音频上下文创建振荡器发声，重用节点优化性能，并处理多设备连接与浏览器兼容性问题。

如何用Web MIDI API创建浏览器端的音乐合成器？

Web MIDI API允许你在浏览器中直接与MIDI设备交互，这为创建浏览器端的音乐合成器打开了大门。核心在于理解如何发送和接收MIDI消息，并将其转化为声音。

首先，你需要请求MIDI访问权限，然后监听MIDI输入设备的消息，最后，将这些消息转化为音频信号并播放出来。

解决方案：

请求MIDI访问权限：

这是使用Web MIDI API的第一步。你需要使用navigator.requestMIDIAccess()方法。

navigator.requestMIDIAccess()
  .then(onMIDISuccess, onMIDIFailure);

function onMIDISuccess(midiAccess) {
  console.log("MIDI Ready!");
  // 获取MIDI输入设备
  const inputs = midiAccess.inputs;
  for (let input of inputs.values()) {
    input.onmidimessage = getMIDIMessage;
  }
}

function onMIDIFailure(msg) {
  console.error(`Failed to get MIDI access - ${msg}`);
}

如果用户拒绝了MIDI访问请求，onMIDIFailure函数将被调用。

监听MIDI消息：

一旦你获得了MIDI访问权限，你需要监听MIDI输入设备的消息。getMIDIMessage函数负责处理接收到的MIDI消息。

function getMIDIMessage(midiMessage) {
  const command = midiMessage.data[0];
  const note = midiMessage.data[1];
  const velocity = (midiMessage.data.length > 2) ? midiMessage.data[2] : 0;

  switch (command) {
    case 144: // noteOn
      if (velocity > 0) {
        noteOn(note, velocity);
      } else {
        noteOff(note);
      }
      break;
    case 128: // noteOff
      noteOff(note);
      break;
  }
}

这段代码监听noteOn (144) 和 noteOff (128) 命令。velocity表示音符的力度。

创建音频上下文和振荡器：

现在，你需要使用Web Audio API来生成声音。创建音频上下文和振荡器。

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillators = {}; // 用于存储当前正在播放的音符的振荡器

function noteOn(note, velocity) {
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();

  oscillator.type = 'sine'; // 可以尝试其他波形，如 'square', 'triangle', 'sawtooth'
  oscillator.frequency.value = midiNoteToFrequency(note);
  gainNode.gain.value = velocity / 127; // MIDI velocity范围是0-127

  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);

  oscillator.start();
  oscillators[note] = oscillator;
}

function noteOff(note) {
  if (oscillators[note]) {
    oscillators[note].stop();
    oscillators[note].disconnect();
    delete oscillators[note];
  }
}

function midiNoteToFrequency(note) {
  return Math.pow(2, (note - 69) / 12) * 440;
}

noteOn函数创建并启动一个振荡器，noteOff函数停止并断开振荡器。midiNoteToFrequency函数将MIDI音符转换为频率。

测试和调试：
连接你的MIDI键盘，打开浏览器的开发者工具，查看控制台输出。确保MIDI消息被正确接收，并且声音被正确生成。如果听不到声音，检查你的音频输出设备和音量设置。

Web MIDI API的安全性考虑？

Web MIDI API需要用户明确授权才能访问MIDI设备。浏览器会显示一个权限请求，用户可以选择允许或拒绝。为了提供更好的用户体验，你应该解释为什么你的应用需要访问MIDI设备。此外，不要在未经用户同意的情况下发送MIDI消息。

如何处理多个MIDI输入设备？

midiAccess.inputs返回一个MIDIInputMap对象，你可以遍历这个对象来获取所有可用的MIDI输入设备。然后，你可以为每个设备添加onmidimessage监听器。

navigator.requestMIDIAccess()
  .then(onMIDISuccess, onMIDIFailure);

function onMIDISuccess(midiAccess) {
  const inputs = midiAccess.inputs;
  for (let input of inputs.values()) {
    console.log(`Input device found: ${input.name}`);
    input.onmidimessage = getMIDIMessage;
  }

  midiAccess.onstatechange = (event) => {
    console.log(`MIDI device state change: ${event.port.name}, ${event.port.state}`);
    // 在设备连接或断开时更新设备列表
  };
}

midiAccess.onstatechange事件可以用来监听MIDI设备的连接和断开事件，这样你就可以动态地更新设备列表。

如何优化Web Audio API的性能？

Web Audio API的性能取决于你的代码和硬件。以下是一些优化技巧：