PannerNodeクラス / AudioListenerクラスの詳細解説に入る前に, これらのクラス, つまりは, Web Audio APIにおける3D音響の座標系とベクトルについて解説しておきます. ベクトルに関しては, Web Audio APIに関することではなく, 数学・物理のことなので, そんなの知ってるよ〜という方はスルーしてください.

PannerNodeクラスを利用するためには, インスタンスを生成する必要があります. AudioContextインスタンスのcreatePannerメソッドを利用します.

PannerNodeインスタンスで定義されているプロパティは多いので, まずはそれらの概要を記載します.

AudioListenerクラスを利用するためには, インスタンスを生成する必要がありますが, インスタンス生成のためのメソッドは定義されていません. その理由は, リスナーが複数存在する状況をシミュレートする意味がないからです. したがって, AudioListenerクラスはシングルトンパターンのような設計で, AudioContextインスタンスのlistenerプロパティがAudioListenerインスタンスとなります. つまり, AudioContextインスタンスを1つしか生成しなければ, AudioListenerインスタンスも1つしか存在しません.

PannerNodeインスタンスと比較すると, AudioListenerインスタンスのプロパティはそれほど多くありません. また, PannerNodeインスタンスと同じようなメソッドが定義されています.

最後に1つ注意点として, PannerNodeインスタンス / AudioListenerインスタンスのベクトル設定のメソッドの引数に単位は定義されていません. したがって, 作成するアプリケーションに応じた適切な値を調整をするようにしてください.

ChannelSplitterNodeインスタンス / ChannelMergerNodeインスタンスを生成するためには, AudioContextインスタンスのcreateChannelSplitterメソッド / createChannelMergerメソッドを利用します.

サンプルコード 05

window.AudioContext = window.AudioContext || window.webkitAudioContext;

// Create the instance of AudioContext
var context = new AudioContext();

// Create the instance of OscillatorNode
var oscillator = context.createOscillator();  // for input

// for legacy browsers
oscillator.start = oscillator.start || oscillator.noteOn;
oscillator.stop  = oscillator.stop  || oscillator.noteOff;

// Create the instance of ChannelSplitterNode
var splitter = context.createChannelSplitter(2);  // The number of splitted channels

// Create the instance of ChannelMergerNode
var merger = context.createChannelMerger(2);  // The number of merged channels

サンプルコード 05では左右のチャンネルごとに異なるサウンド処理を適用することを想定して2 (チャンネル) を指定しています. ちなみに, 引数を省略した場合のデフォルト値は6です. これは, 5.1チャンネルサラウンド方式を考慮しての値だと思います. また, 指定できる最大のチャンネル数は32で, それを超えるチャンネル数を指定すると例外が発生します.

ChannelSplitterNodeクラスもChannelMergerNodeクラスもAudioNodeクラスをプロトタイプ継承しているので, connectメソッドを利用可能です. さらに, ChannelSplitterNode / ChannelMergerNodeを利用する場合のみ, connectメソッドの第2引数と第3引数が実質的に意味をもってきます.

ChannelSplitterNodeインスタンスのconnectメソッドは, AudioNode / AudioParamいずれの接続においても, 第2引数で (ChannelSplitterNodeからの) 出力のチャンネルを指定することが可能です. また, ChannelSplitterNodeにより分割されたノードのconnectメソッドはChannelMergerNodeに接続する場合に, 第3引数で (ChannelMergerNodeに対する) 入力のチャンネルを指定することが可能です.

ただし, 指定可能な最大のチャンネル数はインスタンス生成時に指定したチャンネル数です. チャンネルは0から割り当てられているので, (インスタンス生成時に指定したチャンネル数 - 1) が指定可能な最大のチャンネルです. それを超えるチャンネルを指定した場合はエラーが発生します.

サンプルコード 06

/*
 * sample code 01
 */

// ....

// Create the instance of GainNode
var gainL = context.createGain();  // for Left  Channel
var gainR = context.createGain();  // for Right Channel

gainL.gain.value = 1.00;
gainR.gain.value = 0.25;

// To Stereo
var processor = context.createScriptProcessor(2048, 1, 2);

oscillator.connect(processor);        // OscillatorNode (Monaural input) -> Stereo
processor.connect(splitter);          // ScriptProcessorNode (Stereo input) -> ChannelSplitterNode
splitter.connect(gainL, 0, 0);        // ChannelSplitterNode -> GainNode (Left  Channel)
splitter.connect(gainR, 1, 0);        // ChannelSplitterNode -> GainNode (Right Channel)
gainL.connect(merger, 0, 0);          // GainNode (Left  Channel) -> ChannelMergerNode (Left  Channel)
gainR.connect(merger, 0, 1);          // GainNode (Right Channel) => ChannelMergerNode (Right Channel)
merger.connect(context.destination);  // ChannelMergerNode -> AudioDestinationNode (Output)

processor.onaudioprocess = function(event) {
    var inputs   = event.inputBuffer.getChannelData(0);
    var outputLs = event.outputBuffer.getChannelData(0);
    var outputRs = event.outputBuffer.getChannelData(1);

    // Monaural -> Stereo
    outputLs.set(inputs);
    outputRs.set(inputs);
};

oscillator.start(0);

OscillatorNodeは1チャンネルしかもたないモノラルな入力なので, そのままChannelSplitterNodeに接続すると1チャンネル (左チャンネル) のみしか出力されないので, ScriptProcessorNodeを利用して擬似的にステレオ化しています (したがって, ステレオのオーディオデータを入力に利用する場合は必要ない処理です).

ChannelSplitterNodeからの出力を左チャンネル用のGainNodeと右チャンネル用のGainNodeにそれぞれ接続しています. ChannelSplitterNodeにより分割されたノード (左右チャンネル用のGainNode) をそれぞれ, ChannelMergerNodeの対応するチャンネルに入力ノードとして接続しています.

エフェクトとしては何もおもしろくないですが, 左チャンネルのGainNodeのgainプロパティを右チャンネルよりも大きくすることで, 左側に音源 (音像) があるように知覚することができると思います. これは左チャンネルからの出力しかないわけではありません (試しに, 右チャンネルだけで聴いてもボリュームは小さいですが出力されているはずです). 逆に, 右チャンネルのGainNodeのgainプロパティを左チャンネルよりも大きくすることで, 右側に音源 (音像) があるように知覚することができると思います.

サンプルコードではかなり単純で特に意味のない処理をチャンネルごとに実行しましたが, 何となくこんな感じで使うのかなということをインプットしてもらえれば十分です. もう少し実践的な実装は, オートパンの実装解説でいたします.

最後に, connectメソッドの引数指定 (connectメソッドのオーバーロード定義) をまとめておきます.

まずは, PannerNodeインスタンスを生成してノード接続を実装します.

また, AudioListerインスタンスはAudioContextインスタンスのlistenerプロパティで参照します. AudioListenerインスタンスは, AudioNodeクラスをプロトタイプ継承していないので, connectメソッドは利用できません (クラスの名前からもわかります. AudioNodeクラスをプロトタイプ継承しているクラスは 'Node' と接尾辞がつきます). 実は, PannerNodeをAudioDestinationNodeに (直接的, または, 間接的に) 接続することで有効になります. これは注意すべき点であり, AudioListenerだけを利用したいと思っても, PannerNodeの接続がなければ利用できないということです.

サンプルコード 01

window.AudioContext = window.AudioContext || window.webkitAudioContext;

// Create the instance of AudioContext
var context = new AudioContext();

// Create the instance of PannerNode
var panner   = context.createPanner();

// Get the instance of AudioListener
var listener = context.listener;

// Create the instance of OscillatorNode
var oscillator = context.createOscillator();  // for input

// for legacy browsers
oscillator.start = oscillator.start || oscillator.noteOn;
oscillator.stop  = oscillator.stop  || oscillator.noteOff;

// Connect nodes for effect (Auto Panner) sound
// OscillatorNode (Input) -> PannerNode (pan) -> AudioDestinationNode (Output)
oscillator.connect(panner);
panner.connect(context.destination);

次に, パンを周期的に変化させるためにLFOを実装します. 他のモジュレーション系エフェクトと異なり, オートパンのLFOの実装は少々異なります.

その理由は, PannerNodeインスタンスにはポジションを直接設定するためのプロパティが定義されておらず, setPositionメソッドで設定する必要があります.

また, イントロダクションで解説したconnectメソッドについて思い出してほしいのですが, connectメソッドが接続可能, つまり, connectメソッドの第1引数に指定できる型は, AudioNodeインスタンスかAudioParamインスタンスのみです. さらに言えば, 現状の仕様では, PannerNodeクラス / AudioListenerクラスともに, AudioParam型のプロパティは定義されていません.

LFOを実装するために必要なノードは, OscillatorNodeとScriptProcessorNodeです. ScriptProcessorNodeが必要な理由は, LFO (OscillatorNode) からの入力をPannerNodeインスタンスのsetPositionメソッドの引数に指定するためです. つまり, LFOからのサウンドデータに直接アクセスする必要があるからです.

では, LFOのためのインスタンス生成とノード接続を実装します.

サンプルコード 02

/*
 * sample code 01
 */

// ....

// Create the instance of OscillatorNode (for LFO)
var lfo = context.createOscillator();

// for leagcy browsers
lfo.start = lfo.start || lfo.noteOn;
lfo.stop  = lfo.stop  || lfo.noteOff;

// Set Rate
lfo.frequency.value = 0.5;  // 0.5 Hz

// for legacy browsers
context.createScriptProcessor = context.createScriptProcessor || context.createJavaScriptNode;

// for selecting optimized buffer size
var getBufferSize = function() {
    if (/(Win(dows )?NT 6\.2)/.test(navigator.userAgent)) {
        return 1024;  // Windows 8
    } else if (/(Win(dows )?NT 6\.1)/.test(navigator.userAgent)) {
        return 1024;  // Windows 7
    } else if (/(Win(dows )?NT 6\.0)/.test(navigator.userAgent)) {
        return 2048;  // Windows Vista
    } else if (/Win(dows )?(NT 5\.1|XP)/.test(navigator.userAgent)) {
        return 4096;  // Windows XP
    } else if (/Mac|PPC/.test(navigator.userAgent)) {
        return 1024;  // Mac OS X
    } else if (/Linux/.test(navigator.userAgent)) {
        return 8192;  // Linux
    } else if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
        return 2048;  // iOS
    } else {
        return 16384;  // Otherwise
    }
};

// Create the instance of ScriptProcessorNode for LFO
var processor = context.createScriptProcessor(getBufferSize(), 1, 1);

// Connect nodes for LFO that changes pan periodically
// OscillatorNode (LFO) -> ScriptProcessorNode (setPosition) (-> AudioDestinationNode (dummy))
lfo.connect(processor);
processor.connect(context.destination);

ScriptProcessorNodeの出力は必要ないので, createScriptProcessorメソッドの第3引数は0でもよさそうなのですが, ScriptProcessorNodeインスタンスのonaudioprocessイベントハンドラはAudioDestinationNodeに接続しないと発生しないので, 出力チャンネル数に1を指定 (createScriptProcessorメソッドの第3引数) します. createScriptProcessorメソッドの第2引数は入力チャンネル数ですが, LFOからの入力はデバイスに出力しないので, 1チャンネルで十分です.

そして, LFOの実装で最も重要となるのがonaudioprocessイベントハンドラです. もっとも, 単純に左右 (つまり, x軸方向) にパンを移動させるだけであればそれほど難しくありません. LFOから入力されたサウンドデータを, PannerNodeインスタンスのsetPositionメソッドの第1引数に指定するだけです (y, z軸方向への移動はさせないので, 0を指定します).

サンプルコード 03

/*
 * sample code 02
 */

// ....

processor.onaudioprocess = function(event) {
    // Get the instance of Float32Array for input data (Array size equals buffer size)
    var inputs  = event.inputBuffer.getChannelData(0);
    // var outputs = event.outputBuffer.getChannelData(0);  // Not used

    for (var i = 0; i < this.bufferSize; i++) {
        // Move pan
        panner.setPosition(inputs[i], 0, 0);
    }
}

// Start LFO
lfo.start(0);

これでパンが周期的に変化します. しかしながら, LFOからの入力は-1 〜 1までの値なので, パンの移動も-1 〜 1の範囲に限られてしまいます. そこで, LFOのdepthを設定することによって, パンの移動量を任意に設定することが可能になります.

