AudioContext.createStereoPanner()

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

この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

参考

Using the Web Audio API

AudioContext.createStereoPanner()

構文

戻り値

例

仕様

ブラウザ互換性

参考