b3d-sound

Declarative audio component wrapping Babylon.js Sound. Supports both 2D (ambient/music) and 3D (positional/spatial) audio. Spatial sounds can be placed at a fixed position or attached to a mesh to follow it.

Note: browsers block audio autoplay before user interaction. If autoplay is set, the sound will attempt to play on connect, but may be silenced until the user interacts with the page.

Demo

import { b3d, b3dSound, b3dLight, b3dSkybox, b3dSphere, b3dGround, label3d, button3d } from 'tosijs-3d'
import { elements } from 'tosijs'
const { div, p } = elements

const spatialSound = b3dSound({
  url: '/hum.mp3',
  spatialSound: true,
  x: 4, y: 1, z: 0,
  loop: true,
  volume: 0.8,
  refDistance: 2,
  maxDistance: 20,
})

preview.append(
  b3d(
    {
      // Play / Stop in the dual-presence ⚙ panel, so you can start the sound from
      // inside VR (where spatial panning is most convincing) too.
      scenePanel: () => [
        label3d({ text: 'Sound' }),
        button3d({ label: 'Play', onClick: () => spatialSound.play() }),
        button3d({ label: 'Stop', onClick: () => spatialSound.stop() }),
      ],
      sceneCreated(el, BABYLON) {
        const camera = new BABYLON.ArcRotateCamera(
          'cam', -Math.PI / 2, Math.PI / 3, 12,
          BABYLON.Vector3.Zero(), el.scene
        )
        camera.attachControl(el.querySelector('canvas'), true)
        el.setActiveCamera(camera)
      },
    },
    b3dLight({ y: 1, intensity: 0.8 }),
    b3dSkybox({ timeOfDay: 12 }),
    b3dGround({ diameter: 20, color: '#556644' }),
    b3dSphere({ x: 4, y: 1, z: 0, diameter: 0.5, color: '#ff4400' }),
    spatialSound,
  ),
  div(
    { style: 'position:absolute; top:8px; right:8px; background:rgba(0,0,0,0.6); color:white; padding:8px 12px; border-radius:6px; font:12px monospace' },
    p('Orbit the camera to hear spatial panning. Play/Stop in the ⚙ (VR too).'),
  ),
)

Attributes