サンプルコード 04

/*
 * sample code 03
 */

// ....

// Set Depth
var depth = 2.5;

processor.onaudioprocess = function(event) {
    // Get the instance of Float32Array for input data (Array size equals buffer size)
    var inputs  = event.inputBuffer.getChannelData(0);
    // var outputs = event.outputBuffer.getChannelData(0);  // Not used

    for (var i = 0; i < this.bufferSize; i++) {
        // Move pan
        var x = depth * inputs[i];
        panner.setPosition(x, 0, 0);
    }
}

// Effector (Auto Panner) ON
lfo.start(0);

以上でオートパンの実装が完了しましたが, 1つだけ問題があります. それは, 空間音響アルゴリズムがHRTF, つまり, PannerNodeインスタンスのpanningModelプロパティがデフォルト値の 'HRTF' のままだと, 完全に左右に音が割り振られないことです. 空間音響アルゴリズムのついては, 他の書籍やWebサイトなど参考にしてもらいたいと思いますが, HRTF (Head - Related Transfer Function) とは頭部伝達関数のことで, 簡単に表現すると, 人の頭部 (頭や耳) が音の伝達に影響している状態を再現するためのアルゴリズムです. これによって, 完全に右側にパンがあったとしても, その状態をシミュレートするので, わずかながらですが左側にも音が回り込みます.

もちろん, これでもオートパンエフェクトの1つのバリエーションとしては利用できるので大きな問題ではありません. しかしながら, 完全に左右に音を割り振るバリエーションも実装したいところです. 空間音響アルゴリズムをequalpower, つまり, PannerNodeインスタンスのpanningModelプロパティを 'equalpower' に設定することによってそれが可能です.

サンプルコード 05

/*
 * sample code 04
 */

// ....

panner.panningModel = (typeof panner.panningModel === 'string') ? 'equalpower' : 0;

最後に, オートパンの実装をまとめます.

サンプルコード 06

window.AudioContext = window.AudioContext || window.webkitAudioContext;

// Create the instance of AudioContext
var context = new AudioContext();

// Create the instance of PannerNode
var panner   = context.createPanner();

// Get the instance of AudioListener
var listener = context.listener;

// Create the instance of OscillatorNode
var oscillator = context.createOscillator();  // for input
var lfo        = context.createOscillator();  // for LFO

// for legacy browsers
oscillator.start = oscillator.start || oscillator.noteOn;
oscillator.stop  = oscillator.stop  || oscillator.noteOff;
lfo.start        = lfo.start        || lfo.noteOn;
lfo.stop         = lfo.stop         || lfo.noteOff;

// for legacy browsers
context.createScriptProcessor = context.createScriptProcessor || context.createJavaScriptNode;

// for selecting optimized buffer size
var getBufferSize = function() {
    if (/(Win(dows )?NT 6\.2)/.test(navigator.userAgent)) {
        return 1024;  // Windows 8
    } else if (/(Win(dows )?NT 6\.1)/.test(navigator.userAgent)) {
        return 1024;  // Windows 7
    } else if (/(Win(dows )?NT 6\.0)/.test(navigator.userAgent)) {
        return 2048;  // Windows Vista
    } else if (/Win(dows )?(NT 5\.1|XP)/.test(navigator.userAgent)) {
        return 4096;  // Windows XP
    } else if (/Mac|PPC/.test(navigator.userAgent)) {
        return 1024;  // Mac OS X
    } else if (/Linux/.test(navigator.userAgent)) {
        return 8192;  // Linux
    } else if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
        return 2048;  // iOS
    } else {
        return 16384;  // Otherwise
    }
};

// Create the instance of ScriptProcessorNode for LFO
var processor = context.createScriptProcessor(getBufferSize(), 1, 1);

// Connect nodes for effect (Auto Panner) sound
// OscillatorNode (Input) -> PannerNode (pan) -> AudioDestinationNode (Output)
oscillator.connect(panner);
panner.connect(context.destination);

// Connect nodes for LFO that changes pan periodically
// OscillatorNode (LFO) -> ScriptProcessorNode (setPosition) (-> AudioDestinationNode (dummy))
lfo.connect(processor);
processor.connect(context.destination);

