見出し画像

【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音ずつばらばらに発音(アルペジオと呼ばれます)させてもかまいません。

いずれにしても、ピアノなどの楽器でこれを演奏する場合は、コードネームを見てどの音の組み合わせて鳴らすのかを瞬時にわかるよう、多少の訓練が必要になります。


Cで押さえる鍵盤

「組み合わせる音が決まっているなら、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コードです。

こうした、音の並びのアレンジを転回といい、最低音を「/音名」で示します。

以下の様にスプレッドシートを書くことで、和音の転回形も追加可能です。

このアプリでは、転回形では😢の付いたクリックでの発音が怪しくなるので、使わない前提の部分はxにしています。

アプリにアクセスすると、このスプレッドシートの編集結果が反映されているのが分かります。(以下は、チェックボックスにチェックを入れて構成音を表示させた例です)

Gコードでは、基本のものと、転回形との2つがあります。アプリを作ったら、弾き比べてみると、感じの違いが判ると思います。


例3 左半分の☺コードだけ使う(😢コードは無視)

とにかく必要なコードを並べてみることもできます。(😢コードはこの場合無視します)

以下はト長調の曲で多様されるコードを、1オクターブ内でほぼ収まる様に転回させて並べた例です。

以下がアプリの画面です。

G7はレの音を省略しています


スプレッドシートを編集することで、お手軽にカスタマイズ可能な、『かんたんコード鍵盤』いかがでしたでしょうか。

次回の記事では、GASのコードの中身について解説いたします。






この記事が気に入ったらサポートをしてみませんか?