コードプレイヤー

いろいろなコード(和音)を鍵盤で鳴らして構成音も確認できます。

このアプリについて

いろいろなコード(和音)を鍵盤で鳴らしてコードの構成音も確認できるコードプレイヤーです。キーの変更、和音の変更による違いを調べることができます。

使い方

用途

下記のような用途に活用できます。

  • 「根音」で鍵盤から単音を鳴らせます
  • 「三和音」「四和音」「五和音」で和音を鳴らせます
  • 和音の構成音を鍵盤の色や文字情報で調べることができます
  • 和音の種類を変えると同じキーでの構成音の違いを比較できます

コードを鳴らす

初期状態はルート(根音)で単音の音が鳴ります。ただし音が鳴るのは左側の1オクターブのみです。

ルート(単音)

コードタイプを変更すると和音が鳴り、構成音の鍵盤に色が付きます。画面はCマイナー・メジャー・セブンスの構成音です。

CmM7

「構成音:」の番号はルート(1)から数えて何番目の鍵盤が構成音になるかを表しています。画面のマイナー・メジャー・セブンスは構成音が1、4、8、12になります。

構成音の数字

キーの変更

別の鍵盤を押すと別のキーの構成音がわかります。画面はGマイナー・メジャー・セブンスで白鍵黒鍵の組み合わせは変わっていますが、構成音は1、4、8、12で変わりません。

GmM7

コードの変更

コードタイプを変更すると同じキーの別のコードの構成音がわかります。画面はGマイナー・セブンスで構成音は1、4、8、11で最後の12が11に変わっています。

Gm7

今後の課題

本アプリで聴けるコードは根音(ルート)の上に和音の構成音を重ねる配置ですが、実際の音楽のアレンジでは和音の構成音を前後のオクターブに配置する「ボイシング」が行われることが多いです。

コードチェンジの移動をなるべく少なくするために1オクターブ内で構成音の配置を変えるクローズドボイシング、両手を使って構成音が1オクターブ以上に広がった響きにするオープンボイシングがあります。

ボイシングの種類やそれを実現する処理の検討はまだ検討できていないため、今後の課題としたいです。

あと、今は「ジャーン」と和音を同時に鳴らしていますが、この他に「タ・ラ・ラ・ラーン、ジャーン」みたいな一音ずつ聴けるモードが必要なのか検討しています。

今のメニュー数がSPの1画面に収まっているので、機能追加によってボタンが増えするのも考えものかという気持ちもあるんですよねぇ。。

詳細

ブログ

【React & Tone.js】コードプレイヤーを作った(鍵盤でいろいろなコードを調べるアプリ) - クモのようにコツコツと

ソースコード(GitHub)

リポジトリ

作者について

イイダリョウ

フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。
引き続きコツコツの日々。ブログも書いてます。Webづくり やりたい時が 始め時!