AudioContext.createStereoPanner()
AudioContext
インターフェースのcreateStereoPanner()
メソッドは、音源にステレオパンニングを適用するStereoPannerNode
を生成します。入力されたオーディオストリームは、低コストなequal-powerパンニングアルゴリズムで位置が決められます。
構文
var audioCtx = new AudioContext();
var panNode = audioCtx.createStereoPanner();
戻り値
例
このStereoPannerNodeサンプル(ソースコード)のHTMLには、<audio>
要素と、パン値を増減させるスライダーinput
しかありません。JavaScpriptでは、MediaElementAudioSourceNode
(en-US)とStereoPannerNode
を生成し、この2つを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.value = panControl.value;
panValue.innerHTML = panControl.value;
}
// AudioBufferSourceNodeをpanNodeに接続し、panNodeを行き先(destination)に接続する
// これでこのコントロールで音楽をパンを調整することができる
source.connect(panNode);
panNode.connect(audioCtx.destination);
仕様
Specification | Status | Comment |
---|---|---|
Web Audio API createStereoPanner() の定義 |
草案 |
ブラウザ互換性
BCD tables only load in the browser