64パッドのレイアウト図示用MIDIモニタを作った

64パッドのレイアウト図示用MIDIモニタ

作った：Major/Minor 3rd Perfect 5th Layout MIDI Monitor (64pad)

See the Pen Major/Minor 3rd Perfect 5th Layout MIDI Monitor (64pad) by ucosarv (@ucosarv) on CodePen.

• これは何

  • 64パッドを使ってインスタコード並みの手間で和音を入力するのレイアウト配列の簡単なMIDIモニタ
    • Mm3rdRotated(上のリンクのもの)、P4th、P5th、DrumPadのレイアウトに対応
    • テキストなしでパッドの物理位置だけ図示するためのレイアウト(DrumPadGrayOutNoText)も追加
  • MIDIノートを受け取ると対応するパッドが黄色くなる
    • 開けるMIDIデバイスをすべて開くので、開いてほしくないデバイスは予め別のアプリで開いておく
  • Shift+Sで静止画として保存
  • Excelで音程と色の配列を作ってソースコードに貼り付ければ動くように作ったつもり
  • デスクトップ録画(LICECapやOBS等)を使えば動画の保存も可能

• 使用ライブラリ

  • p5js
  • WEBMIDI.js