【GAS】スプレッドシートに数字譜を書いて、ピアノの音を奏でてみよう

以前の記事で、Javascriptで使えるオープンソースの音楽ライブラリ、「Tone.js」をGAS（Googl Apps Script）で実装する方法をご紹介しました。

【09_演奏アプリ】オープンソースのライブラリ「Tone.js」を使って「簡単コード鍵盤」を作ろう！｜GoogleスプレッドシートでWEBアプリを作ろう

GASとJavascriptライブラリは非常に相性が良く、簡単で高機能な「Tone.js」という音楽ライブラリを簡単に組み込んで音楽を演奏させる事ができます。

しかし、ピアノなど、楽器のサンプル音源を使う機能だけはうまく機能しません。GASの泣き所ですが、外部のソースファイルをうまく取り込めないからです。

しかし、ピ・ポ・パ・・・という電子音だけではいかにも味気ない・・・そこで、ピアノで奏でるWEBアプリを作ってみました。

ピアノの音源ファイルについては、「BASE64エンコード」を使ってを取り込みます。「BASE64エンコード」については以下の記事を参照ください。

また、譜面は、表計算と相性の良い、数字譜という形式を使う事にしました。

GASでピアノの音色を奏でてみよう

ご紹介するWEBアプリは、以下の様な外観で、GASのテンプレートで実装しています。

Audio要素が沢山ならんでいますが、この要素の音源には、Googleドライブに保存した音源ファイルが組み込まれています。

Audio要素に音源をセットするには、通常は
　＜audio src=GoogleドライブのリンクURL>
とコードで記述すれば組み込めますが、GASではリンクがうまく機能しませんので、「BASE64エンコード」を使って組み込んでいます。

そして、楽譜はスプレッドシートに以下の様な「数字譜」で記しておきます。

後の記事でご紹介しますが、この表記方法は和音を表しにくいという短所はあるものの、五線譜よりも表計算に記載しやすい形式です。

　サンプルで卒業式の定番曲『威風堂々』をどうぞ

言葉でご説明するより聞いてみて頂いた方が早いので、早速、演奏例をお耳にいれましょう。もうすぐ卒業シーズンですので、卒業式での定番曲、エルガーの「威風堂々」です。（短縮していて３０秒ほどです）

電子音より聞いた満足度は高い・・・と個人的には思うのですが、どうでしょうか。

ただし、残念ながら「Tone.js」には組み込む事ができませんでした。Audoi要素を順にPlayさせるだけ、という単純な機能で奏でていますので、単純でテンポが遅い曲が向いています。（厳密なタイミング制御ができないため）

子どものトイピアノの様なものですが、簡単な楽曲をメンバーに配信したい時などに使えそうでしょうか。

詳しい内容については追っての記事でご説明します。