MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

AudioContext.createStereoPanner()

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

構文

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

戻り値

StereoPannerNode

このStereoPannerNodeサンプル(ソースコード)のHTMLには、<audio>要素と、パン値を増減させるスライダーinputしかありません。JavaScpriptでは、MediaElementAudioSourceNodeStereoPannerNodeを生成し、この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);

仕様

Specification Status Comment
Web Audio API
The definition of 'createStereoPanner()' in that specification.
草案  

ブラウザ互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 42.0 37.0 (37.0)  未サポート 未サポート 未サポート
Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未サポート 37.0 2.2 未サポート 未サポート 未サポート (有)

参考

ドキュメントのタグと貢献者

 このページの貢献者: maruhiro
 最終更新者: maruhiro,