Audio

Babylon.js provides a powerful audio engine that allows developers to integrate spatial and non-spatial sound into their 3D scenes. The framework supports 2D sounds (global audio) and 3D spatialized sounds that react to the user’s position in the scene. The supported sound formats are: .mp3, .ogg, .wav, .m4a, .mp4.

There are several types of sounds. Here are the main ones:

Ambient Sound

Ambient sound is used to create background audio that plays consistently throughout the scene, independent of the listener’s position. It provides a persistent audio experience, ideal for background music, environmental sounds (like wind or rain), or immersive atmospheres.

<sound name='ambient' urlOrArrayBuffer={audio} options={{ autoplay: false }} />

Spatial 3D Sound

Spatial 3D sound brings audio to life by placing sounds in a 3D space, making you feel like you’re truly inside the environment. Imagine hearing footsteps behind you, a helicopter soaring overhead, or an echo bouncing off distant walls—just like in real life. As you move, the sound shifts in volume, pitch, and direction, reacting naturally to your position.

In this example, use the arrow keys to move around and explore! Step inside the blue dome if you’re feeling a trap vibe, or enter the yellow sphere if you’re in a more relaxed reggae mood!

<>
    <freeCamera name='camera-spatial' position={new Vector3(5, 1, -100)} checkCollisions applyGravity ellipsoid={new Vector3(1, 1, 1)} onCreate={camera => camera.attachControl()} />
    <sphere name='reggae-dome' position={new Vector3(-40, 0, 10)} options={{ diameter: 60 }}>
        <standardMaterial name='reggae-dome-material' alpha={0.3} diffuseColor={Color3.Yellow()} backFaceCulling={false} />
    </sphere>
    <sound name='reggae-sound' urlOrArrayBuffer={mainMixbl3Url} options={{ autoplay: true, spatialSound: true, loop: true, maxDistance: 30 }} onCreate={(sound) => {
        sound.setPosition(new Vector3(-40, 0, 10));
    }} />
    <sphere name='trap-dome' position={new Vector3(40, 0, 10)} options={{ diameter: 80 }}>
        <standardMaterial name='trap-dome-material' alpha={0.3} diffuseColor={Color3.Blue()} backFaceCulling={false} />
    </sphere>
    <sound name='trap-sound' urlOrArrayBuffer={epicTrapIntroUrl} options={{ autoplay: true, spatialSound: true, loop: true, maxDistance: 40 }} onCreate={(sound) => {
        sound.setPosition(new Vector3(40, 0, 10));
    }} />
    <ground name='ground' checkCollisions options={{ width: 500, height: 500 }} />
</>

Each sound comes from the center of the dome, meaning the farther you are, the quieter it will be. As you move closer, the sound gradually increases, just like in real life. Additionally, the direction of your camera matters! Rotating the camera along the Y-axis changes how you perceive the sound—turn left, and you’ll hear it more in your right ear; turn right, and it shifts to your left.

Attaching a sound to a mesh

You can attach a sound to a mesh in a way that the sound plays relative to the mesh’s position, so that when the mesh moves, the sound also moves with it. This can be particularly useful for creating immersive experiences where sound sources are tied to objects in the 3D world.

In this example, press ENTER to make the biplane begin flying. Feel free to use the arrow keys to move farther if the sound is bothering you!

<sound ref={soundRef} name='biplane-sound' urlOrArrayBuffer={propPlaneUrl} options={{ loop: true, maxDistance: 20 }} />

Learn More

For advanced usage, properties and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/audio/playingSoundsMusic.

3D GUI Physics