スケールプレイヤー

いろいろな種類のスケール(音階)をキーごとに鍵盤の色で確認できます。

このアプリについて

いろいろなスケール(音階)の構成音を確認でき、音も聴けるスケールプレイヤーです。キーの変更、スケールの変更による構成音の違いを調べることができます。

使い方

用途

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

  • スケール(音階)の構成音をテキストと鍵盤色で確認できます
  • 再生ボタンでスケールの実際の音を聴くことができます
  • キーを変更すると、構成音がどう変わるかを確認できます
  • スケールの種類を変えると同じキーでの構成音の違いを比較できます

初期画面

初期状態はメジャー・スケールで、キーはC(ド)です。色がついている鍵盤はスケールに含まれる音程です(押すと音が鳴ります)。

「構成音:」は鍵盤数(1オクターブ12個+2オクターブ目の頭1個で13個)の中でキー音から何番目の鍵盤がスケールに含まれるかを表示しています。「音階:」は現在のキーに該当する構成音の音程になります。

初期画面

スケールを鳴らす

再生ボタンを押すと音を聴くことができます

スケール再生

キーの変更

キーを変更すると別のキーの構成音がわかります。画面は「メジャー・スケール(E)」で白鍵黒鍵の組み合わせは変わっていますが、構成音(1, 3, 5, 6, 8, 10, 12, 13)は変わりません。

メジャー・スケール(E)

スケールの変更

その下のスケールの種類を変更すると同じキーの別のスケールの構成音がわかります。画面は「ナチュラル・マイナー・スケール(E)」で構成音(1, 3, 4, 6, 8, 9, 11, 13)が変わっています。

ナチュラル・マイナー・スケール(E)

タブを切り替えるとさらに別の種類のスケールが表示されます。画面は「東アジア・東南アジア」タブの中にある「琉球音階」です。

琉球音階(C)

※スケールの詳細についてはこちらを参照→スケール一覧

今後の課題

アラブの音階は「四分音」という1/4を上下にズラした音程があったが、Tone.jsの音程はピアノの十二音音階だったため、再現するのはシンプルではなさそうだった。個別の音にピッチを変えるエフェクトを加えるなどの検討が必要。

詳細

ブログ

【React & Tone.js】スケールプレイヤーを作った(いろいろなスケールを調べて音も聴けるアプリ) - クモのようにコツコツと

ソースコード(GitHub)

リポジトリ

作者について

イイダリョウ

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