Web MIDI API を使用して MIDI キーボードにアクセス

import Synth from '/src/Synth'
import createAudioContext from '/src/WebAudioAPI/createAudioContext'
import getMIDIInputDevices from '/src/MIDI/getMIDIInputDevices'
import getMIDIMessage from '/src/MIDI/getMIDIMessage'
​
const audioContext = createAudioContext()
const destination = audioContext.destination
​
// synth インスタンスを作成
const synth = new Synth({
  audioContext,
  nextNode: destination,
})
​
// MIDI device にアクセスして、
// MIDI message を受け取った際に起動させるハンドラを登録する
const start = async () => {
  // MIDI デバイスを取得する
  const MidiInputDevices = await getMIDIInputDevices()
  console.log({ MidiInputDevices })
  if (MidiInputDevices) {
    // 全ての MIDI デバイスへ
    // MIDI メッセージを受け取った際に起動するハンドラを付与する
    // getMIDIMessage がハンドラ
    // ハンドラで使用する synth インスタンスを渡す
    MidiInputDevices.forEach(o => (o.onmidimessage = getMIDIMessage(synth)))
  }
}
​
start()
​

const getMIDIInputDevices = async () => {
  try {
    // MIDI デバイスにアクセスする
    const access = await navigator.requestMIDIAccess({
      sysex: false,
    })
    // acess.inputs(と outputs).values にデバイス一覧があるが
    // イテレータオブジェクトなので扱いにくい
    // そこで array に変換する
    const MidiInputDevices = Array.from(access.inputs.values())
    const MidiOutputDevice = Array.from(access.outputs.values())
​
    console.log(
      'midiIn and midiOut devices',
      MidiInputDevices,
      MidiOutputDevice
    )
​
    // 今回は inputs しか使わないので、これを返す
    return MidiInputDevices
  } catch (error) {
    console.error('[ERROR] requestMIDIAccess()', error)
​
    return false
  }
}
​
export default getMIDIInputDevices
​