# U-Howler.js Demo

## Basic Controls

Frequency: 440 Hz
Volume: 1.0

### Global Controls

Master Volume: 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

Playback Rate: 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 live 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