Product scope

Scope and limitations.

webaudio-kit is for safe procedural UI audio in browser apps: short tones, sweeps, noise bursts, volume controls, analyser visuals, and React ergonomics around Web Audio.

Boundary

Small generated sounds, not a full synth platform.

The package aims to make common product audio reliable while keeping deeper graph ownership available through Web Audio itself.

What webaudio-kit is for

Use webaudio-kit when an app needs short browser-generated sounds and React-friendly controls: alert cues, confirmation sounds, test tones, analyser visuals, and conservative volume defaults.

Product UI audio

Tone, sweep, and noise playback for dashboards, admin tools, onboarding checks, alert consoles, and demo panels.

Provider ergonomics

Lazy AudioContext creation, shared master gain, analyser routing, and stopAll() controls.

Visible signal

Waveform and spectrum canvases that show the provider graph is active without each app rewriting analyser loops.

What webaudio-kit is not

It is not a DAW, sampler, sequencer, medical system, Tone.js competitor, or full synthesizer graph. It is also not a custom DSP package for AudioWorklets.

scope boundary
webaudio-kit:
  good fit: safe procedural UI audio
  good fit: React hooks + provider graph
  escape hatch: core primitives and raw Web Audio

not the target:
  full synthesizer graph
  transport / measures / loops
  AudioWorklets
  medical or calibrated hearing tests

When hooks are enough

Start with @webaudio-kit/react hooks when playback belongs to React UI state and the sound fits tone, sweep, noise, volume, analyser, or test-mode behavior.

When core primitives are enough

Use @webaudio-kit/core when React is not involved or when a small custom graph already owns the AudioContext and destination node.

core-owned graph
const context = new AudioContext();
const destination = context.createGain();
destination.connect(context.destination);

const handle = playTone(context, {
  durationMs: 240,
  frequency: 660,
  gain: 0.12,
}, destination);

handle.stop();

When to use raw Web Audio

Use raw Web Audio directly when your product owns complex routing, buses, sends, sidechains, a routing matrix, long-lived node graphs, or scheduling rules that should outlive React components.

When to use Tone.js or a full audio engine

Use Tone.js or another full audio engine when the product needs transport, tempo, synced loops, instruments, samplers, effects chains, modulation matrices, polyphonic note management, or musical scheduling.

Current limitations

The main limits today are no full synthesizer graph, no AudioWorklets, no microphone pipeline, no advanced routing matrix, limited modulation, and a young ecosystem with fewer outside examples than older packages.

The package does include envelopes, patterns, filters, and richer recipes, but those stay focused on short UI cues rather than becoming a general-purpose synth engine.

Decision checklist

Use hooks

Normal React product audio and provider-scoped playback.

Use core

Non-React code or a custom destination node.

Use another engine

Musical, instrument-grade, effect-heavy, or graph-heavy apps.