ブラウザ上で音を出してみる

## やりたいこと
Web Audio APIを使いやすくしたライブラリ`Tone.js`を使用してブラウザから音を出してみたいと思います。
Tone.jsでは作ったメロディーを再生したり、音を加工調整することができます。マイクを利用したりできる事は多いですが、今回はメロディーを作って流してみるをゴールとします。

## 使用するもの
https://tonejs.github.io/

基本的な使い方は`triggerAttackRelease()`で使用する音や長さを指定してあげます。このライブラリは何年も前から使われており、ドキュメントもあるので詳しい使い方は書きませんが、音楽を齧った事がある人はなんとなくでも理解しやすいと思います。


### triggerAttackRelease() に用意されているパラメータ
| パラメータ | 意味 |
|:-----------|:------------:|
| notes | 音符データ |
| duration  | 音符の長さ  |
| time     | 再生開始のタイミング | 
| velocity   | 音の強さ |

notesとdurationの指定だけでも音を出す事ができます。

### notes
ドからシの音（数字は音の高さ）
| 音 | 指定値 |
|:------------:|:------------:|
| ド | C4 |
| レ  | D4 |
| ミ  | E4 |
| ファ  | F4 |
| ソ | G4 |
| ラ  | A4 |
| シ  | B4 |


半音を使う時は各音に#をつけてC#4のようにします。

### duration
| 音符の種類 | 指定値 |
|:------------:|:------------:|
| 全音符 | 1n |
| 2分音符 | 2n |
| 4分音符 | 4n |
| 8分音符 | 8n |
| 16分音符 | 16n |


### サンプル

```js:sample.js
// ミの音を全音符で鳴らす場合
const synth = new Tone.Synth().toDestination();

synth.triggerAttackRelease("E4", "1n");

```


ありがたいことにデフォルトの機械音以外にもサンプルが用意されています。
※音量注意
https://tonejs.github.io/audio/berklee/gong_1.mp3
https://tonejs.github.io/audio/salamander/A4.mp3
https://tonejs.github.io/audio/drum-samples/loops/ominous.mp3



## やってみた
※音量注意
### 和音
<p class="codepen" data-height="300" data-slug-hash="ZEwgYox" data-user="96usa_koi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/96usa_koi/pen/ZEwgYox">
  和音</a> by いおり🔯 (<a href="https://codepen.io/96usa_koi">@96usa_koi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 鍵盤クリックで音を鳴らす

<p class="codepen" data-height="300" data-slug-hash="eYxjKwm" data-user="96usa_koi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/96usa_koi/pen/eYxjKwm">
  Untitled</a> by いおり🔯 (<a href="https://codepen.io/96usa_koi">@96usa_koi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### メロディーと伴奏
<p class="codepen" data-height="300" data-slug-hash="wvNVGQX" data-user="96usa_koi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/96usa_koi/pen/wvNVGQX">
  Untitled</a> by いおり🔯 (<a href="https://codepen.io/96usa_koi">@96usa_koi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 感想まとめ
htmlで作った鍵盤のクリックが音が出た時は自分の楽器が作れたような気持ちになって楽しかったです。
二重奏や伴奏つきメロディーも挑戦していましたが今回は時間切れ。
譜面のようなイメージで2つの音を同時に鳴らせたらと思って試してみましたが、メロディーと伴奏を同時再生するのが難易度高く感じました。

最後に定番のメロディーをどうぞ。
<p class="codepen" data-height="300" data-slug-hash="poGXxyO" data-user="96usa_koi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/96usa_koi/pen/poGXxyO">
  Jingle Bells</a> by いおり🔯 (<a href="https://codepen.io/96usa_koi">@96usa_koi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
よいクリスマスをお過ごしください！