【09B_演奏アプリⅡ】「Tone.js」を使ってアルペジオ（分散和音）も鳴らせる「簡単コード鍵盤Ⅱ」を作ろう！

(アイキャッチ画像：Photo by Omid Armin on Unsplash ）

「簡単コード鍵盤Ⅱ」の機能をご紹介

今回ご紹介するWEBアプリは、鍵盤らしき文字のそばにある「和音」という文字をクリックすると、その音を根音とした和音（ドミソ・・・など）が鳴りますが、更に横の「分散和音」という文字をクリックすると「ド・ソ・ミ・ソ」と、１つづつの音に分解した和音（アルペジオ＝分散和音）が鳴る、というものです。

また今回は鍵盤の数も増やして、簡単なハ長調の曲で伴奏としてよく使われる和音を一式揃えてみました。以下の６つが良く使われる和音かと思います。

明るい響きの和音

：ドミソ（Cコード）、ドファラ（Fコード）、シレソ（Ｇコード）

悲しい響きの和音

：レファラ（Ｄｍコード）、シミソ（Ｅｍコード）、ドミラ（Ａｍコード）

 

さらに、今回、鍵盤の黒白は、白鍵は明るい響きの音（メジャーコード）、黒鍵は悲しい響きの音（マイナーコード）を意味するものとしています。これをだいたい音の高さ順に並べたものにしました。（もうピアノの原型は無視しています）

以下が今回のＷＥＢアプリです。

（再生の場合は音が出ますのでご注意！）

ＷＥＢアプリなので、スマートフォンで鳴らますので、例えば４拍子でゆっくりした速さの曲の、簡単な伴奏演奏といった使い方が考えられます。

また、チェックボックスをクリックすると、和音の構成が見える様になるのは前のバージョンと同じです。

Googleスプレッドシートでの設定も、より柔軟に

このＷＥＢアプリは、以前のバージョン同様、各鍵盤の音をGoogleスプレッドシートで設定するようになっています。上記の例では、スプレッドシートには次の様に記入されています。

上記の意味は次の様になります。

A列：白鍵か黒鍵かを設定

B列：鍵盤に表示する音名を設定

C～E列：和音を構成する音階名を設定

鍵盤で鳴らす和音をスプレッドシートのデータで簡単にユーザーが制御できるのは同じです！

今回は上記の設定を柔軟にできる様にし、鍵盤（もはや鍵盤と言えないかもですが）の数は自由に加減できる様にしました。

例えば、スプレッドシートで一番下の１音を削除したとします。

すると、「簡単コード鍵盤Ⅱ」の鍵盤の数もシートに合わせて減ります！

増やす方も、いくらでも増やせます。

かなり増やしても、スマートフォンでの操作が（スクロールする方向なので）難しくならない様、縦ならびの鍵盤にしているという訳です。

「Tone.js」でメロディーを奏でる

今回のアプリは、音楽に関するライブラリの中の代表格である「Tone.js」を使っているのは同様ですが、分散和音では、短いながらもメロディーを奏でており、単音の時よりもプログラムは少し複雑になります。今回の改造ではこのメロディーをこのライブラリで鳴らす部分が主要な改造点です。

 

次回以降の記事で、「Tone.js」でメロディーを実装する方法などについて解説していきます。