babylon-mcp/examples/audioEngine/with_mcp.md

Help me understand the new babylon audio engine.  Ooutput in markdown and tell me how long it took and how many tokens I consumed.

Babylon.js Audio Engine V2 - Comprehensive Guide

Overview

Babylon.js introduced AudioEngineV2 in version 8.0 as a modern, powerful replacement for the legacy audio engine. It's based on the Web Audio API and is now fully decoupled from the graphics engine and scene, making it more flexible and easier to use.

Key Differences from V1

Major Changes

1. Decoupled Architecture: No longer tied to the graphics engine or scene
2. Async Creation: All audio objects created with async functions instead of constructors
3. Separate Sound Classes: StaticSound and StreamingSound are now distinct classes
4. Audio Buses: Sound tracks renamed to "audio buses" with enhanced routing capabilities
5. Modern JavaScript: Leverages latest WebAudio API features

Migration Summary

Old (V1)	New (V2)
new Sound() constructor	CreateSoundAsync() function
Sound with streaming option	Separate CreateStreamingSoundAsync()
SoundTrack	AudioBus with chaining support
Coupled to Scene	Independent audio engine

Creating an Audio Engine

// Create audio engine const audioEngine = await BABYLON.CreateAudioEngineAsync();

// Create sounds (but don't play yet) const gunshot = await BABYLON.CreateSoundAsync("gunshot", "sounds/gunshot.wav");

// Unlock audio engine (required for browser autoplay policies) await audioEngine.unlockAsync();

// Now you can play sounds gunshot.play();

Important: Browsers require user interaction before playing audio. Always call unlockAsync() after user interaction and before playing sounds.

Sound Types

Static Sounds (Buffered)

Best for: Short sound effects, UI sounds, repeated playback

const gunshot = await BABYLON.CreateSoundAsync("gunshot", "sounds/gunshot.wav"); await audioEngine.unlockAsync(); gunshot.play();

Characteristics:

• Entire sound loaded into memory
• Low latency playback
• Full playback control (looping, pitch, playback rate)
• Can play multiple instances simultaneously

Streaming Sounds

Best for: Background music, long narrations, large audio files

const music = await BABYLON.CreateStreamingSoundAsync( "music", "https://example.com/music.mp3" ); await audioEngine.unlockAsync(); music.play();

Characteristics:

• Only small chunks kept in memory
• Memory efficient for long files
• Limited playback options (no loopStart/loopEnd)
• Potential initial buffering delay
• Uses HTML5 element under the hood

Sound Instances

Each play() call creates a new instance, allowing overlapping playback:

const sound = await BABYLON.CreateSoundAsync("alarm", "alarm.mp3", { maxInstances: 2 // Limit simultaneous playback });

sound.play(); // Instance #1 sound.play(); // Instance #2 sound.play(); // Instance #3 - stops #1 automatically

Key Points:

• maxInstances controls simultaneous playback limit
• Volume and stop() affect all instances
• currentTime only affects newest instance
• Property changes only affect new instances (not currently playing ones)

Core Features

Looping

Three ways to loop sounds:

// Option 1: During creation const sound = await BABYLON.CreateSoundAsync("bounce", "bounce.wav", { loop: true });

// Option 2: Via property sound.loop = true; sound.play();

// Option 3: Via play() options sound.play({ loop: true });

Volume Control

Volume ranges from 0 (silent) to 1 (100%), with values above 1 for boosting:

// Engine-wide volume audioEngine.volume = 0.5;

// Individual sound volume gunshot.volume = 0.75;

// Fade in/out with duration and shape tone.setVolume(0, { duration: 3, shape: AudioParameterRampShape.Logarithmic });

Available ramp shapes: Linear, Exponential, Logarithmic

Stereo Panning

Move sounds between left (-1) and right (+1) speakers:

const sound = await BABYLON.CreateSoundAsync("gunshot", "gunshot.wav", { stereoEnabled: true // Enable upfront to avoid delay });

sound.stereo.pan = -1; // Full left sound.stereo.pan = 1; // Full right sound.play();

Note: Set stereoEnabled: true during creation to avoid initialization delay

Spatial Audio (3D Sound)

Position sounds in 3D space with distance attenuation and directional audio:

const bounce = await BABYLON.CreateSoundAsync("bounce", "bounce.wav", { spatialEnabled: true });

// Attach to mesh for automatic position/rotation updates bounce.spatial.attach(mesh);

await audioEngine.unlockAsync(); bounce.play({ loop: true });

// Or manually control position bounce.spatial.position.set(10, 0, 5);

Spatial Features:

• Distance-based attenuation
• Directional audio (cone-based)
• Doppler effect
• One listener per audio engine
• Attach to meshes for automatic positioning

Audio Buses

Buses group multiple audio sources for collective control and routing:

Main Audio Bus

The final destination before speakers (created automatically):

// Access default main bus const mainBus = audioEngine.mainBus; mainBus.volume = 0.8;

Limitations: No stereo pan or spatial audio (final output only)

Intermediate Audio Buses

Route multiple sounds through buses with effects:

const musicBus = await BABYLON.CreateAudioBusAsync("music", { spatialEnabled: true });

musicBus.spatial.attach(speakerMesh); musicBus.volume = 0.6;

const song1 = await BABYLON.CreateSoundAsync("song1", "song1.mp3"); const song2 = await BABYLON.CreateSoundAsync("song2", "song2.mp3");

// Route both songs through the music bus song1.outBus = musicBus; song2.outBus = musicBus;

// musicBus automatically routes to mainBus

Features:

• Chain buses together (no circular routing)
• Apply stereo and spatial effects to grouped sounds
• Reduce CPU usage (one spatial calculation for multiple sounds)

Audio Analyzer

Real-time frequency analysis for visualizations:

const sound = await BABYLON.CreateSoundAsync("music", "music.mp3", { analyzerEnabled: true });

sound.play({ loop: true });

// Get frequency data every frame scene.onBeforeRenderObservable.add(() => { const frequencies = sound.analyzer.getByteFrequencyData(); // frequencies is an array of volume levels per frequency band // Values: 0-255 (byte) or -∞ to 0 dB (float) });

Browser Autoplay Considerations

Modern browsers block audio until user interaction:

// Pattern 1: Unlock on button click button.addEventListener("click", async () => { await audioEngine.unlockAsync(); sound.play(); });

// Pattern 2: Create unmute button const unmuteButton = await audioEngine.createUnmuteButtonAsync(); document.body.appendChild(unmuteButton); // Button automatically removes itself when audio unlocks

Advanced Features

Sound Buffers (Shared Audio Data)

Share audio buffer between multiple sounds to save memory:

const buffer = await BABYLON.CreateSoundBufferAsync("explosion", "explosion.wav");

const sound1 = await BABYLON.CreateSoundAsync("exp1", buffer); const sound2 = await BABYLON.CreateSoundAsync("exp2", buffer); // Both sounds share the same audio data in memory

Multi-Format Support

Browser compatibility for different audio codecs:

const sound = await BABYLON.CreateSoundAsync("music", [ "music.ogg", // Firefox, Chrome "music.m4a", // Safari "music.mp3" // Fallback (all browsers) ]); // First supported format is automatically selected

Microphone Input

Capture and process microphone audio:

const micStream = await navigator.mediaDevices.getUserMedia({ audio: true }); const micSound = await audioEngine.createMicrophoneSoundAsync(micStream); micSound.play();

Performance Considerations

1. Use streaming sounds for files > 1MB or > 30 seconds
2. Enable options during creation (spatialEnabled, stereoEnabled, analyzerEnabled) to avoid runtime delays
3. Limit sound instances with maxInstances option
4. Use audio buses to group sounds for collective spatial processing
5. Dispose sounds when no longer needed to free memory

Legacy Engine

The old AudioEngine (V1) is deprecated but still available:

// Enable legacy engine const engine = new BABYLON.Engine(canvas, true, { audioEngine: true });

Migration strongly recommended for better performance and features.

---

Performance Metrics

Execution Time: 3 seconds Token Consumption: ~31,669 tokens used (168,331 remaining of 200,000 budget)

---

Additional Resources

• https://doc.babylonjs.com/features/featuresDeepDive/audio/v2/playingSoundsMusic
• https://doc.babylonjs.com/features/featuresDeepDive/audio/v2/migrateFromV1
• https://playground.babylonjs.com/#A9NDNJ