AudioContext.createPanner()
Метод createPanner()
интерфейса AudioContext
применяется для создания нового PannerNode
, который используется для размещения аудиопотока в виртуальном 3D пространстве.
The panner node is spatialized in relation to the AudioContext's AudioListener
(en-US) (defined by the AudioContext.listener
(en-US) attribute), which represents the position and orientation of the person listening to the audio.
Синтаксис
js
var audioCtx = new AudioContext();
var panner = audioCtx.createPanner();
Возврат
A PannerNode
.
Пример
Ниже можно увидеть пример использования AudioListener
(en-US), 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
(en-US)) for setting position, etc. if it supports those, or older methods (like AudioListener.setOrientation()
(en-US)) if it still supports those but not the new properties.
js
// 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.
Specifications
Specification |
---|
Web Audio API # dom-baseaudiocontext-createpanner |
Browser compatibility
BCD tables only load in the browser