Web Audio APIとVue.jsで複数音源をミックスしコードを鳴らす

初期のシンセサイザーは、単音しか発音できなかった。いわゆる管楽器みたいなポジション。なのでコード（和音）を鳴らしたい場合は複数台のシンセサイザーが必要だった。

ということで、今回はコードを鳴らすために複数のオシレーターを使い、それらの音源をミックスして鳴らそうと思う。


OscillatorNodeやGainNodeの詳しい説明は、以下の記事を参照してほしい。

Web Audio APIとVue.jsでADSRエンベロープ（VCA）をコントロールする

前回までにキーボードをつくったり、オシレータをつくったり、オシロスコープをつくったりした。
今回は音の三要素の最後の1つ、音量をコントロールする。
エンベロープジェネレータを用い、ADSR（Attack/Decay/Sustain/Release）をコントロールするとともに、エンベロープをグラフ表示する。

ADSRとは？

Attack/Decay/Sustain/Releaseの頭文字をとったもので、音量をコントロールする機能。

• Attack（立ち上がり）
• 発音（打鍵）されてから最大音量になるまでの時間
• Decay（減衰）
• 最大音量になってからSustainのレベルになるまでの時間
• Sustain（保持）
• Decay後の音量。発音中はずっとSustainレベルが保持される
• Release（余韻）
• 離鍵されてから音量が0になるまでの時間

この4つのパラメータを弄ることで「ドンッ!!」とか「ほわぁ〜ん」とかいう音を作ることができる。

Web Audio APIとVue.jsで波形を見るためのオシロスコープをSVGとCanvasでつくる

前回、いろんな音がだせるオシレーターをつくった。
音が出せるようになったら、やっぱりどんな波形か見たくなるのが世の常。

ということで、今回はWeb Audio APIとSVG/Canvasをつかってオシロスコープをつくる。
パフォーマンス検証のためSVGとCanvasの双方をつかったが、サンプルが小さかったこともあり違いは見られなかった。（詳細は後述する）

Web Audio APIとVue.jsでオシレーターをつくる（カスタム波形、正弦波、矩形波、ノコギリ波、三角波）

前回、Web Audio APIとVue.jsでシンプルなシンセサイザーをつくった。ただ「シンプル」ということで正弦波（サイン波）しか鳴らせない。

もっといろんな音を鳴らしたい！

ということで正弦波はもちろん、矩形波、ノコギリ波、三角波、カスタム波形をだせる
オシレーターをつくる。

機能としては以下のとおり。

• 出す波形を選択できる
• 正弦波（Sine wave）
• 矩形波（Squere wave）
• ノコギリ波（Sawtooth wave)
• 三角波（Triangle wave）
• カスタム波形（Custom）
• 鳴らす周波数を変更できる
• セント単位で変更できる

Web Audio APIとVue.jsでシンプルなシンセサイザーをつくる

ブラウザで使えるMinimoogとかいいじゃん！そんなことを思い立ち、Web Audio APIを勉強しはじめた。

今回は、その第一歩として88鍵のキーボードを表示し、クリックしたら音がなるものをつくろうと思う。Vue.jsを使っているのは、要素の生成やイベントハンドリングを楽にするためだ。