BaseAudioContext: метод createPanner()

Базовый уровень Широко доступен

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с апреля 2021 года.

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

Узел панорамирования пространственно ориентирован относительно AudioListener AudioContext (определяется атрибутом AudioContext.listener), который представляет позицию и ориентацию слушателя аудио.

Примечание: Конструктор PannerNode() является рекомендуемым способом создания PannerNode; см. Создание узла AudioNode.

Синтаксис

createPanner()

Параметры

Нет.

Возвращаемое значение

PannerNode.

Примеры

В следующем примере показано, как метод 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}`;
}

Примечание: Что касается определения значений позиции, которые необходимо применить к слушателю и панорамному излучателю, чтобы звук соответствовал визуальным эффектам на экране, здесь задействовано довольно много математики, но вы быстро к ней привыкнете с помощью небольшого эксперимента.

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

Спецификация
Web Audio API # dom-baseaudiocontext-createpanner

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`createPanner`	14	12	25	15	6	18	25	14	6	1.0	4.4.3

См. также

Использование Web Audio API

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createPanner