BaseAudioContext: createStereoPanner() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
createStereoPanner()
は BaseAudioContext
インターフェイスのメソッドで、音源にステレオパンニングを適用するStereoPannerNode
を生成します。
入力された音声ストリームは、低コストのパンニングアルゴリズムで位置が決められます。
メモ: StereoPannerNode()
コンストラクターは StereoPannerNode
を作成するための推奨される方法です。 AudioNode の作成を参照してください。
構文
createStereoPanner()
引数
なし。
返値
StereoPannerNode
を返します。
例
StereoPannerNode の例(ソースコードを参照)の HTML では、単純な <audio>
要素と、パン値を増減するスライダー <input>
を用意しています。 JavaScript では、MediaElementAudioSourceNode
と StereoPannerNode
を作成し、connect()
メソッドを用いて両者をつなげます。そして、oninput
イベントハンドラーを使って StereoPannerNode.pan
引数の値を変更し、スライダーが動いたときにパン値の表示を更新しています。
音楽再生中にスライダーを左右に動かすと、出力の左右のスピーカーにそれぞれ音楽がパンされます。
const audioCtx = new AudioContext();
const myAudio = document.querySelector("audio");
const panControl = document.querySelector(".panning-control");
const panValue = document.querySelector(".panning-value");
// MediaElementAudioSourceNode を生成し、
// そこに HTMLMediaElementを 入れる
const source = audioCtx.createMediaElementSource(myAudio);
// ステレオパンナーを生成する
const panNode = audioCtx.createStereoPanner();
// イベントハンドラー関数で、スライダーが動いたとき
// 左右のパンの値を左右する
panControl.oninput = () => {
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