WebAudioAPIの使い方の超入門編

よく使うオブジェクト

AudioContext

WebAudioAPIに関するオブジェクトをすべて管理するもの。
音源などもAudioContextを通して作られたオブジェクトを通じて行う。

AudioNode

connectメソッドを使って他のAudioNodeに接続できるもの接続の解除であるdisconnectメソッドも持っている。
実際に使うのはこれらを継承した音源やエフェクターなどでそれを上流から接続してアウトプットにつなげる。

AudioDistenationNode

出力先、AudioContext.destinationがブラウザの出力先を持っておりここに接続することで音を出す。

音を出す止める

// AudioContextはどこからでも使いたいからグローバルにする。
var audioCtx=new(window.AudioContext || window.webkitAudioContext)();

$(function(){
    var oscillator=audioCtx.createOscillator();
    oscillator.connect(audioCtx.destination);
    oscillator.start();

    $(document).on('click', function(){
    console.log(audioCtx);
// AudioContext.suspend/resumeを使うとソースは捨てられない。
        if( audioCtx.state=="running" ) audioCtx.suspend();
        else if( audioCtx.state=="suspended" ) audioCtx.resume();
    });
});

画面を読み込めばサイン波のC(440Hz)が流れる画面(document)をクリックすると止まる、もう一度クリックすると再び流れる。
oscillatorはAudioNodeを継承したOscillatorNodeでファイルを必要とせず音を再生できる。
これを出力先につなぐと音声が出せる。
パラメーターをいじることで音程/音色等はかえられる。

注意点

AudioContextはwebkitベンダープリフィックス付きもあるので対処をしておく。
(サポートしていないブラウザもあるので警告を出したほうがいいかもしれない)
oscillator.stop()でも音は止まるが音源は使い捨てなのでstopを呼ぶとそのoscillatorは使えなくなる。
AudioContext.suspendは停止状態なので捨てられない。
どっちがいいかは使い方によりそうである。

どんなことが出来そうか

今回は音源はライブラリ提供のものを使ったがもちろん外部ファイルを使うこともできる。
foundfontを使ってMIDIを演奏しているサイトもある。
oscillatorでも自分で関数を定義も出来そうでエフェクターの種類もいろいろあるのでライブラリだけでどうにかなりそうな気もする。
要素や要素も音源として使えるようなのでエフェクターの使いかたによってはブラウザだけで高性能な音楽プレイヤーになりそうである。
Analyzerというものがあり音声を可視化してくれる、それ以外にもいろいろ出来そうな、のでこれを使うと音声データの作成も捗るかもしれない。

参考にしたサイト

MDN AudioContext 主要な要素はここから探せる
MDN 利用例 利用例もシンプルでわかりやすく解説付きでわかりやすい
WebAudioAPIとsoundfontの利用例