Help us understand the problem. What is going on with this article?

Arduinoを使ってWeb MIDI APIから制御可能なUSB MIDIデバイスを自作する(MIDIUSB編)

More than 3 years have passed since last update.

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 と MocoLUFAArduino 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デバイスを作りましょう。

参考:

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

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

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

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

参考:

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作ってみよう!という方は参考にしてみてください。

No. 環境 対応ボード 特徴
1 MocoLUFA + Arduino MIDI Library Arduino UNO R3 USB-MIDIとメインプログラム部分でMCが分離しているため安定性抜群。またSysEx等MIDIの多くの機能に対応している。一方でArduino UNOにしか対応しないので、小さなデバイスが作れないのが難点
2 arcore Arduino Leonardoと互換ボード Arduino MicroやSparkfun Pro Micro等小さなボードに適用できるのがメリット。ただしCoreを追加する形式のためArduino IDEのUpdateに追従するのが難しい。Updateが止まっており最新環境での対応に不安が残る
3 MIDIUSB Arduino Leonardoと互換ボード、Arduino ZERO, M0等 最新のATSAMD21搭載ボードにも対応しており、Arduinoの標準ライブラリの位置づけで更新されている。ただし、UNO等では使えない
4 mi:muz ATtinyx4,x5,x41,ATmega8等 USB MIDIだけでなく I2C上のMIDI伝送にも1ライブラリで対応しているが、実質mi:muzボードでしか使えない。また、USB3.0やUSBハブでの動作が不安定なのも×

基本的には、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.png

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

midiusb_test.ino
#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の互換ボードを利用していますので、下記のように表示されました。

board.png

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

port1.png

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

write.png

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

port2.png

ブラウザからテスト

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

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

index.html
<!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デバイスのテストが簡単にできます

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

tadfmac
aka D.F.Mac. 実験音楽家。TripArts Music主宰。ハンディーレコーダーでの音集めが趣味。 Web技術、フィジカルコンピューティングなどにも興味があります。
http://soundcloud.com/tadfmac
kddi
KDDIは、通信を中心に周辺ビジネスを拡大する「通信とライフデザインの融合」をより一層推進し、国内はもとよりグローバルにおいても、5G/IoT時代における新たな価値創造を実現し、お客さまの期待を超える新たな体験価値の提供を追求してまいります。
http://www.kddi.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした