MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

PannerNode

PannerNode は音源の空間上の位置と振る舞いを表現したインタフェースで、AudioNode の一種です。右手直行座標系に従って位置を表し、音源の動きは加速度ベクトルと、向きを表すサウンドコーンを利用して表現します。

PannerNode は必ず 1 つの入力と、1 つの出力を持ちます。入力はモノラルでもステレオでも構いませんが、出力は必ずステレオとなります。つまりパンニングを行うには最低でも 2 チャンネルの音声チャンネルを必要です。

The PannerNode brings a spatial position and velocity and a directionality for a given signal.

入力数 1
出力数 1
チャンネルの数え方 "clamped-max"
チャンネル数 2
チャンネルの意味 "speakers"

コンストラクター

PannerNode.PannerNode
新しい PannerNode オブジェクトを作成します。

属性

親クラスである AudioNode の属性を継承しています。

向きと位置の設定と取得は異なる方法で行います。これは、これらの値が AudioParam として保存されてるためです。値の取得は  PannerNode.positionX のように行えますが、同じ属性に対して値を設定するには PannerNode.positionX.value のように行います。そのため、これらの値は読み取り専用と WebIDL で定義されていません。

PannerNode.coneInnerAngle
音量低減が起こらないコーンの内角の角度が、実数 (倍精度) で参照できます。
PannerNode.coneOuterAngle
音量の低減が始まるコーンの外角が、実数値 (倍精度) で参照できます。低減は  coneOuterGain 属性の値に従います。
PannerNode.coneOuterGain
coneOuterAngle の外で行われる音量の低減量を定義します。標準値は 0 で、これは音が聞こえなくなることを表します。
PannerNode.distanceModel
音量の低減計算に用いるアルゴリズムを定めます。アルゴリズムは定められたものの中から選択します。
PannerNode.maxDistance
音源と聴取者の最大距離を定義します。これを超えた場合、音量の低減計算がなされません。
PannerNode.orientationX
右手直行座標系における音源の向きを表すベクトルのうち、横方向の値です。AudioParam は直接変更できないため、値の変更はvalue 属性を通して行います。初期値は 1 となっています。
PannerNode.orientationY
右手直行座標系における音源の向きを表すベクトルのうち、縦方向の値です。AudioParam は直接変更できないため、値の変更はvalue 属性を通して行います。初期値は 0 となっています。
PannerNode.orientationZ
右手直行座標系における音源の向きを表すベクトルのうち、奥行き方向の値ですAudioParam は直接変更できないため、値の変更はvalue 属性を通して行います。初期値は 0 となっています。
PannerNode.panningModel

立体音響計算を行うアルゴリズムを定めます。アルゴリズムは定められたものの中から選びます。

PannerNode.positionX
右手直行座標系における音源の位置を表すベクトルのうち、横方向の値ですAudioParam は直接変更できないため、値の変更はvalue 属性を通して行います。初期値は 0 となっています。
PannerNode.positionY
右手直行座標系における音源の位置を表すベクトルのうち、縦方向の値ですAudioParam は直接変更できないため、値の変更はvalue 属性を通して行います。初期値は 0 となっています。
PannerNode.positionZ
右手直行座標系における音源の位置を表すベクトルのうち、奥行き方向の値ですAudioParam は直接変更できないため、値の変更はvalue 属性を通して行います。初期値は 0 となっています。
PannerNode.refDistance
音量の低減計算に用いる基準距離を表します。音源と聴取者との距離がこれを超えた場合、音量の低減が起きます。
PannerNode.rolloffFactor
音源が聴取者から離れていく際に起きる音量の低減量を定めます。この値は、全ての距離モデルで利用されます。

メソッド

親クラスである AudioNode のメソッドを継承しています。

