2013年8月20日火曜日

Web MIDI API Wrapper 公開したよ^^ (1)

2013年7月1日にChrome CanaryにMIDI InputがやってきたWeb MIDI API。そろそろOutputも来るはずですが、今のところ Jazz-Plugin をインストールして Web MIDI API Shim を使って動かします^^
でも「MIDIって難しいんでしょ？」という声が聞こえて聞こえてきそうなので、聞こえてくる前にWrapperなるものを作ってみました。

Wrapperの話に入る前に「MIDIってなんぞ？」ってところを少し書きます。一言で言うと「メーカの枠を超え、電子楽器と電子楽器を接続する為のプロトコル」なんです。歴史は30年前のNAMM Show(National Association of Music Merchants Show)という楽器の見本市でお披露目され(今年はちょうど30周年に加えテクニカルグラミー賞を受賞)、その後電子楽器の接続のみならず照明機器のコントロール、通信カラオケ、携帯電話の着信音の制作など幅広く利用、応用されています。有名なのは、HollywoodにあるUniversal StudiosのWaterworldのアトラクションで、ライトと演出の同期、キュー出しにMIDIが使われています。そのアトラクションがこれ▼です。(12分00秒辺りが同期とか必要そう)
前置きはこれくらいにして、Wrapperの説明に入ります。
今のところ、とりあえずMIDIを意識せずともアプリケーションを簡単に構築できるように、基本的な以下のメッセージに対応にしています。
  • NoteOn：音を鳴らす
  • NoteOff：音を止める
  • PitchBend：ピッチを上下させる
  • Sustain：ダンパーペダルの操作
  • Modulation：揺らぎ
  • AllSoundOff：残響、Sustainを含め即時に全ての音を止める
  • ResetAllController：PitchBend、After-Touchなどのコントローラを初期値に戻す
  • AllNoteOff：発音している音を全て止める

使い方はこんな感じです。 まずは WebMIDIAPI.js と WebMIDIAPIWrapper.js にリンクします。(今回は都合上、前準備だけになってしまいました。。。)
<script src="[PathToJS]/WebMIDIAPI.js"></script>
<script src="[PathToJS]/WebMIDIAPIWrapper.js"></script>
次にConstructorを作ります。 
var wmaw = new WebMIDIAPIWrapper( false );
続いて MIDI Input 、 MIDI Output が指定されたときの EventHandler を指定します。 
wmaw.setMidiInputSelect=function() {
  /* MIDI Input の選択リストを表示する EventHandler */
  /* 選択リストから MIDI Input が選択された時の EventHandler もここに書く*/
}

wmaw.setMidiOutputSelect=function() {
  /* MIDI Output の選択リストを表示する EventHandler */
  /* 選択リストから MIDI Output が選択された時の EventHandler もここに書く*/
}
最後に Web MIDI API を Fire する。 
wmaw.init();
これで MIDI Input、Output デバイスのリストが表示され、デバイスを選択できる状態になります。デバイスを選択した状態でMIDIメッセージを送れば音がなったりします。例えばこんな感じ▼
wmaw.sendNoteOn(0, 0, 69, 60, 0);
wmaw.sendNoteOff(0, 0, 69, 60, 500);
これでA4の音が500msecの間、60の強さ(最大127)で鳴ります。

 ここから！というところですが、この先を書くと長くなりそうなので今回はここまでにして、次回はMIDIメッセージの送信について書こうと思います！！

 お楽しみに^^
時刻: