【GASで音楽】無料のJSライブラリ「Tone.js」を使って指一本で和音が出せる鍵盤『かんたんコード鍵盤』を作ってみよう
Googleが無料で提供するサービス、Google Apps Script(GAS)を使うメリットのひとつに、「テンプレート」とよばれるフォームを使ってWEBページが簡単に公開できることが挙げられます。
さらにテンプレート内では、(おそらく非公式な使い方ではありますが)豊富に存在する、外部のJavscript用のライブラリ(JSライブラリ)のいくつかが利用できます。
以前、フリーのJSライブラリのひとつで、音楽分野では広く用いられている「Tone.js」を利用した、簡単な鍵盤アプリの例をご紹介しました。
今回の記事では、上記で紹介したアプリを少し進化させたものをご紹介します。
もちろんWEBアプリですので、ネットにつながってさえいれば、インストールなしに使うことができます。
無料のJSライブラリ「Tone.js」をGASで使った『かんたんコード鍵盤』をご紹介~1打鍵で和音が出せる鍵盤アプリ~
伴奏用の和音について
以下はアプリのご説明の前の、ちょっとした前置きです。
歌唱などの分野では、主要なメロディーだけを表記した「リードシート」と呼ばれる簡単な譜面がよく使われます。この譜面では、伴奏は「コードネーム」と呼ばれる文字で簡易に表記されます。
以下がその例ですが、歌詞にあわせたメロディー音が五線譜で表示され、五線譜の上には、CやFなどの文字が見えます。この文字がコードネームです。
コードネームは伴奏用の和音を表記したもので、それぞれ、Cならば「ド・ミ・ソ」、Fならば「ファ・ラ・レ」という特定の和音を意味しています。
リードシートでは、この和音をどう鳴らすかは、演奏者に委ねられており、Cならば、「ド・ミ・ソ」の3音を同時に鳴らしてもいいし、
「ド・ソ・ミ・ソ」と1音ずつばらばらに発音(アルペジオと呼ばれます)させてもかまいません。
いずれにしても、ピアノなどの楽器でこれを演奏する場合は、コードネームを見てどの音の組み合わせて鳴らすのかを瞬時にわかるよう、多少の訓練が必要になります。
「組み合わせる音が決まっているなら、1打で3音鳴らせる鍵盤があれば、こうした訓練をしなくても、コードネームによる伴奏が弾けるのではないか」という横着な発想から生まれたWEBアプリが、『かんたんコード鍵盤』です。
『かんたんコード鍵盤』の機能をご紹介
前置きが長くなりました。GASで作ったWEBアプリ、『かんたんコード鍵盤』のご紹介に入ります。
以下は、このWEBアプリにアクセスした初期画面です。
左にはピアノの鍵盤をイメージした白と黒のボックスがあり、その中にはCなどのコードネームが表示されています。ボックスの右側には、「和音☺」などのリンク文字が4つずつ配されています。
「C」と表記された鍵盤の右側の「和音☺」をクリックすると、1つのクリックだけで「ドミソ」と発音します。「♪♪♪☺」をクリックすると同じコードを「ドソミソ」とアルペジオで発音します。
さらに右側にある「和音😢」は、「ドレ#ソ」と、やや悲しげな響きがある和音で発音します。この和音は「マイナーコード」と呼ばれ、和音の内、2番目の音が半音低くなっています。「♪♪♪😢」はこれをアルペジオで発音します。
丁度1打鍵で和音が出せる鍵盤楽器のように使えます。これが『かんたんコード鍵盤』です。
鳴っている音はデバイスの内蔵音ですので、楽器としては貧弱なものですが、このアプリを使うと、コードネームさえあれば、和音の知識がなくても誰でも簡単な伴奏ができます。
利用シーンとしては、例えば、合唱のパート練習を行いたいが、グループ内に演奏ができるメンバーがいない場合に、これを使って伴奏付きで練習する・・・といった事があるかも知れません。
和音の構成音を表示する
このアプリには、画面上方にチェックボックスがあり、チェックを入れると、和音の構成音が表示されるようになっています。
以下が、その時の画面の様子ですが、たとえば「C」という鍵盤では、C4(中くらいの高さのド)、E4(ミ)、D#(ミより半音低い)、G4(ソ)の4音が使われているのが分かります。
実際に発音する場合は、☺マーク付きの和音では、1、2,4番目の音が、😢マーク付きの和音では、1,3,4番目の音が和音として使われます。
鍵盤や和音の構成がカスタマイズできる
このアプリのGASならではの特徴は、画面に表示させる鍵盤や和音の構成内容が、スプレッドシートで定義されていることです。
定義に使っているスプレッドシートをご覧ください。
A列、B列では、鍵盤の白/黒および表示文字を定義しています。
続くC列~F列では、コードの4つの構成音を定義しています。
一番右にある「テンポ」とあるセルの直下では、アルペジオを発音する際の速度を定義しています。(120とは、1分間に四分音符が120回鳴るスピードという意味です)
そして、ここを編集することで、ユーザが自由にカスタマイズできます。
例1 鍵盤数を絞る
ト長調の簡単な曲では、コードネームが3種類しかない場合があります。そんな時は鍵盤数を絞れます。
以下はスプレッドシートの不要なコードを削除して3鍵盤にした例です。
アプリにアクセスすると、見事、アプリの画面も3つだけの鍵盤に変わっています!
例2 コードの転回
和音で、Gコードというと、「ソ・シ・レ」ですが、この3音の順番は変えてもかまいません。例えばシを1オクターブ低い音にして最初にもってきた「シ・レ・ソ」もGコードです。
こうした、音の並びのアレンジを転回といい、最低音を「/音名」で示します。
以下の様にスプレッドシートを書くことで、和音の転回形も追加可能です。
アプリにアクセスすると、このスプレッドシートの編集結果が反映されているのが分かります。(以下は、チェックボックスにチェックを入れて構成音を表示させた例です)
Gコードでは、基本のものと、転回形との2つがあります。アプリを作ったら、弾き比べてみると、感じの違いが判ると思います。
例3 左半分の☺コードだけ使う(😢コードは無視)
とにかく必要なコードを並べてみることもできます。(😢コードはこの場合無視します)
以下はト長調の曲で多様されるコードを、1オクターブ内でほぼ収まる様に転回させて並べた例です。
以下がアプリの画面です。
スプレッドシートを編集することで、お手軽にカスタマイズ可能な、『かんたんコード鍵盤』いかがでしたでしょうか。
次回の記事では、GASのコードの中身について解説いたします。
この記事が気に入ったらサポートをしてみませんか?