BaseAudioContext.createStereoPanner()

createStereoPanner() は BaseAudioContext インターフェイスのメソッドで、音源にステレオパンニングを適用するStereoPannerNodeを生成します。入力された音声ストリームは、低コストのパンニングアルゴリズムで位置が決められます。

Note: StereoPannerNode() (en-US) コンストラクターは StereoPannerNode を作成するための推奨される方法です。 AudioNode の作成を参照してください。

StereoPannerNode の例（ソースコードを参照）の HTML では、単純な <audio> 要素と、パン値を増減するスライダー <input> を用意しています。 JavaScript では、MediaElementAudioSourceNode (en-US) と StereoPannerNode を作成し、connect() メソッドを用いて両者をつなげます。そして、oninput イベントハンドラーを使って StereoPannerNode.pan (en-US) パラメータの値を変更し、スライダーが動いたときにパン値の表示を更新しています。

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

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.setValueAtTime(panControl.value, audioCtx.currentTime);
  panValue.innerHTML = panControl.value;
}

// MediaElementAudioSourceNode を panNode に、 panNode を
// 出力先に接続し、音楽を再生してコントロールでパンを調整
// できるようにします。
source.connect(panNode);
panNode.connect(audioCtx.destination);

仕様書

Specification
Web Audio API # dom-baseaudiocontext-createstereopanner

ブラウザーの互換性

BCD tables only load in the browser

BaseAudioContext.createStereoPanner()

構文

引数

返値

例

仕様書

ブラウザーの互換性

関連情報