AudioBits is currently tested in Chromium-based browsers. Other browsers are not yet verified.

Echo Vision

See a dark room through sound. Aim and send a pulse, then watch wood, metal and glass appear as their echoes return.

Add to project

npx shadcn@latest add joacod/audiobits/echo-probe

Adds editable source and the audiobits runtime dependency. Installation guide

Installs the catalog defaults and sound controller. The website visuals and input system stay in the showcase.

Use this sound

Use in src/integration.ts. Call play() from a user gesture and handle activation errors. Connect updates to application state; stop on cancellation or hiding, and dispose on removal.

import { createAudio } from "audiobits";
import {
  createEchoProbe,
  type ProbeReflection,
} from "./sounds/experiences/echo-probe/controller";

const audio = createAudio({ maxVoices: 32, maxVoicesPerSound: 16 });
const echo = createEchoProbe(audio);
let request = 0;

export async function play() {
  const token = ++request;
  await audio.start();
  if (token !== request) return;
  return echo.emit(
    [
      { distance: 0.18, pan: -0.75, intensity: 0.9, surface: 0.9 },
      { distance: 0.55, pan: 0.7, intensity: 0.8, surface: 0.15 },
      { distance: 0.82, pan: 0.15, intensity: 0.65, surface: 0.65 },
    ],
    { seed: 42 },
  );
}

export function emit(reflections: readonly ProbeReflection[], seed = 42) {
  return echo.emit(reflections, { seed });
}

export function stop() {
  request++;
  echo.stop();
}

export async function dispose() {
  stop();
  echo.dispose();
  await audio.dispose();
}
Production lifecycle

Customize or inspect

Connect your application's state and events to the sound controller. The full showcase source includes the browser host, input, and visuals.

View complete public source