Web MIDI APIで楽器やMIDIコンと連携するWebアプリが作れるようになりました。
しかし、そうなってくると、Webアプリと連携する「自作」MIDIデバイスも作りたくなるものですね（強引）

今回は、MIDIUSBを使ってUSB MIDIデバイスを作ってみようと思います。

Web Audio APIや Web MIDI APIの記事じゃなくてごめんなさい。。。

おさらい。いろんなArduinoでのUSB MIDIデバイス自作環境

MIDIUSBの話に入る前に、ArduinoでUSB MIDIデバイスを自作する方法についておさらいしてみましょう。

1. Arduino UNO R3
2. Arduino Leonardo / Arduino Micro / Sparkfun Pro Micro など
3. Arduino Zero (arduino.cc) / Arduino M0 Pro (arduino.org) など
4. 番外編 mi:muz

なんか変なのが混ざってますがw 気にしないw

1. Arduino UNO R3 と MocoLUFA、Arduino MIDI Library

Arduinoで一番有名なArduino UNO。
このボードはATmega328PとATmega16u2という2つのMCが搭載されています。(R3の場合)

Arduinoを USB MIDIデバイスにするには、下記手順で行います。

1. Arduino MIDI LibraryというシリアルMIDIに対応させるためのライブラリを使ってArduinoのスケッチをATmega328P側に書き込む
2. MocoLUFAというUSB MIDIとシリアルMIDIを変換するファームウエアを、ATmega16u2側に書き込む。
3. MIDIモードで起動（ATmega16u2のISPピンのジャンパーで選択）

Arduino UNOでは今回書くMIDIUSBは利用できません。

上記方法でUSB MIDIデバイスを作りましょう。

参考：

• Arduino Moco LUFA
• Arduino UNOで作る一番簡単なMIDI音源

2. Arduino Leonardo互換ボード と rkistner/arcore

ATmega32u4が搭載されたArduino Leonardoとその互換ボードたち。

• Arduino Micro
• Sparkfun Pro Micro
• よくわからん互換風ボード

これらのボードには、ATmega32u4が搭載されています。このMC、USBペリフェラルに対応しているため、UNOのようにシリアル変換を行う必要がありません。

Arduino Leonardoと互換ボード向けのUSB MIDI対応環境として、rkistner/arcoreがあります。

参考：

• Arduino Leonardo/MicroでもMIDI使いたい。

rkistner/arcoreは、arduinoのcoreに直接USB-MIDI機能を追加するもので、ライブラリとは違った形でMIDIの機能を組み込むことができます。
しかし、この環境。更新が止まっているため、新しいIDEやボードへの対応が気がかりです。

新しい環境では今回紹介するMIDIUSBを使った方が良いかもしれません。

3. Arduino Zero / Arduino M0 Pro (Arduino.org) など

ATSAMD21が搭載されたARM Cortex M0版のArduinoです。
こちらもUSBペリフェラルに対応しているため、直接USB MIDIデバイス化することができます。

今回紹介するMIDIUSBが対応しているようですが、残念ながら ボードを持っていない！ ので今回検証はできません。

検証してくれる方募集中〜！

4. 番外編 mi:muz

mi:muzは、V-USBなどOSSの資産を生かして私が開発しているMIDIデバイス開発環境です。
OSSでハード設計情報、Arduino向けライブラリ、サンプルスケッチ等を公開しています。

ATtinyなどUSBペリフェラルを持たない安価なMCでMIDIデバイスを作ることができますが、USB MIDIデバイス作成環境としてみた場合には、PCとの相性問題や、USBハブを経由して接続すると認識しなくなる等、ソフトウエアでUSBに対応しているが故の制約も多い環境です。

5. 番外編 Arduino Pro miniとか、nanoとか

Arduino Pro miniやnanoなど、ATmega328のみ搭載したArduinoは、USBペリフェラルがありません。
一応、前述のV-USBなどを使って頑張ればUSB MIDIに対応可能です。でも少しハードルが高い。

これらのボードの場合、あえてUSBではなくArduino MIDI Libraryを使ったシリアルMIDIデバイスを作るのが良いとおもいます。

5DINケーブルで繋ぐデバイスを制作されたい方はこちらで良いと思います。

各環境の特徴まとめ

一応、これまでの内容をまとめてみました。
今からArduinoを買ってMIDI Device作ってみよう！という方は参考にしてみてください。

基本的には、UNOを買ったら 1. それ以外の方は 3. でいいんじゃないか？と思っています。

MIDIUSBライブラリを使ってみる

それでは、ArduinoのMIDIUSBライブラリを使ってみることにします。

用意するもの

