このアプリについて
いろいろなスケール(音階)の構成音を確認でき、音も聴けるスケールプレイヤーです。キーの変更、スケールの変更による構成音の違いを調べることができます。
使い方
用途
下記のような用途に活用できます。
- スケール(音階)の構成音をテキストと鍵盤色で確認できます
- 再生ボタンでスケールの実際の音を聴くことができます
- キーを変更すると、構成音がどう変わるかを確認できます
- スケールの種類を変えると同じキーでの構成音の違いを比較できます
初期画面
初期状態はメジャー・スケールで、キーはC(ド)です。色がついている鍵盤はスケールに含まれる音程です(押すと音が鳴ります)。
「構成音:」は鍵盤数(1オクターブ12個+2オクターブ目の頭1個で13個)の中でキー音から何番目の鍵盤がスケールに含まれるかを表示しています。「音階:」は現在のキーに該当する構成音の音程になります。

スケールを鳴らす
再生ボタンを押すと音を聴くことができます

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

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

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

※スケールの詳細についてはこちらを参照→スケール一覧
今後の課題
アラブの音階は「四分音」という1/4を上下にズラした音程があったが、Tone.jsの音程はピアノの十二音音階だったため、再現するのはシンプルではなさそうだった。個別の音にピッチを変えるエフェクトを加えるなどの検討が必要。
詳細
ブログ
【React & Tone.js】スケールプレイヤーを作った(いろいろなスケールを調べて音も聴けるアプリ) - クモのようにコツコツと
ソースコード(GitHub)
作者について
イイダリョウ
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。
引き続きコツコツの日々。ブログも書いてます。Webづくり やりたい時が 始め時!