// Set Depth
var depth = 2.5;

// Set Rate
lfo.frequency.value = 0.5;  // 0.5 Hz

processor.onaudioprocess = function(event) {
    // Get the instance of Float32Array for input data (Array size equals buffer size)
    var inputs  = event.inputBuffer.getChannelData(0);
    // var outputs = event.outputBuffer.getChannelData(0);  // Not used

    for (var i = 0; i < this.bufferSize; i++) {
        // Move pan
        var x = depth * inputs[i];
        panner.setPosition(x, 0, 0);
    }
}

// Start sound
oscillator.start(0);

// Effector (Auto Panner) ON
lfo.start(0);

以上でオートパンが完成しました. ところで, AudioListenerインスタンスにもsetPositionメソッドがあります. パン (音源) を移動させるのではなく, リスナー (聴取者) を移動させることによってオートパンを実装することも可能ですが, 初期状態のリスナーはz軸のマイナス方向を向いているので, リスナーを右側 (x > 0) に移動させると, パンは左側にあることになるので, 左側から音が聴こえ (音像が左側に位置する), 逆に, リスナーを左側 (x < 0) に移動させると, パンは右側にあることになるので, 右側から音が聞こえます (音像が右側に位置する). これを解決するには, リスナーの向きをsetOrientationメソッドで変更する必要があります. また, AudioListenerを利用するためには, 必ずPannerNodeが必要になるのでパンを移動させる実装を解説しました.

デモ 17では, パンの移動を単純に左右に移動させるだけではなく, PannerNodeにおけるz軸方向にも移動させることが可能になっています. panningModelプロパティのデフォルト値は 'HRTF' ですが, 'equalpower' にも設定可能です. パンが左右に移動しても, 'HRTF' の場合は左右から出力されること, 'equalpower' の場合はパンの方向からしか出力されないことを実際に試してみてください. また, Canvasに描画されているリスナー (ヘッドフォンのアイコン) はドラッグによって移動可能です. ドラッグした座標に対応するようにAudioListenerインスタンスのsetPositionメソッドを利用してリスナーを移動させています.

ちなみに, パン (スピーカーのイラスト) は右側を向いています. すなわち, setOrientationメソッドのデフォルトの設定 (1, 0, 0) を反映した状態になっています. しかしながら, サウンドコーンのためのプロパティはデフォルト値のままなので, 指向性をもちません. したがって, パンの向きはサウンドには影響していません.

デモ 17 ＊ ヘッドフォンやイヤホンをご利用ください

オートパンの実装方法としては, トレモロとChannelSplitterNodeクラス / ChannerlMergerNodeクラスを利用するアプローチもあります. トレモロについては, トレモロ・リングモジュレーターのページで解説していますので, トレモロって…何？という方は, ぜひご覧になってください.

ところで, トレモロとオートパン, すなわち, トレモロとパンの移動はまったく関係がないように思えます. なぜ, トレモロ (とチャンネル制御のためのクラス) を利用してオートパンが実装可能なのでしょうか？それは, 左右のチャンネルに対して同様にトレモロをかけるのではなく, 振幅の大小が互い違いになる (例えば, 左チャンネルの振幅が1であれば, 右チャンネルの振幅が0) ようにトレモロをかけることによって, 擬似的にパンが移動しているように知覚させることが可能だからです.

したがって, トレモロの実装にプラスしてChannelSplitterNodeクラス / ChannerlMergerNodeクラスが必要になるわけです.

もっとも, 擬似的なパンの移動なので, PannerNodeクラスを利用した場合のように, y軸やz軸方向にパンを移動させたり, 空間音響のアルゴリズムを指定したりすることはできないので, オートパンのバリエーションとしては劣ってしまいますが, ChannelSplitterNodeクラス / ChannerlMergerNodeクラスの実用例としては最適なので解説しておきたいと思います.

まずは, エフェクト音の出力のためのノード生成と接続を実装します.

サンプルコード 07

window.AudioContext = window.AudioContext || window.webkitAudioContext;

// Create the instance of AudioContext
var context = new AudioContext();

