画面上の鍵盤を押す（キーボード入力／クリック／タッピング）と、鳴ってるコードをリアルタイムで教えてくれるアプリ 「Keyboard Chord Checker」 を作りました！
（ほとんどAIが書いてくれました…令和だなあ）
↓アプリはこちら
きっかけ
自分は楽器（ウクレレ）をやるんですが、正直コード（和音:Chord）というものがあまり分かっていません。
どういう構成音でどのコードになるのかというのがピンと来ていないんです。
どこを押さえたらCコードが鳴らせるかとかはTab譜とか見たらわかりますが、理屈があんまりわかっていません…。
ところが五線譜をみると、なんだか規則的に感じられました。 音階のスケール自体がピアノベースで出来ているから（ピアノ、スケールどっちが先だ…？）ですね。
鍵盤の配列はコードというものを学ぶのに良さそうだということで、 「鍵盤ベースでコードを教えてくれるアプリを作ろう！」となりました。
どういうアプリ？
Keyboard Chord Checker は、ブラウザで動くシンプルな鍵盤コード判定アプリです！
- 画面の鍵盤をタップ／クリック／ドラッグ（PCはキーボード入力も対応）で音が鳴る
- 押している音からコード名と候補をリアルタイム表示
- オシロスコープ波形とFFTスペクトラムで音を視覚化
- スマホ縦：上＝判定／下＝鍵盤固定、スマホ横：ほぼ鍵盤＋ミニ表示
音階（スケール）とは、全音（2半音）と半音の組み合わせによって並べられた音の集合のこと。
たとえば Cメジャースケールは
C–D–E–F–G–A–B
という並びで、
「全音・全音・半音・全音・全音・全音・半音」
という間隔で構成されている。
そしてコード（和音）は、ある音（根音）を基準に、一定の音程間隔で複数の音を同時に鳴らしたもの。
三和音（トライアド）の場合は、
根音（1度）・3度・5度
を重ねて作られることが多い。
例：Cメジャーコードは C–E–G（1–3–5）。
参考：
・Wikipedia「音階」
・Wikipedia「長音階」
・Wikipedia「和音」
・Wikipedia「三和音」
…っていう話を、座学だけでやると眠くなる。
でも鍵盤を押しながらだと、「あ、これが 1–3–5 か」みたいに“体感で入ってくる”気がしました。
使い方（超ざっくり）
- スマホ：画面の鍵盤をタップ（複数同時押しOK）
- PC：キーボードで演奏（A/W/S/E…で半音階、Z/Xでオクターブ移動、Escで全停止）
押した瞬間に、コード名・候補一覧・ノート名／ピッチクラスが更新されます。
こだわりポイント
1) 候補に「度数ヒント」を付けた
候補だけ見ても「で、これ何？」になりがちなので、
候補に 1–3–5 とか 1–3–5–♭7 みたいな度数ヒントを付けました。
これがあると、susや7thの“仕組み”が鍵盤上で見えてきます。
2) スマホ縦：上で判定、下は鍵盤固定
縦画面でスクロールしながら鍵盤がどっか行くの、最悪なので、下半分は固定にしました。
上の情報エリアだけ見ればOK。
3) スマホ横：ほぼ鍵盤。余計なスクロールなし
横画面は“弾く”が主役。コードは最小表示で十分、という思想です。
4) 波形（オシロ）とFFTで「音が見える」
耳だけじゃなくて目でも遊べる。
波形と周波数成分の違いが見えるのが地味に楽しいです。
フローチャート（処理の全体像）
だいたいの流れはこんな感じです（入力 → 音を鳴らす → 判定 → 描画、のループ）。
おわり
コードって、読むと難しく感じるのに、
鍵盤を押しながらだと「え、今の押さえ方でその名前なの！？」ってテンションで入ってくるのが面白いですね。
ぜひ触ってみてください！
▶ Keyboard Chord Checker
コメント