AudioContext.createPanner()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Метод createPanner() интерфейса AudioContext применяется для создания нового PannerNode, который используется для размещения аудиопотока в виртуальном 3D пространстве.

The panner node is spatialized in relation to the AudioContext's AudioListener (defined by the AudioContext.listener attribute), which represents the position and orientation of the person listening to the audio.

Синтаксис

var audioCtx = new AudioContext();
var panner = audioCtx.createPanner();

Возврат

A PannerNode.

Пример

Ниже можно увидеть пример использования AudioListener, PannerNode и метода createPanner() для управления пространством объёмного звука. Обычно определяется положение в трёхмерном пространстве, изначально занимаемое обработчиком (listener) и источником звука (panner), а затем, при использовании приложения, обновляется позиция одного из них или обоих. Например, вы можете перемещать персонажа внутри игрового мира, и желательно чтобы передача звука изменялась реалистично, по мере приближения или отдаления персонажа относительно источника звука, вроде стереопроигрывателя. В этом примере можно видеть, что все это управляется функциями moveRight(), moveLeft(), и т.п., которые устанавливают новые значения для положения паннера через функцию PositionPanner().

Чтобы увидеть полную реализацию ознакомьтесь с нашим примером panner-node (просмотрите весь список примеров) — эта демонстрация перенесёт вас в 2.5D "Room of metal" (2,5-мерную "металлическую комнату"), где можно проиграть трек на бумбоксе и затем походить вокруг него и посмотреть как изменяется звук!

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
// установка сведений обработчика и положении panner'а
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.

Спецификации

Specification
Web Audio API # dom-baseaudiocontext-createpanner

Совместимость с браузерами

Смотрите также

Using the Web Audio API