// for the instance of MediaElementAudioSourceNode
var source = null;

// for legacy browsers
context.createGain = context.createGain || context.createGainNode;

// Create the instance of GainNode
var amplitudeL = context.createGain();              // for Left  Channel Tremolo
var amplitudeR = context.createGain();              // for Right Channel Tremolo
var splitter   = context.createChannelSplitter(2);  // for reversing Tremolo each channel
var merger     = context.createChannelMerger(2);    // for reversing Tremolo each channel

amplitudeL.gain.value = 1;  // 1 +- depth
amplitudeR.gain.value = 1;  // 1 +- depth

var audio = new Audio('sample.wav');

audio.addEventListener('loadstart', function() {
    // Create the instance of MediaElementAudioSourceNode
    source = context.createMediaElementSource(audio);

    // Connect nodes for effect (Auto Panner) sound
    //                                                             -> GainNode for Left  Channel (amplitude) -
    // MediaElementAudioSourceNode (Input) -> ChannelSplitterNode -|                                           |-> ChannelMergerNode -> AudioDestinationNode (Output)
    //                                                             -> GainNode for Right Channel (amplitude) -
    source.connect(splitter);
    splitter.connect(amplitudeL, 0, 0);
    splitter.connect(amplitudeR, 1, 0);
    amplitudeL.connect(merger, 0, 0);
    amplitudeR.connect(merger, 0, 1);
    merger.connect(context.destination);
}, false);

OscillatorNodeは1チャンネルしかもたないモノラルな入力なので, 入力ノードはオーディオデータをもつMediaElementAudioSourceNodeにしています. OscillatorNodeを入力ノードにする場合, サンプルコード 02を参考にしてください.

まず, チャンネル数は2つ必要なのでcreateChannelSplitterメソッド / createChannelMergerメソッドの引数に2を指定してインスタンスを生成します. そして, 入力ノードをChannelSplitterNodeに接続することで, 左右のチャンネルごとに異なるサウンド処理が可能になります.

チャンネルごとに適用したいサウンド処理とは, 振幅の大小が互い違いになるようにトレモロをかけることです. チャンネルごとにトレモロをコントロールできるように, 分割した左右のチャンネルをそれぞれチャンネルごとに生成しておいたトレモロのためのGainNodeに接続します.

チャンネルごとにトレモロをかけたら, 1つのオーディオデータに統合するために, ChannelMergerNodeに接続します.

あとは, トレモロのためのLFOを実装すれば完成です. まずは, LFOのためのノードを生成します.

サンプルコード 08

/*
 * sample code 07
 */

// ....

// for LFO

// for legacy browsers
context.createScriptProcessor = context.createScriptProcessor || context.createJavaScriptNode;

// for selecting optimized buffer size
var getBufferSize = function() {
    if (/(Win(dows )?NT 6\.2)/.test(navigator.userAgent)) {
        return 1024;  // Windows 8
    } else if (/(Win(dows )?NT 6\.1)/.test(navigator.userAgent)) {
        return 1024;  // Windows 7
    } else if (/(Win(dows )?NT 6\.0)/.test(navigator.userAgent)) {
        return 2048;  // Windows Vista
    } else if (/Win(dows )?(NT 5\.1|XP)/.test(navigator.userAgent)) {
        return 4096;  // Windows XP
    } else if (/Mac|PPC/.test(navigator.userAgent)) {
        return 1024;  // Mac OS X
    } else if (/Linux/.test(navigator.userAgent)) {
        return 8192;  // Linux
    } else if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
        return 2048;  // iOS
    } else {
        return 16384;  // Otherwise
    }
};

// Create the instance of OscillatorNode
var lfo = context.createOscillator();

// for legacy browsers
lfo.start = lfo.start || lfo.noteOn;
lfo.stop  = lfo.stop  || lfo.noteOff;

var depth       = context.createGain();
var lfoSplitter = context.createChannelSplitter(2);
var processor   = context.createScriptProcessor(getBufferSize(), 2, 2);

var audio = new Audio('sample.wav');

// ....

重要なポイントは, トレモロをコントロールするためのScriptProcessorNodeインスタンスを生成していることと, LFOのためのChannelSplitterNodeインスタンスを生成していることです.