• PC (今回はMac前提で書きます。) Arduino IDEが動作するもの。インターネット接続環境
• Arduino Leonardo互換機 私はSparkfun Pro Microの互換機で試してみます。
• PCとArduinoを接続するUSBケーブル（※充電ケーブルだと通信できないので注意!）

導入

Arduino IDEをダウンロード、インストールしてください。今回は Arduino 1.6.13を使いました。

つぎに、https://github.com/arduino-libraries/MIDIUSB からライブラリをダウンロードしてください。

zipファイルを解凍して、MIDIUSBというフォルダ名にリネームします。

MIDIUSBはArduinoライブラリですので、下記いずれかの方法で導入可能です。

1. ドキュメント配下のlibrariesフォルダにMIDIUSBを入れる

   ~/Documents/Arduino/libraries に入れます。

2. Arduino.app配下のlibrariesフォルダにMIDIUSBを入れる

   /Applications/Arduino.app/Contents/Java/libraries/ に入れます。

複数のArduino.appを入れている場合、全てのArduino.appでライブラリを有効にするには、上記1.の入れ方が良いです。
一方で、特定のArduino.appだけで使いたい場合には、2. の入れ方にしましょう。

フォルダのコピーが終わったら一度Arduino IDEを再起動してください。

exampleを確認

Arduinoへのライブラリの導入が成功していれば、File>Examplesの中にMIDIUSBが追加されています。

exampleの何かを実行してもいいのですが、ここではMIDI Note ON/OFFでLチカするサンプルを実行してみましょう。

#include "MIDIUSB.h"

#define LED_PIN 2 // Pro Micro用。Leonardoなら 13

void setup() {
  pinMode(LED_PIN,OUTPUT);
}

void loop() {
  midiEventPacket_t midievent;
  midievent = MidiUSB.read();
  if(midievent.header != 0){
    if((midievent.byte1 & 0xf0)== 0x90){
      if(midievent.byte3 != 0){
        digitalWrite(LED_PIN,HIGH);
      }else{
        digitalWrite(LED_PIN,LOW);
      }
    }else if((midievent.byte1 & 0xf0)== 0x80){
      digitalWrite(LED_PIN,LOW);
    }
  }
}

このスケッチをArduinoに書き込みましょう。まずは、ボードを選ぶところから。

Tools>Board から、Arduinoボードを選んでください。

私は今回Arduino Leonardoだ！と言い張るSparkfun Pro Microの互換ボードを利用していますので、下記のように表示されました。

次に、ポートも選びます。

これで書き込み準備ができました。
Arduino IDEの→ボタンを押して書き込みましょう。

書き込みがうまくいくと、下記のように表示が変わります。
USB MIDIデバイスのできあがりです！

ブラウザからテスト

さて、なんとかLチカMIDIデバイスが出来ましたので、最後にブラウザからテストしてみましょう。
Web MIDI APIを手抜きして使うpoormidi.jsを利用します。

poormidi.jsと、下記index.htmlをlocalhost配下の同じディレクトリに置いてください。
(Webサーバーをlocalhostに立てておいてください)

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MIDIUSB Test (Lチカ)</title>
<style>
  button{font-size:32px;width:200px;height:100px;}
</style>
<script src="poormidi.js"></script>
<script>
var midi = new poormidi();
var interval = null;
var onOff = 0;
function startBlink(){
  if(interval){
    clearInterval(interval);
    interval=null;
  }
  interval = setInterval(function(){
    onOff ^= 1;
    if(onOff){
      midi.sendNoteOn(40,100);
    }else{
      midi.sendNoteOff(40);
    }
  },1000);
}
function stopBlink(){
  if(interval){
    clearInterval(interval);
    interval=null;
  }
  midi.sendNoteOff(40);
}
</script>
</head>
<body>
<h1>MIDI経由でLチカ</h1>
<button id="start" onclick="startBlink()">start</button>
<button id="stop" onclick="stopBlink()">stop</button>
</body>
</html>

さきほどのMIDI経由Lチカスケッチを書き込んだArduinoをPCのUSBに繋いでから、Web MIDI APIに対応したChromeかOperaから上記index.htmlを開きます。

ボタンが2つだけのアホみたいなページが表示されますw

ここで、startをクリック後、Arduino側がLチカしたら成功です！
単なるLチカですが、MIDI経由でのLチカです。

めちゃくちゃシンプルなMIDIデバイスの完成ですw

まとめ

• Arduino Leonardo互換のArduinoではMIDIUSBを使って簡単にMIDIデバイスがつくれます
• Web MIDI APIからMIDIデバイスのテストが簡単にできます

それでは、よいクリスマスを！