【超便利】MIDIでコード/スケール名を逆引きできるWebアプリ作った【個人開発】


超便利な**音楽系Webアプリ**を作ったので、紹介します！＼(^o^)／

追記：動画での解説を作りました。

https://youtu.be/FqMLG5ikUB4

# どんなアプリ？

一言で言えば、「**コード/スケールの逆引き検索アプリ**」です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">MIDIキーボードを弾いたらコードネームが（スケール名も）分かるアプリ作りました～！<a href="https://t.co/bL7VDNFrOB">https://t.co/bL7VDNFrOB</a> <a href="https://t.co/FQG2QFaC1L">pic.twitter.com/FQG2QFaC1L</a></p>&mdash; キムラ ヨシト(KHUFRUDAMO NOTES) (@k1mu0419) <a href="https://twitter.com/k1mu0419/status/1539556717188771841?ref_src=twsrc%5Etfw">June 22, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

…とは言え、ただの逆引き検索アプリではありません！
自分が「あったらいいな！」と思う機能をたくさん盛り込んだ

**超　便　利　ツ　ー　ル（自己評価）** 

です！

では、詳しく機能と使い方を説明していきます！！！(๑˃̵ᴗ˂̵)و

## 基本的な使い方

### ページへアクセス！

Webアプリなので、まずページへアクセスしてください。笑

https://o-to.khufrudamonotes.com/o-to-reverse-lookup-keyboard