ScriptProcessorNodeを利用することでサウンドデータに直接アクセスすることが可能となり, 分割した左右のチャンネルの振幅の大小が互い違いになるように実装することができます.

あとは, ScriptProcessorNodeによって振幅の大小が互い違いになった左右のチャンネルからのサウンド出力を, トレモロのためのGainNodeインスタンスのgainプロパティ (AudioParamインスタンス) に対して, チャンネルごとに入力する必要があります. そのために, ChannelSpitterNodeを利用します.

サンプルコード 09

/*
 * sample code 08
 */

// ....

audio.addEventListener('loadstart', function() {
    // Create the instance of MediaElementAudioSourceNode
    source = context.createMediaElementSource(audio);

    // Connect nodes for effect (Auto Panner) sound
    //                                                             -> GainNode for Left  Channel (amplitude) -
    // MediaElementAudioSourceNode (Input) -> ChannelSplitterNode -|                                           |-> ChannelMergerNode -> AudioDestinationNode (Output)
    //                                                             -> GainNode for Right Channel (amplitude) -
    source.connect(splitter);
    splitter.connect(amplitudeL, 0, 0);
    splitter.connect(amplitudeR, 1, 0);
    amplitudeL.connect(merger, 0, 0);
    amplitudeR.connect(merger, 0, 1);
    merger.connect(context.destination);

    // Connect nodes for LFO that changes amplitude periodically
    //                                                                                                         -> gain (GainNode for Left  Channel)
    // OscillatorNode (LFO) -> GainNode (depth) -> ScriptProcessorNode (reverse amplitude) -> ChannelSplitter -|
    //                                                                                                         -> gain (GainNode for Right Channel)
    lfo.connect(depth);
    depth.connect(processor);
    processor.connect(lfoSplitter);
    lfoSplitter.connect(amplitudeL.gain, 0);
    lfoSplitter.connect(amplitudeR.gain, 1);

    processor.onaudioprocess = function(event) {
        // Get the instance of Float32Array for input data (Array size equals buffer size)
        var inputLs = event.inputBuffer.getChannelData(0);  // Left  channel
        var inputRs = event.inputBuffer.getChannelData(1);  // Right channel

        // Get the instance of Float32Array for output data (Array size equals buffer size)
        var outputLs = event.outputBuffer.getChannelData(0);  // Left  channel
        var outputRs = event.outputBuffer.getChannelData(1);  // Right channel

        // Reverse amplitude each channel
        for (var i = 0; i < this.bufferSize; i++) {
            outputLs[i] =  1 * inputLs[i];  // GainNode.gain (1) + outputLs[i]
            outputRs[i] = -1 * inputRs[i];  // GainNode.gain (1) - outputRs[i]
        }
    };

    // Start audio
    audio.play();

    // Effector (Auto Panner) ON
    lfo.start(0);

}, false);

onaudioprocessイベントハンドラの出力のサウンドデータを設定する処理で, 分割した左右のチャンネルの振幅の大小が互い違いになるように, 右チャンネルの出力は右チャンネルからの入力に-1を乗算しています.

トレモロの数式で表現すると図2 - 6 - oような関係になっています.

最後に, オートパンの実装をまとめます.

サンプルコード 10

window.AudioContext = window.AudioContext || window.webkitAudioContext;

// Create the instance of AudioContext
var context = new AudioContext();

// for the instance of MediaElementAudioSourceNode
var source = null;

// for legacy browsers
context.createGain = context.createGain || context.createGainNode;

// Create the instance of GainNode
var amplitudeL = context.createGain();              // for Left  Channel Tremolo
var amplitudeR = context.createGain();              // for Right Channel Tremolo
var splitter   = context.createChannelSplitter(2);  // for reversing Tremolo each channel
var merger     = context.createChannelMerger(2);    // for reversing Tremolo each channel

amplitudeL.gain.value = 1;  // 1 +- depth
amplitudeR.gain.value = 1;  // 1 +- depth

// for LFO

// for legacy browsers
context.createScriptProcessor = context.createScriptProcessor || context.createJavaScriptNode;

