MIDI Chord Helper では、鳴っている音を和音ボタンに視覚的に表示する機能がついていますが、これと同様の機能を五度圏時計楽器ClockChordにも実装しました！
PCのマウスやキーボードだけでなく、MIDI INにも反応するので、例えば、MIDIキーボードを接続してC（ド・ミ・ソ）の和音を弾くと、時計の文字盤で12時の位置にある C が黒枠で囲まれ、視覚的に表示されます。
和音の一部だけが鳴っているときも、黒枠の一部を表示しているので、他のコードにも線が現れます。
Am（ラ・ド・ミ）を鳴らした場合も、Amが黒枠で囲まれます。
Csus4（ド・ファ・ソ）の場合は、一番外側のkey/sus4のところが黒枠で囲まれます。
低音域の音（ベース音）を鳴らすと、対応するコードボタンに太めのアンダーバーのような線が表示されます。これによりベース音からのコード判別がしやすくなっています。
不協和音程として知られる、トライトーン（三全音）の関係にある2音（例：ファ・シ）が同時に鳴っている場合、対応するマイナーコードに灰色の丸を表示します。これはG7のようなドミナントセブンスコード（属七の和音）、dim（diminished、減三和音）、などを鳴らすと出現します。この丸はdimの別表記である○に由来します。
もう一つの不協和音としてaug（augumented、増三和音）がありますが、これを鳴らすと一番外側のsus4の列に「＋」の形が現れます。この形は aug の別表記 + に由来します。また、sus4の列に出すことで、Alt ＋ sus4クリックでaugが出せることを示す狙いもあります。なお、この形はmM7（マイナーメジャーセブンス）を鳴らしたときにも現れます。
この調子で、MIDIファイルを再生してコード進行を視覚化できたらいいな…と思いましたが、残念ながら、ClockChordはMIDI再生機能（シーケンサー）が未実装です。
そこで、誰かWebブラウザで動くMIDIシーケンサー作ってないかな…と思って検索してみたら…ありました！
MIDIファイルを再生できるシーケンサーと接続してみた
ひよこラボのEx Midiを開いて出力先を選択し、同じポートがClockChordの「MIDI IN」に出ていればチェックを入れ、あとはEx Midiで手持ちのMIDIファイルを選択して再生するだけで、ClockChordから音が鳴り、コード進行も視覚化されました！
ClockChordでこんなにたくさんの音を自動演奏で高頻度に鳴らすのは初めてでしたが、十分なパフォーマンスを発揮できていました！
みなさんも、お手持ちのMIDIファイルがあったら、ぜひやってみましょう！曲を聞きながら眺めているだけでコード進行を把握できて楽しいですよ！視覚的に把握できれば、その覚えた順でClockChord上のコードをタップし、そのまま弾き語れるようになります。
今後の課題
MIDIファイルにはメタイベントという、MIDI IN/OUTでは送信されないイベントが含まれており、その中に調号を変更するイベントがあります。
MIDI Chord Helperの場合はシーケンサーが内蔵されているので、曲の途中で調号が変更されたときに反応させることができましたが、今回のようにMIDIポートを介して接続している場合はできません。
この問題を解決するには、ClockChordにもMIDIシーケンサー機能を実装する必要があります。もしこれができれば、調号の変更イベントを受信して、表示されている文字盤の♯、♭の表記をその調号にふさわしい表記に自動的に切り替えられるようになります。
Ex Midi で「ソースの表示」をしてみたところ、JavaScriptのソースも見えたので、どうすれば実現できるかのヒントとして活用できそうです。
CAmiDion blog 