※PC推奨です。
※ブラウザは、**Google Chrome**や**Microsoft Edge**を使ってください。
（現時点では、[**Web MIDI API**](https://caniuse.com/?search=Web%20MIDI%20API)に非対応の**Safari**や**Firefox**では使えません。）

※ちなみに、**お手元にPCやMIDIデバイスが無い方**は、こちら↓をお使いください。（MIDI入力以外は、ほぼ同じことができます。）

https://o-to.khufrudamonotes.com/o-to-modal-interchange

### ①ブラウザがMIDIデバイスの使用許可を求めてきたら許可します。

このWebアプリは、ブラウザにMIDIデバイスの使用を許可する必要があります。

![MIDIデバイスの使用許可.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/d6f25a71-ae49-48bd-5612-4ade2ec2fcaf.png)

許可を求められたら「**許可**」してください。

### ②【接続中のMIDIデバイス】に、お使いのMIDIデバイスが表示されているのを確認します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/f7378bf1-ac86-08b2-3232-2d8531ae90e3.png" width="500">

ここにお使いのMIDIデバイスの名前が出ていれば、OKです。

※MIDIデバイスの設定や、ドライバーのインストールなどは各自やっておいてください。

### ③必要に応じて音量を調整します。

このWebアプリは**Web Audio API**も使用しているので、別途鳴らす音源がなくてもブラウザから直接音を鳴らせます。

**最初のヴォリュームは0**に設定してあるので、必要に応じてヴォリューム調整を行ってください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/9bde3f68-9a7f-0c04-cf98-858b2e6d3374.png" width="500">

鳴らす音は、「**音色の選択**」のドロップダウンメニューから4種類の音を選択できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/0703bc7c-1250-aa0e-f858-acda0c30ebe7.png" width="500">

### ④MIDIキーボードを弾きます。（MIDIを入力します。）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/a8967b7f-5d8e-4cc9-46ae-4669373c0a29.jpeg" width="500">

弾きます。

### ⑤各種情報が判定されます。

#### コードが判定されます。

今弾いているコードが何なのか判定されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/070ecc50-f7e8-0448-9088-a6b215c67004.png" width="500">

読み方や、詳細情報も表示されます。

#### スラッシュコードにも対応！

**転回形**はもちろん、**ハイブリッド・コード**や、**UST**（**アッパー・ストラクチャー・トライアド**）にも対応しました！

ちなみに、**ハイブリッド・コード**は赤系の色、

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/9223549a-3d59-6055-f4bc-b34241605afa.png" width="500">

**UST**（**アッパー・ストラクチャー・トライアド**）は青系の色で表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/cf711c02-c9fb-959f-c228-5366ace24cb0.png" width="500">


#### 今弾いている音を含む主なスケールが判定されます。

また、70種類以上のスケールの中から、今弾いているコードの**最低音から始まる構成音を含むスケール**が判定されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/8854e369-f27b-4271-7eb2-ea6f04c6b532.png" width="500">

さらに、「構成音を含む全てのスケールを表示する」ボタンを押せば、**構成音を含む全てのスケール**も表示できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/291b34ff-8078-6c41-6624-11aad234ceab.png" width="500">

冷静に眺めると、なかなか膨大な情報量です。笑

#### ネガティヴ・ハーモニーも分かります。

それから、指定したキーにおける、**ネガティヴ・ハーモニー理論**に基づく代理コードも判定されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/4f4fdb17-af4f-6c6a-91f5-621d070bab5b.png" width="500">

（ここは後述の「**入力をキープ**」しながら使うとよいと思います。）

#### ギター指板のポジションも分かります。

その上で、ギター指板のポジションビューで、鍵盤で弾いたポジションが**ギター指板**のどこに相当するのかも分かります！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/0f2b1304-c053-3800-9b36-f3b45fcdb789.png" width="500">

「鍵盤で弾いたフレーズを、ギターでも弾きたい！」みたいなときに便利です。

ちなみに、初期状態の指板は、「**スタンダード・チューニングのギター**」です。

ただし、「**チューニングの種類**」から**別のチューニング**や**多弦ギター**、**ベース**や**ウクレレ**指板などにも変更できます！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/47e08caf-91a4-59ab-0f8e-84f548daf3ff.png" width="500">

ついでに「**右利き**」と「**左利き**」の切り替えもできます！

#### 「コード履歴」

判定機能だけだとその瞬間しかコードネームを確認出来ないので**履歴機能**をつけました。
フレーズのコード進行を確かめたり、即興で弾いたコードを確認できます！

まず、ページ上部には演奏したコードの履歴がを**最大8個まで**表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/525e2e79-c72b-e44b-9cdd-6dbf137a7cc6.png" width="500">

そして、ページ下部には、**全ての履歴**が表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/1110c794-2c54-ce63-5b6a-f88ed7db3c06.png" width="500">

この**履歴機能**は、後述の**仮想MIDIドライバー**との組み合わせでさらなる威力を発揮します。笑

## 発展的な使い方

### 「入力をキープ」を活用する。

デフォルト状態では、押さえている鍵盤に対応するコードやスケール情報が表示されます。

ただ、判定される情報が多いので、全ての情報を確認するには**ページをスクロールする必要**があります。

しかし、鍵盤を弾きながらページをスクロールするのは厳しいですよね。笑

そんな時は、「**入力をキープ**」ボタンを押してください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/e8ebc5fe-dc60-f353-9802-b788c429ffc4.png" width="500">

入力をキープ状態では、**押した鍵盤を離してもその鍵盤は選択されたまま**になります。

これで、ゆっくりコードやスケール情報が確認できるはずです。

反対に、選択を解除するためには、再び同じ鍵盤を押してください。
（一括で選択を解除したい場合は、「**入力をキープ**」を一度解除すればOKです。）


### 「仮想MIDIドライバー」を使ってDAWと連携させる。

個人的に特に便利で強力なのがこの使い方です。

#### ①仮想MIDIドライバーの導入

**仮想MIDIドライバー**とは、PC内でのMIDIをやり取りを可能にするドライバーです。

Macの方は、「**IAC Driver**」という**仮想MIDIドライバー**が標準搭載されているようです。
Windowsの方は、別途インストールする必要があります。

僕はWindowsなので、「**LoopMIDI**」という**仮想MIDIドライバー**をインストールして使用します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/b80c4d96-add0-0a1b-bf78-6dc915ac232f.png" width="500">

「**LoopMIDI**」の使用方法は、こちら↓のページの解説が分かりやすいと思います。

https://canplay-music.com/2019/12/14/loopmidi/

#### ②DAWのMIDIのアウトプットを仮想MIDIドライバーに割り当てる。

**Cubase**の場合は、MIDIトラックのインプットを「**未接続**」、アウトプットを**仮想MIDIドライバー**のポートへ割り当てます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/b5a08318-2947-46f8-66d8-4325c876bda7.png" width="500">

※インプットを「**未接続**」にしておかないと、多分MIDI信号が**無限ループしてブラウザが落ちます。** 笑

#### ③MIDIを再生させるとコード履歴にたまっていく。

あとは、このままDAW側でMIDIデータを再生すると…

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/15daede0-cc5b-2ac6-2704-adfaeadaba3f.png" width="500">

MIDIファイルのコードを文字起こしできます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/1110c794-2c54-ce63-5b6a-f88ed7db3c06.png" width="500">

もちろん、MIDIの中身によっては、細かく判定されすぎてコードメモにそのまま使うにはコードの取捨選択は必要かと思います。

しかし、**MIDIファイルを再生するだけでコードをどんどん拾ってくれる**のはかなり便利です！

## 超！便利！！

「こんなものがあれば良いな」を詰め込んだこのアプリ。
個人的にはとても重宝しています。

よければ使ってみてください！(๑˃̵ᴗ˂̵)و

感想や、シェアをいただけると喜びます！

https://o-to.khufrudamonotes.com/o-to-reverse-lookup-keyboard