(アイキャッチ画像：Photo by Omid Armin on Unsplash ）
この記事は、GASによる以下の簡単シンセサイザーアプリの解説記事になります。
（操作の動画です。再生の場合は音が出ますのでご注意！）
今回は、WEBアプリで便利に音を扱える「Tone.js」の導入と、それを用いて簡単に発音させる方法についてご説明します。
目次
Tone.jsの導入～CDNで導入～
今回の解説は、テンプレートに関する記述です。GASのプロジェクトを作成したら、テンプレート（INDEXなどの名称のHTMLファイル）を新規追加し、そこに今回ご説明の内容をここに記述します。
前の記事で説明した様に、このＷＥＢアプリではTone.jsというオープンソースのライブラリを使います。
このライブラリは、Web Audio API という、WEB上で音声を操作する仕組みを簡単に扱える様にするものです。
CDNというリンク先を指定するだけで導入できるよう提供されていますので、以下の様なコードをテンプレートのヘッドセクションに記載するだけで導入が完了します。
また、今回はJQueryという、HTML上のオブジェクト選択などを簡単にするライブラリも使います。導入は、この両者を併せて以下の様に記載するだけで完了します。
<head>
</head>
なお、JQueryについてご存じない方は、以下の記事で少し触れているので宜しければご参考にしてください。
簡単に言いますと、JQueryとはWEBサイト中の要素へ自在にアクセスできる関数群を提供するライブラリです。今回はサイト中の音名へのアクセスに使用しています。
さて、次にいよいよTone.jsによる簡単なコードの記載方法をご説明します。
単音を鳴らす
Tone.jsは、多くのライブラリがそうである様に、＜scripu＞～＜/script＞セクションを設けて、その中に Javscript のコードで記載するようになっています。
まずはごくごく基本的な内容として、音を ♪ポーン、とひとつ鳴らすだけのコードのを実装してみることにします。
//音源を設定する
var 音源要素 = new Tone.Synth().toMaster();
ここで音階の表現は、「ド」「レ」「ミ」というよくあるイタリア式表記ではなく、「Ｃ４」「Ｄ４」「Ｅ４」などと、ドイツ式で表します。（音楽に詳しい方はな見慣れた表記だと思います）
また、音の長さの表現は、４分音符（♩）だと４ｎ、8分音符（♪）だと8ｎといった風に特殊な記号で表します。
なんとも素朴なコードですが、Tone.js を使わないで同じ機能を実現、つまり「WEB Audio API」を通常の Javascript だけで表現しようとすると、かなり長いコードになってしまいます。
つまり、この素朴さこそ、Tone.js の威力なのです！
ここで、和音について少しばかりのご説明・・・
この節は、音楽に詳しいい方はスルー頂いて結構です。
和音とは、大体３～４ケの音階を同時に鳴らした音を言います。
音階の集まりは適当な訳ではなくて、「ド（C）」から始まり、響きが明るい和音（メジャーコードと言います）だと、「ド・ミ・ソ」などと、和音でどの音階を使うかは、基本的には決められています。
今回は、「ド（Ｃ）」「ド＃（Ｃ＃）」「レ（Ｄ）」で始まる明るい和音（メジャーコード）を鳴らす事にしました。具体的には以下の音を鳴らします。
- 「ド（Ｃ）」で始まるメジャーコード ：ド（Ｃ）・ミ（Ｅ）・ソ（Ｇ）
- 「ド＃（Ｃ＃）」で始まるメジャーコード ：ド＃（Ｃ＃）・ファ（Ｆ）・ソ＃（Ｇ＃）
- 「レ（Ｄ）」で始まるメジャーコード ：レ（Ｄ）・ファ＃（Ｆ＃）・ラ（A）
英語だと「コード(chord)」といいますが、日本語の「和音」の方が意味の解りやすい言葉だと思います。この言葉を導入した先人に感謝！
再びプログラムに戻り、和音を鳴らす方法の解説
さて、では先にご説明した、Tone.Synth() で要素で和音を鳴らすにはどうするのでしょうか。
実は、Tone.Synth() は和音を扱えないのです！
ではどうするかというと、Tone.Synth()を３つ用意し、それぞれ単音を鳴らす事で、結果として和音にしています。
この方法は、３つの音が微妙にずれて発音する場合があるので、実はあまりお奨めできない方法です。その代わりプログラムは平易なので利用した次第です。
プログラムを抜き出すと、以下の様になっています。
①function onClick(link){}
リンク要素をクリックすると発動する関数です。
②var 音源1 = new Tone.Synth().toMaster();
シンセサイザーを準備します。プログラムでは３つ用意しています。
実は、Tone.js には和音を扱う専用の要素が設定されています。しかし、実装がやや複雑化するので今回は敢えて使いませんでした。
次回は テンプレートファイルの続きですが、鍵盤風のビジュアルや、クリックした箇所のテキストを利用して目的の音を出す部分ついて、ご説明する予定です。