// for selecting optimized buffer size
var getBufferSize = function() {
    if (/(Win(dows )?NT 6\.2)/.test(navigator.userAgent)) {
        return 1024;  // Windows 8
    } else if (/(Win(dows )?NT 6\.1)/.test(navigator.userAgent)) {
        return 1024;  // Windows 7
    } else if (/(Win(dows )?NT 6\.0)/.test(navigator.userAgent)) {
        return 2048;  // Windows Vista
    } else if (/Win(dows )?(NT 5\.1|XP)/.test(navigator.userAgent)) {
        return 4096;  // Windows XP
    } else if (/Mac|PPC/.test(navigator.userAgent)) {
        return 1024;  // Mac OS X
    } else if (/Linux/.test(navigator.userAgent)) {
        return 8192;  // Linux
    } else if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
        return 2048;  // iOS
    } else {
        return 16384;  // Otherwise
    }
};

// Create the instance of OscillatorNode
var lfo = context.createOscillator();

// for legacy browsers
lfo.start = lfo.start || lfo.noteOn;
lfo.stop  = lfo.stop  || lfo.noteOff;

var depth       = context.createGain();
var lfoSplitter = context.createChannelSplitter(2);
var processor   = context.createScriptProcessor(getBufferSize(), 2, 2);

var audio = new Audio('sample.wav');

audio.addEventListener('loadstart', function() {
    // Create the instance of MediaElementAudioSourceNode
    source = context.createMediaElementSource(audio);

    // Connect nodes for effect (Auto Panner) sound
    //                                                             -> GainNode for Left  Channel (amplitude) -
    // MediaElementAudioSourceNode (Input) -> ChannelSplitterNode -|                                           |-> ChannelMergerNode -> AudioDestinationNode (Output)
    //                                                             -> GainNode for Right Channel (amplitude) -
    source.connect(splitter);
    splitter.connect(amplitudeL, 0, 0);
    splitter.connect(amplitudeR, 1, 0);
    amplitudeL.connect(merger, 0, 0);
    amplitudeR.connect(merger, 0, 1);
    merger.connect(context.destination);

    // Connect nodes for LFO that changes amplitude periodically
    //                                                                                                         -> gain (GainNode for Left  Channel)
    // OscillatorNode (LFO) -> GainNode (depth) -> ScriptProcessorNode (reverse amplitude) -> ChannelSplitter -|
    //                                                                                                         -> gain (GainNode for Right Channel)
    lfo.connect(depth);
    depth.connect(processor);
    processor.connect(lfoSplitter);
    lfoSplitter.connect(amplitudeL.gain, 0);
    lfoSplitter.connect(amplitudeR.gain, 1);

    processor.onaudioprocess = function(event) {
        // Get the instance of Float32Array for input data (Array size equals buffer size)
        var inputLs = event.inputBuffer.getChannelData(0);  // Left  channel
        var inputRs = event.inputBuffer.getChannelData(1);  // Right channel

        // Get the instance of Float32Array for output data (Array size equals buffer size)
        var outputLs = event.outputBuffer.getChannelData(0);  // Left  channel
        var outputRs = event.outputBuffer.getChannelData(1);  // Right channel

        // Reverse amplitude each channel
        for (var i = 0; i < this.bufferSize; i++) {
            outputLs[i] =  1 * inputLs[i];  // GainNode.gain (1) + outputLs[i]
            outputRs[i] = -1 * inputRs[i];  // GainNode.gain (1) - outputRs[i]
        }
    };

    // Set Depth
    depth.gain.value = 0.8;

    // Set Rate
    lfo.frequency.value = 0.5;  // 0.5 Hz

    // Start audio
    audio.play();

    // Effector (Auto Panner) ON
    lfo.start(0);

}, false);

以上でトレモロとChannelSplitterNodeクラス / ChannerlMergerNodeクラスによるオートパンの実装が完成しました. このセクションの最初で述べたように, PannerNodeクラス / AudioListenerクラスを利用した場合と比較すると, エフェクトのバリエーションは劣りますが, オートパンとしては十分に機能します. デモ 19を試してみて, ChannelSplitterNodeクラス / ChannerlMergerNodeクラスの機能を体感してみてください.

デモ 19 ＊ ヘッドフォンやイヤホンをご利用ください