AudioContext.createStereoPanner()

var audioCtx = new AudioContext();
var panNode = audioCtx.createStereoPanner();

StereoPannerNode

このStereoPannerNodeサンプル(ソースコード)のHTMLには、<audio>要素と、パン値を増減させるスライダーinputしかありません。JavaScpriptでは、MediaElementAudioSourceNodeとStereoPannerNodeを生成し、この2つをconnect()メソッドで接続しています。そして、スライダーを動かすと、oninputイベントハンドラでStereoPannerNode.panパラメータの値を変更し、ディスプレイのパン値を更新しています。

スライダーを左から右に動かすと、音楽のスピーカーからの出力が左から右にパンされます。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');

var panControl = document.querySelector('.panning-control');
var panValue = document.querySelector('.panning-value');

pre.innerHTML = myScript.innerHTML;

// MediaElementAudioSourceNodeを生成し、そこにHTMLMediaElementを入れる
var source = audioCtx.createMediaElementSource(myAudio);

// ステレオパンナーを生成する
var panNode = audioCtx.createStereoPanner();

// イベントハンドラ関数で、スライダーが動いたとき左右のパンの値を左右する

panControl.oninput = function() {
  panNode.pan.value = panControl.value;
  panValue.innerHTML = panControl.value;
}

// AudioBufferSourceNodeをpanNodeに接続し、panNodeを行き先(destination)に接続する
// これでこのコントロールで音楽をパンを調整することができる
source.connect(panNode);
panNode.connect(audioCtx.destination);

• Using the Web Audio API