flap aroundガジェットに音楽を添えて

Launchpad Proでコード名を指定して、LaunchPad Proのキーパッドにコードで使用されている音が光ってナビゲーションしてくれるツールを作成しました。
コードで弾き語りしたい人や、コード入力に慣れるためのトレーニングにお使いください。
こちらから利用できます。Launchpad Chord Sender
対応ブラウザ：PC/Mac版のGoogle Chrome。その他のブラウザは保証しません。
LaunchpadシリーズはLaunchpad Proでの使用でしか検証しておりません。
その他Launchpadについては無保証です。
Launchpadがなくても、ブラウザ上での表示は楽しむことはできます！

[

View this post on Instagram

](https://www.instagram.com/p/BrKtWvgg5pg/?utm_source=ig_embed&utm_medium=loading)

コード名入れたらLaunchpadのパッドか光って教えてくれるツール作成中。 #launchpadpro #launchpad #javascript #chords

syakegonさん(@syake5on)がシェアした投稿 - 2018年12月月9日午前4時58分PST

2018年夏頃に、たまにある音楽に対する発作みたいなものでNovationのLaunchPadを衝動買いしました。
記事にもしましたが、8x8のキーパッドに音色やループ素材をアサインして音楽を創る、ようなコンセプトに惚れて購入しました。いざ触れてみるとなかなか難しい…。なかなかしっくりこないまま同時期に勝ったMaschine mk3で指ドラムをしまくる日々が続きました。
Maschine mk3に触れていて感じたのはコードやメロディーなどは強くない印象で、特に予め用意されたコードを一本指でリズミカルに叩くのみで面白みに欠けました。Launchpadは64キーもあるので、コードフォームさえ覚えこんだら結構幅広い音楽をできるようになるんじゃないか、と考えました。
そこで、なんかコードフォームの勉強ができないかな？という所からMIDI信号でメッセージを送ればLEDが点灯させられることを知ったので、拙いJavaScript技術を利用して自分用にトレーニングツールを作ってみました。

Launchpad Chord SenderからWebアプリを開きます。
LEDを光らせるためにMIDI機器の使用の許可を求めるダイアログが開きますので、許可を選択してください。
"First setting"ボタン、もしくは"setting"ボタンからMIDI outputの設定を行います。
Launchpad Proの場合は、"Launchpad Pro Standalone Port"を指定してください。
設定ができたら、入力ボックスにコード名を入力し、テンポを指定してstartボタンを押すとコードの構成音が画面とLaunchpad Proに表示されます！

• コード入力機能（最低16コード指定、自由に増やせます）
• テンポを指定機能
• ソング保存機能（localStrage使用）

画像のコード名のかかれた所が入力ボックスです。デフォルトで16個表示されています。ソレ以下での使用はテンポを調整してください。
"Add Measure"ボタンをクリックすると入力ボックスが1つ追加されます。テンポを調整すると変拍子にも対応します（適当）
コード名の解析はTonal.jsを使用しています。Tonal.jsで利用できるコード名であれば表示されるはずです。
Tonal.jsはシャープ(#)記号には対応していなかったようなので、自前でシャープも使用できるようにしました。
フラット（♭）記号はb（小文字のビー）で表記します。
"C"や"G#m"などのわかりやすいものから"Abmb6M7"などという難解なコードまで使えます。詳しくはTonal.jsのページで使えるコードをご参照ください。
対応していないコードや文字列は基本的にその入力分はスルーされるようにしていますが、エラーの原因となる場合がありますので、できるだけ正しいコード名を指定してください。
ちなみにキーのトランスポースには対応していません。

コードチェンジを行うテンポを指定できます。
コード入力ボックスは4分音符の長さで指定できますので、4入力ボックスで1小節です。

作ったコードをブラウザのlocalStorage機能を使って保存できます。
セレクトボックスの"-new"を選ぶと新規入力、"-save"を選ぶと曲名を指定して保存する事ができます。
曲データはデータベースに保存せず、ブラウザの機能を使用していますので保存したブラウザでしか利用できません。
ブラウザの仕様が変更されることで消えてしまうこともあるのでご留意ください。

とりあえず公開しちゃえーって感じで公開しました。
挙動やデータなどがおかしくなっちゃった場合は生暖かい目で見守ってあげてください。
フリーウェアですのでやる気がみなぎったときに直したりします。

• 曲データエクスポート・インポート機能
• 次のコードを表示機能
• ドット絵表示機能
• キー変更機能

などなど、これらもやる気がみなぎった時対応とさせていただきます。

音を出したいなーって思うことはあると思います。ただしこのツールは音は出ません。
別途DAWなどでLaunchpad Pro入力から音がなるよう設定すれば音を出しながらLEDを光らせられると思います。
こちらの環境ではAbleton Live 9では知識不足で設定できませんでしたが、Cubase Elements9.5では設定できました。

ニッチでバグバグかもしれないツールですが誰かの役に立てたらと思います。
noteをはじめました。こちらでもツールを作成したり音楽を公開したりしています。そちらもよろしくおねがいします。