U-Howler.js Demo

Basic Controls

440 Hz
1.0

Global Controls

1.0

API Overview

Howler (Global)

volume(vol?) → Howler|number
mute(muted?) → Howler
stop() → Howler
unload() → Howler
codecs(ext) → boolean
environment(env) → Howler

Howl Constructor

new Howl(options)
Options: src, volume, rate, loop, mute, preload, autoplay, sprite, format, html5, pool, xhr, spatial, on*

Core Methods

load() → Promise<Howl>
play(sprite?) → number|Promise
pause(id?) → Howl
stop(id?) → Howl
mute(muted?, id?) → Howl|boolean
volume(vol?, id?) → Howl|number
fade(from, to, duration, id?) → Howl
rate(rate?, id?) → Howl|number
seek(seek?, id?) → Howl|number

Examples

// Promise support
const howl = new Howl({src: 'audio.mp3'});
await howl.load();
const id = howl.play();

// Sprite usage
const soundFx = new Howl({
  src: 'sounds.mp3',
  sprite: {
    jump: [0, 500],
    shoot: [600, 300]
  }
});
soundFx.play('jump');

Audio Sprites

Audio Sprites Demo

Audio Sprites API

Sprite Methods

play(spriteName) → number
Play a specific sprite by name from the sprite collection.

Sprite Configuration

Sprite Format: { name: [start_ms, duration_ms] }
• start_ms: Starting position in milliseconds
• duration_ms: Length of the sprite in milliseconds
• Sprites can be tightly packed or have gaps between them
const spriteMap = {
  jump: [0, 500],       // 0ms - 500ms
  coin: [500, 300],     // 500ms - 800ms
  laser: [800, 400],    // 800ms - 1200ms
  explosion: [1200, 800] // 1200ms - 2000ms
};

const gameAudio = new Howl({
  src: 'game-sounds.wav',
  sprite: spriteMap
});

gameAudio.play('jump');

Audio Effects

Filters

Rate Control

1.0x

Fade Effects

Effects API

Effect Methods

addEffect(type, options?) → AudioNode
effects → Array<AudioNode>
updateEffectsChain() → Howl
enableEQ(bands?, callback?, boost?) → Howl
disableEQ() → Howl

Audio Effects

addEffect(type, options) - Add audio effect to the sound
• Returns the Web Audio node for direct manipulation
• Types: 'lowpass', 'highpass', 'bandpass', 'notch', 'delay', 'reverb', 'gain', 'distortion'
• Options vary by type (frequency, Q, delay, gain, etc.)

effects - Getter for effects array (for direct manipulation)
updateEffectsChain() - Rebuild audio chain after effects manipulation 
// Add effects and manipulate them
const filter = howl.addEffect('lowpass', {
  frequency: 1000, Q: 1
});

// Direct effects array manipulation
howl.effects.splice(1, 1); // Remove delay effect
howl.effects.reverse(); // Reorder effects
howl.updateEffectsChain(); // Apply changes

Frequency Analysis

enableEQ(bands, callback, boost) - Enable real-time frequency analysis
• bands: Number of frequency bands (default: 16)
• callback: Function called with frequency data array
• boost: Gain multiplier for visualization (default: 4.0)

disableEQ() - Disable frequency analysis

3D Spatial Audio

🟢 Green is you! Drag the dots to move them around the 3D space! 🏛️ Cathedral environment provides realistic reverb.

Spatial API

3D Spatial Audio

spatial - Object containing 3D audio properties
• Properties: position{x,y,z}, orientation{x,y,z}, velocity{x,y,z}
• distance{ref, max, rolloff, model}, cone{inner, outer, outerGain}
• occlusion, obstruction, panningModel

Howler.listener - Global listener (camera/player) object
Howler.environment(env) - Set reverb environment
• Accepts preset strings: 'room', 'hall', 'cathedral'
• Or custom objects: { size, decay, dampening }
• Pass null to disable environment reverb

Environment Presets

Built-in Reverb Environments: 'room', 'hall', 'cathedral', 'cave', 'underwater'

Custom Environment Parameters:
• size: 'small' | 'medium' | 'large' - Room size
• decay: 0.1-20.0 - Reverb tail length in seconds
• dampening: 0.0-1.0 - High frequency absorption (0=bright, 1=muffled)

Spatial Examples

const spatial = new Howl({
  src: 'footsteps.mp3',
  spatial: {
    position: [10, 0, -5],
    distance: { ref: 2, max: 100 },
    cone: { inner: 45, outer: 90, outerGain: 0.2 }
  }
});

Howler.listener.position = { x: 0, y: 1.8, z: 0 };
Howler.listener.update();

spatial.spatial.position = { x: enemy.x, y: enemy.y, z: enemy.z };
spatial.spatial.update();

// Built-in presets
Howler.environment('room');      // Small room reverb
Howler.environment('hall');      // Medium hall reverb
Howler.environment('cathedral'); // Large cathedral reverb

// Custom environment
Howler.environment({
  size: 'medium',
  decay: 3.0,
  dampening: 0.4
});

Howler.environment(null); // Disable environment

Library Info

Loading library information...

Supported Codecs:

Events & Utilities

Event Listeners

on(event, fn, id?) → Howl
off(event?, fn?, id?) → Howl
once(event, fn, id?) → Howl

Utility Methods

playing(id?) → boolean
duration(id?) → number
state() → string
unload() → null

Events

load() - Audio loaded successfully
loaderror(id, error) - Failed to load audio
play(id) - Sound started playing
pause(id) - Sound paused
stop(id) - Sound stopped
end(id) - Sound finished playing
fade(id) - Fade effect completed
volume(id) - Volume changed
rate(id) - Playback rate changed
seek(id) - Playback position changed
mute(id) - Mute state changed
unlock() - Audio context unlocked (user interaction)
playerror(id, error) - Playback error occurred