やりたいこと
Web Audio APIを使いやすくしたライブラリTone.jsを使用してブラウザから音を出してみたいと思います。
Tone.jsでは作ったメロディーを再生したり、音を加工調整することができます。マイクを利用したりできる事は多いですが、今回はメロディーを作って流してみるをゴールとします。
使用するもの
基本的な使い方は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 |
サンプル
// ミの音を全音符で鳴らす場合
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
やってみた
※音量注意
和音
See the Pen 和音 by いおり🔯 (@96usa_koi) on CodePen.
鍵盤クリックで音を鳴らす
See the Pen Untitled by いおり🔯 (@96usa_koi) on CodePen.
メロディーと伴奏
See the Pen Untitled by いおり🔯 (@96usa_koi) on CodePen.
感想まとめ
htmlで作った鍵盤のクリックが音が出た時は自分の楽器が作れたような気持ちになって楽しかったです。
二重奏や伴奏つきメロディーも挑戦していましたが今回は時間切れ。
譜面のようなイメージで2つの音を同時に鳴らせたらと思って試してみましたが、メロディーと伴奏を同時再生するのが難易度高く感じました。
最後に定番のメロディーをどうぞ。
See the Pen Jingle Bells by いおり🔯 (@96usa_koi) on CodePen.
よいクリスマスをお過ごしください！