Combo demo

Tone and noise combo.

Combine tone and noise hooks under one provider to model richer UI feedback with one shared stop control.

Copy-paste

Use this in a React component.

Keep playback inside a user action. The provider creates AudioContext lazily and routes playback through the safe graph.

combo.tsx
import { AudioProvider, useNoise, useTone } from "@webaudio-kit/react";

function ComboFeedback() {
  const tone = useTone({ frequency: 523.25, gain: 0.1, durationMs: 420 });
  const noise = useNoise({ type: "pink", durationMs: 520, gain: 0.04 });

  const play = async () => {
    await tone.play();
    await noise.play();
  };

  return (
    <>
      <button onClick={() => void play()}>Play combo pattern</button>
      <button onClick={() => { tone.stop(); noise.stop(); }}>Stop combo</button>
    </>
  );
}

export function App() {
  return (
    <AudioProvider>
      <ComboFeedback />
    </AudioProvider>
  );
}
Focused controls

Run the focused surface.

Each page keeps one primary workflow near the snippet, then leaves the full workspace below for broader testing.

Focused live demo

Combined hook workflow

idleidle
Tone plus short noise burst

Use one provider for multiple playback hooks and stop everything through one control.

Tone523 Hz
Noisepink
Shared stopyes
Full workspace

Try every control together.

Use the shared workspace when you want tone, sweep, noise, test mode, volume, pan, waveform, and spectrum controls on one screen.

Live demo

Play a tone. Sweep a range. Burst noise.

AudioContextidle
Signalidle
Tone generator440 Hz / A4
Analyserwaiting for click
WaveformSpectrum
Frequency sweep250 Hz to 8000 Hz

Uses the current waveform, gain, pan, master volume, and analyser route.

Noise burstwhite

Noise buffers use the same safe routing: source, gain, pan, master volume, analyser, then destination.

Test modeCenter tone

A short low-gain sequence checks center tone, stereo pan, sweep, noise, and analyser routing without making medical claims.

  1. Center tone320ms
  2. Left pan320ms
  3. Right pan320ms
  4. Short sweep700ms
  5. Pink noise450ms