はじめの一音！tone.js事始める - クモのようにコツコツと

以前ご紹介したWeb Audio APIの続きになります。
ブラウザで音を出す便利なライブラリ、tone.jsを利用して、はじめの一音鳴らしてみたいと思います！

※注：このページは音が鳴ります！

tone.jsの読み込み

tone.jsは音に特化したJSのライブラリです。Web Audio APIの様々な設定を便利にまとめたメソッドが用意されています。音を早く出したくでしゃーないので、利用できるものは利用したいと思いやす！

※参考：JSのライブラリとは

【卒jQueryへの道】生JSとライブラリとフレームワークの理解 - クモのようにコツコツと

まず、tone.jsの本体ファイル「Tone.js」を読み込みます。

Codepenの場合は、下記のリンクを「Setting」の「JS」の「Add External Scripts/Pens」の検索窓で「tone.js」と入力するとCDNのURLが出てきますので読み込みましょう。

<script>https://cdnjs.cloudflare.com/ajax/libs/tone/13.1.25/Tone.js</script>

こんにちはTone

tone.jsのチュートリアルの最初にある「Hellow Tone」にはこんなコードがある。

//create a synth and connect it to the master output (your speakers)
var synth = new Tone.Synth().toMaster();

//play a middle 'C' for the duration of an 8th note
synth.triggerAttackRelease("C4", "8n");

一つ目のコメントをGoogle先生に翻訳してもらったところ「シンセを作成し、それをマスター出力に接続する（あなたのスピーカー）」。ふむ。まず変数synthにnewでToneオブジェクトを複製（インスタンス生成）しているようだ。*1

※参考：【JS】newとプロトタイプとクラス - クモのようにコツコツと

その次に.Synth()メソッド、toMaster()メソッドが続く。Synth()が「シンセを作成」で、toMaster()がマスター出力ってわけだね。二つ目のコメントも先生、頼みます。「8thノートの途中で途中の「C」を演奏する」ん？途中で途中の？

C4とはCの4オクターブ目という意味のようだ。Cは「ド」ね。
鍵盤楽器でC3とかC4とか表記がありますが、調べたら、中央のドはC4と書いてあり... - Yahoo!知恵袋

その次の「8thノート」は音の長さを意味するようだ。八分音符かな。
eighth noteとは何？ Weblio辞書

変数synthにtriggerAttackRelease()メソッドが続き、第一引数はC4（ド）、第二引数は8n。
ということで、はじめの一音、いっちょ鳴らしてみませう。それっ！

………おわかりいただけただろうか。

実はこのページがロードされた時に一回「ポーン」と音が鳴ったことを…。
そう、JSだけしかない状態だと、どうやらページの読み込みがトリガーになるようなのです。
心の準備がないユーザーにいきなり音を聴かせるのはあまり親切とは言えないですね。（ごめんなさい）

とは言え、紛れもなくこれが私にとっては音声ファイルを使わずして、ブラウザ自体が奏でた音なので感動もひとしおでございます。（IEは鳴らんがな！！）

一音鍵盤を作る

親切設計のために、鍵盤を押すと音がなるようにしたい。
ボタンアクションのイベントを作るか。

※参考：JSのイベントについてはこちら

【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5 - クモのようにコツコツと

イベントはこんなコードでしたね。

//DOM
var btn = document.getElementById("ID名");

//イベントリスナ
btn.addEventListener("click", function () { 処理 }, false);

変数btnにID名を紐付けて、イベントリスナの引数にクリックイベントと無名関数の処理内容を入れます。

ではせっかくなのでボタンを…

<div id="piano">
   <div id="do">ド</div>
</div>

ピアノの鍵盤風にしましょう。

#piano {
  background: #333;
  padding: 10px;
  width: 30px;
  display: block;
  margin: 0 auto;

}

#do {
  background: #FFF;
  border: 1px solid #333;
  width: 30px;
  text-align: center;
  padding: 50px 0;
}

そんで、ID名、処理内容にを当てはめるとこうなる。

//DOM
var btn = document.getElementById("do");

//イベントリスナ
btn.addEventListener("click", function () { 
//シンセ生成
var synth = new Tone.Synth().toMaster();
//ドが八分音符の長さ鳴る
synth.triggerAttackRelease("C4", "8n"); 
}, false);