BaseAudioContext: createPanner() 方法

基线广泛可用

此功能已在许多设备和浏览器版本中广泛使用。它已在浏览器中可用，自 2021 年 4 月.

BaseAudioContext 接口的 createPanner() 方法用于创建新的 PannerNode，该节点用于在 3D 空间中对传入的音频流进行空间化。

空间化器节点是在与 AudioContext 的 AudioListener（由 AudioContext.listener 属性定义）相关的空间中进行空间化，该属性表示收听音频的人的位置和方向。

注意：PannerNode() 构造函数是创建 PannerNode 的推荐方法；请参阅创建 AudioNode。

在以下示例中，您可以看到 createPanner() 方法、AudioListener 和 PannerNode 如何用于控制音频空间化。通常情况下，您将定义音频监听器和空间化器（源）在 3D 空间中的初始位置，然后在应用程序使用时更新其中一个或两个的位置。例如，您可能在一个游戏世界中移动一个角色，并希望在您的角色靠近或远离立体声音响等音乐播放器时，音频的传递发生真实的变化。在示例中，您可以看到这通过 moveRight()、moveLeft() 等函数进行控制，这些函数通过 PositionPanner() 函数设置空间化器位置的新值。

要查看完整的实现，请查看我们的空间化器节点示例 (查看源代码) — 此演示将带您进入 2.5D 的“金属房间”，您可以在其中在一台收音机上播放曲目，然后绕着收音机走动，看看声音是如何变化的！

请注意，我们如何使用了一些特性检测来为支持这些特性的浏览器提供更新的属性值（如 AudioListener.forwardX）来设置位置等，或者如果浏览器仍然支持这些属性但不支持新的属性，则提供旧方法（如 AudioListener.setOrientation()）。

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

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

// define other variables

const audioCtx = new AudioContext();

const 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.setValueAtTime(1, audioCtx.currentTime);
  panner.orientationY.setValueAtTime(0, audioCtx.currentTime);
  panner.orientationZ.setValueAtTime(0, audioCtx.currentTime);
} else {
  panner.setOrientation(1, 0, 0);
}

const listener = audioCtx.listener;

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

let source;

const play = document.querySelector(".play");
const stop = document.querySelector(".stop");

const boomBox = document.querySelector(".boom-box");

const listenerData = document.querySelector(".listener-data");
const 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.setValueAtTime(xPos, audioCtx.currentTime);
  listener.positionY.setValueAtTime(yPos, audioCtx.currentTime);
  listener.positionZ.setValueAtTime(300, audioCtx.currentTime);
} else {
  listener.setPosition(xPos, yPos, 300);
}

listenerData.textContent = `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.setValueAtTime(xPos, audioCtx.currentTime);
    panner.positionY.setValueAtTime(yPos, audioCtx.currentTime);
    panner.positionZ.setValueAtTime(zPos, audioCtx.currentTime);
  } else {
    panner.setPosition(xPos, yPos, zPos);
  }
  pannerData.textContent = `Panner data: X ${xPos} Y ${yPos} Z ${zPos}`;
}