How to Configure coneInnerAngle in Howler.js

In modern web development, creating immersive 3D audio experiences requires precise control over how sound propagates in virtual space. This article explains how to configure the coneInnerAngle property in Howler.js to define the inner cone of a directional sound source, allowing you to create realistic spatial audio where sound behaves differently depending on which way the source is facing.

Understanding coneInnerAngle

In 3D spatial audio, sound sources can be omnidirectional (projecting sound equally in all directions) or directional (like a megaphone or a speaker). To make a sound directional, Howler.js utilizes the Web Audio API’s PannerNode properties, which include coneInnerAngle, coneOuterAngle, and coneOuterGain.

coneInnerAngle: The angle (in degrees) of a cone inside of which there is no volume reduction. If the listener is within this angle relative to the sound source’s orientation, the sound plays at maximum volume (1.0).

Setting coneInnerAngle in Howler.js

You can configure coneInnerAngle globally for all sounds or individually for a specific Howl instance using the pannerAttr() method.

Step 1: Initialize the Sound and Define Position

To use directional sound, you must first define the position and orientation of the sound source using the pos() and orientation() methods.

const sound = new Howl({
  src: ['audio.mp3'],
  html5: false // Web Audio API must be enabled for 3D spatial audio
});

// Play the sound to get a sound ID
const soundId = sound.play();

// Position the sound in 3D space [x, y, z]
sound.pos(0, 0, 0, soundId);

// Point the sound direction along the Z-axis [x, y, z]
sound.orientation(0, 0, 1, soundId);

Step 2: Configure the Panner Attributes

Once the sound is positioned and oriented, use the pannerAttr method to set the coneInnerAngle. This method accepts an object containing the spatial properties you want to update.

sound.pannerAttr({
  coneInnerAngle: 90,     // 90-degree cone where volume remains at 100%
  coneOuterAngle: 180,    // 180-degree outer cone where volume fades
  coneOuterGain: 0.1,     // Volume level outside the outer cone (10%)
  panningModel: 'HRTF',   // High-quality spatial audio panning model
  distanceModel: 'inverse'
}, soundId);

Step 3: Position the Listener

For directional sound to work, the global listener must also be positioned in the 3D space. You configure the listener using the global Howler object:

// Position the listener [x, y, z]
Howler.pos(0, 0, 5);

// Set the listener orientation [forwardX, forwardY, forwardZ, upX, upY, upZ]
Howler.orientation(0, 0, -1, 0, 1, 0);

With this configuration, if the listener moves outside the 90-degree coneInnerAngle of the sound source, the volume will begin to transition down to the coneOuterGain level, creating a realistic directional audio effect.