@webaudio-kit/core
Browser-safe playback helpers, pitch utilities, frequency clamping, noise buffers, and per-call node cleanup.
React Web Audio ToolkitBrowser tones and sweeps without fighting Audio
Browser tones and sweeps without fighting Audio
webaudio-kit is a small React + TypeScript package set for tone generators, frequency sweeps, noise bursts, safe volume defaults, pitch labels, and analyser-driven UI in browser prototypes.
Interactive demo
Tone, sweep, noise, and waveform in one workspace.
The controls and analyser now have room to breathe, so you can adjust the sound and watch the signal without fighting the hero layout.
$
pnpm add @webaudio-kit/react @webaudio-kit/coreLive demo
Play a tone. Sweep a range. Burst noise.
AudioContextidle
Signalidle
Tone generator440 Hz / A4
Analyserwaiting for click
WaveformSpectrumFrequency 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.
- Center tone320ms
- Left pan320ms
- Right pan320ms
- Short sweep700ms
- Pink noise450ms
30-second setup
Wrap the app, then call a hook.
The public API stays intentionally small for the first production release.
App.tsx
import { AudioProvider, useTone } from "@webaudio-kit/react";
function ToneButton() {
const tone = useTone({ frequency: 440, gain: 0.15, type: "sine" });
return (
<button type="button" onClick={() => void tone.play({ durationMs: 600 })}>
Play 440 Hz
</button>
);
}
export function App() {
return (
<AudioProvider>
<ToneButton />
</AudioProvider>
);
}AI agent brief
pnpm dlx @webaudio-kit/cli agent-brief
pnpm dlx @webaudio-kit/cli agent-brief --target codex --out AGENTS.mdLatest release
Version 1.10.0 is published.
Public package notes, GitHub release assets, and npm links are kept together so developers can verify exactly what shipped.
Packages
Narrow packages with clear ownership.
@webaudio-kit/react
AudioProvider plus hooks for tones, sweeps, noise bursts, audio test mode, master volume, context state, and analyser access.
@webaudio-kit/cli
Project setup helper that generates a public AI-agent brief with docs, npm, examples, browser audio, and safety context.
apps/demo
A Vite React sandbox for manually testing tone generation, sweeps, pan, gain, noise, and analyser output.
Manual proof
The demo exercises the real provider graph.
Tone, sweep, and noise nodes feed the master gain, analyser, then destination. The waveform should move while sound is playing.
Runtime
No import-time AudioContext
AudioContext is created lazily after user interaction so React apps avoid browser autoplay violations.
Safety
Safe first-run volume
The provider starts with a 0.2 master gain and examples keep gain controls bounded.
Signal
Visible analyser signal
The demo draws analyser data so developers can verify the provider graph is live.
Checks
Safe audio test mode
Short low-gain steps exercise tone, pan, sweep, noise, and analyser routing from one user action.
Release
Release smoke checks
Package tarballs are built and reinstalled before publish so exports match the public API.
local verification
$ pnpm verify tests pass types pass packages build demo and site build lint and format pass
Scope boundary
Browser audio prototype, not medical software.
webaudio-kit can help build audible UI controls and prototypes. It is not certified audiology software, and it should not be used to diagnose hearing conditions or replace calibrated test equipment.