Audio is half the experience in spatial computing. Moving beyond simple stereo, spatial audio simulates how sound waves interact with the environment and the listener's head.

Module 1: The PannerNode and Positional Audio

The Web Audio API provides the PannerNode, which spatializes an audio source based on its 3D position relative to an AudioListener.

spatial-audio.jsjavascript
const audioCtx = new AudioContext();
const listener = audioCtx.listener;
const panner = new PannerNode(audioCtx, {
  panningModel: 'HRTF',
  distanceModel: 'inverse',
  positionX: 5, positionY: 0, positionZ: -10
});

// Update listener position based on XR headset pose
listener.positionX.value = xrPose.transform.position.x;
listener.positionY.value = xrPose.transform.position.y;
listener.positionZ.value = xrPose.transform.position.z;

Module 2: HRTF (Head-Related Transfer Function)

HRTF applies complex filtering to sound to mimic the acoustic diffraction caused by the human head and ears. Setting panningModel to 'HRTF' vastly increases audio realism for headphone users.