BaseAudioContext：createPanner() 方法

Baseline 已廣泛支援

此特性已得到良好支援，可在多種裝置和瀏覽器版本上使用。自 2021 年 4 月起，所有瀏覽器均已支援此特性。

BaseAudioContext 介面的 createPanner() 方法用於建立一個新的 PannerNode，它用於在 3D 空間中對傳入的音訊流進行空間化。

聲像節點相對於 AudioContext 的 AudioListener (由 AudioContext.listener 屬性定義) 進行空間化，該屬性代表聽音訊的人的位置和朝向。

注意： PannerNode() 建構函式是建立 PannerNode 的推薦方法；請參閱建立 AudioNode。

在下面的示例中，您可以看到 `createPanner()` 方法、AudioListener 和 PannerNode 如何用於控制音訊空間化的示例。通常，您會定義音訊監聽者和聲像器（源）最初在 3D 空間中的位置，然後在應用程式使用過程中更新其中一個或兩個的位置。例如，您可能正在遊戲中移動一個角色，並希望音訊的傳遞效果能隨著角色靠近或遠離音樂播放器（如立體聲音響）而真實地改變。在示例中，您可以看到這透過 `moveRight()`、`moveLeft()` 等函式進行控制，這些函式透過 `PositionPanner()` 函式為聲像器的位置設定新值。

要檢視完整的實現，請檢視我們的 panner-node 示例（檢視原始碼）— 此演示將您帶到 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}`;
}

注意： 在計算要應用於監聽者和聲像器的位置值，以使聲音與螢幕上的視覺效果相匹配方面，涉及相當多的數學運算，但透過一些嘗試和練習，您很快就會熟悉它。