Hello WebAudio

サイン波を鳴らします。Firefox か Chrome なら Ctrl + Shift + i開発者ツールを開いて、コンソールに以下のコードをコピペすれば音が出ます。

var ctx = new AudioContext()

var gain = ctx.createGain()
gain.gain.value = 0.1
gain.connect(ctx.destination)

var panner = ctx.createStereoPanner()
panner.pan.value = 0
panner.connect(gain)

var lfo = ctx.createOscillator()
lfo.type.value = "sine"
lfo.frequency.value = 0.6
lfo.detune.value = 0
lfo.connect(panner.pan)
lfo.start()

var osc = ctx.createOscillator()
osc.type.value = "sine"
osc.frequency.value = 600
osc.detune.value = 0
osc.connect(panner)
osc.start()

このサイン波を鳴らすコードでは、次のようにノードを繋いでいます。

Image of an audio graph.

WebAudioのAPIは AudioContext から使うことができます。

var ctx = new AudioContext()

ctx.createSomeNode() という関数で何らかのノードを作って someNode.connect(anotherNode) で出力を別のノードに接続できます。

ノードの接続先には AudioParam として定義されているパラメータも指定できます。先のコードでは lfo.connect(panner.pan) の部分が該当します。

ctx.destinationAudioDestinationNode を表しています。 AudioDestinationNode はWebAudioで作られた音が最後にたどり着く場所です。ミキサのマスタチャンネルのようなものですがゲインやパンのコントロールはありません。ゲインは GainNode 、パンはステレオに振るだけなら StereoPannerNode が使えます。