webaudio-kit
Examples

Standalone example apps.

Small framework examples that use normal published package ranges and are checked from packed tarballs before release.

RecipesFramework comparisonAPI referenceHooks vs Core
Frameworks

Build against packed packages.

The examples are outside the pnpm workspace on purpose. The checker copies each one into a temporary folder, installs packed package tarballs, and runs the example build.

Check examples

repo check
pnpm examples:check

Run in browser

These links open standalone GitHub example folders in StackBlitz or CodeSandbox. The repository remains the source of truth, so the browser examples follow the same package files that CI checks. You can also import the repo on Replit.

examples/incident-alert-console

Incident Alert Console

Product-style monitoring console with severity cues, volume control, context state, and analyser output.

Run in StackBlitzRun in CodeSandbox
examples/vite-react

Vite React

Main tone, sweep, noise, volume, waveform, and spectrum example for client-side React apps.

run locally
cd examples/vite-react
pnpm install
pnpm dev
Vite React source excerpt
function AudioWorkbench() {
  const [frequency, setFrequency] = useState(440);
  const tone = useTone({ frequency, gain: dbToGain(-18), type: "sine" });
  const sweep = useFrequencySweep({ from: 250, to: 8000, durationMs: 2400 });
  const noise = useNoise({ durationMs: 700, gain: 0.07, type: "pink" });
  const volume = useVolume();

  return (
    <>
      <button onClick={() => void tone.play()}>Play tone</button>
      <button onClick={() => void sweep.play()}>Run sweep</button>
      <button onClick={() => void noise.play()}>Pink noise</button>
      <input
        max="0.5"
        min="0"
        onChange={(event) => void volume.setGain(event.currentTarget.valueAsNumber)}
        type="range"
        value={volume.gain}
      />
      <WaveformCanvas backgroundColor="#10110f" strokeColor="#c8ea3a" />
      <SpectrumCanvas backgroundColor="#10110f" barColor="#8ed8ff" />
    </>
  );
}

createRoot(document.getElementById("root")!).render(
  <AudioProvider>
    <AudioWorkbench />
  </AudioProvider>,
);
View vite-react source
examples/next-app-router

Next App Router

Server page with a client component boundary for AudioProvider, hooks, and visualizer canvases.

run locally
cd examples/next-app-router
pnpm install
pnpm dev
Next App Router source excerpt
"use client";

import {
  AudioProvider,
  SpectrumCanvas,
  WaveformCanvas,
  useFrequencySweep,
  useNoise,
  useTone,
  useVolume,
} from "@webaudio-kit/react";

function Controls() {
  const tone = useTone({ frequency: 440, gain: 0.14, type: "sine" });
  const sweep = useFrequencySweep({ from: 250, to: 8000, durationMs: 2400 });
  const noise = useNoise({ durationMs: 700, gain: 0.07, type: "pink" });
  const volume = useVolume();

  return (
    <section aria-label="Browser audio controls">
      <button onClick={() => void tone.play({ durationMs: 700 })}>
        Play 440 Hz
      </button>
      <button onClick={() => void sweep.play()}>Run sweep</button>
      <button onClick={() => void noise.play()}>Pink noise</button>
      <input
        max="0.5"
        min="0"
        onChange={(event) => void volume.setGain(event.currentTarget.valueAsNumber)}
        step="0.01"
        type="range"
        value={volume.gain}
      />
      <WaveformCanvas />
      <SpectrumCanvas />
    </section>
  );
}

export function AudioControls() {
  return (
    <AudioProvider>
      <Controls />
    </AudioProvider>
  );
}
View next-app-router source
examples/plain-react

Plain React

Smallest provider, tone, volume, waveform, and spectrum setup.

run locally
cd examples/plain-react
pnpm install
pnpm dev
Plain React source excerpt
function App() {
  const tone = useTone({ frequency: 440, gain: 0.14, type: "sine" });
  const volume = useVolume();

  return (
    <AudioProvider>
      <button onClick={() => void tone.play({ durationMs: 600 })}>
        Play tone
      </button>
      <input
        max="0.5"
        min="0"
        onChange={(event) => void volume.setGain(event.currentTarget.valueAsNumber)}
        type="range"
        value={volume.gain}
      />
      <WaveformCanvas />
      <SpectrumCanvas />
    </AudioProvider>
  );
}
View plain-react source
examples/incident-alert-console

Incident Alert Console

Product-style monitoring console with severity cues, master volume, audio state, waveform, and spectrum output.

run locally
cd examples/incident-alert-console
pnpm install
pnpm dev
Incident console source excerpt
function IncidentConsole() {
  const audio = useAudioContext();
  const warningTone = useTone({ frequency: 880, gain: 0.11 });
  const criticalSweep = useFrequencySweep({
    durationMs: 700,
    from: 520,
    to: 1800,
    type: "sawtooth",
  });

  function stopAllLocalCues() {
    audio.stopAll();
  }

  return (
    <section aria-label="Audio runtime controls">
      <button onClick={() => void audio.ensureAudioContext()}>
        Enable audio
      </button>
      <button onClick={() => void warningTone.play()}>Warning cue</button>
      <button onClick={() => void criticalSweep.play()}>Critical cue</button>
      <button onClick={stopAllLocalCues}>Stop cues</button>
      <WaveformCanvas idleStrokeColor="#384235" />
      <SpectrumCanvas idleBarColor="#384235" />
    </section>
  );
}
View incident-alert-console source
examples/audio-test-mode

Audio test mode

Low-gain diagnostic sequence with analyser output and manual stop controls.

run locally
cd examples/audio-test-mode
pnpm install
pnpm dev
Audio test mode source excerpt
function AudioSelfCheck() {
  const testMode = useAudioTestMode();

  return (
    <AudioProvider>
      <p>{testMode.currentStep?.label ?? "Idle"}</p>
      <button onClick={() => void testMode.run()}>Run test mode</button>
      <button onClick={testMode.stop}>Stop</button>
      <WaveformCanvas />
      <SpectrumCanvas />
    </AudioProvider>
  );
}
View audio-test-mode source
RecipesFramework comparisonHooks vs CoreDocs guideGitHub examples