PannerNode.setPosition()
聴取者に対する音源の相対位置を設定します。聴取者の位置は AudioContext.listener  で参照されるAudioListener オブジェクトで表されています。
PannerNode.setOrientation()
音源が再生されている方向を設定します。
PannerNode.setVelocity()
音源の速度を表したベクトルです。移動する速さと方向を表しています。以前の仕様では下流に接続されたAudioBufferSourceNode のピッチを上げ下げするために、PannerNode は速度を表す属性を持っていました。この機能は明瞭に定義されておらず、問題も多かったため、現在の仕様からは削除されています。

In the following example, you can see an example of how the createPanner() method, AudioListener  and PannerNode would be used to control audio spatialisation. Generally you will define the position in 3D space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used. You might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo. In the example you can see this being controlled by the functions moveRight(), moveLeft(), etc., which set new values for the panner position via the PositionPanner() function.

To see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.5D "Room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!

Note how we have used some feature detection to either give the browser the newer property values (like AudioListener.forwardX) for setting position, etc. if it supports those, or older methods (like AudioListener.setOrientation()) if it still supports those but not the new properties.

// set up listener and panner position information
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var xPos = Math.floor(WIDTH/2);
var yPos = Math.floor(HEIGHT/2);
var zPos = 295;

// define other variables

var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();

var panner = audioCtx.createPanner();
panner.panningModel = 'HRTF';
panner.distanceModel = 'inverse';
panner.refDistance = 1;
panner.maxDistance = 10000;
panner.rolloffFactor = 1;
panner.coneInnerAngle = 360;
panner.coneOuterAngle = 0;
panner.coneOuterGain = 0;

if(panner.orientationX) {
  panner.orientationX.value = 1;
  panner.orientationY.value = 0;
  panner.orientationZ.value = 0;
} else {
  panner.setOrientation(1,0,0);
}

var listener = audioCtx.listener;

if(listener.forwardX) {
  listener.forwardX.value = 0;
  listener.forwardY.value = 0;
  listener.forwardZ.value = -1;
  listener.upX.value = 0;
  listener.upY.value = 1;
  listener.upZ.value = 0;
} else {
  listener.setOrientation(0,0,-1,0,1,0);
}

var source;

var play = document.querySelector('.play');
var stop = document.querySelector('.stop');

var boomBox = document.querySelector('.boom-box');

var listenerData = document.querySelector('.listener-data');
var pannerData = document.querySelector('.panner-data');

leftBound = (-xPos) + 50;
rightBound = xPos - 50;

xIterator = WIDTH/150;

// listener will always be in the same place for this demo

if(listener.positionX) {
  listener.positionX.value = xPos;
  listener.positionY.value = yPos;
  listener.positionZ.value = 300;
} else {
  listener.setPosition(xPos,yPos,300);
}

listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;

// panner will move as the boombox graphic moves around on the screen
function positionPanner() {
  if(panner.positionX) {
    panner.positionX.value = xPos;
    panner.positionY.value = yPos;
    panner.positionZ.value = zPos;
  } else {
    panner.setPosition(xPos,yPos,zPos);
  }
  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
}

In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of fiddly math involved, but you will soon get used to it with a bit of experimentation.

仕様

仕様 状況 コメント
Web Audio API
PannerNode の定義
草案  

ブラウザ互換性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0webkit (有) 25 (25) 未サポート 15.0webkit
22 (unprefixed)
6.0webkit
orientationX, orientationY, and orientationZ (有) ? 50 (50) 未サポート ? ?
positionX, positionY, and positionZ (有) ? 50 (50) 未サポート ? ?
Constructor (有) ? 未サポート 未サポート ? 未サポート
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (有) 26.0 (26) 未サポート ? ? 33.0
orientationX, orientationY, and orientationZ ? ? 50.0 (50) 未サポート ? ? ?
positionX, positionY, and positionZ ? ? 50.0 (50) 未サポート ? ? ?
Constructor 未サポート ? 未サポート 未サポート ? 未サポート (有)

関連情報

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

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