Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/site/app/docs/comparison/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function ComparisonDocsPage() {
are building.
</p>
<div className="heroActions">
<Link className="button buttonPrimary" href="/docs/quick-start">
<Link className="button buttonPrimary" href="/docs">
Quick start
</Link>
<Link className="button" href="/docs/hooks-vs-core">
Expand Down
6 changes: 6 additions & 0 deletions apps/site/public/docs-search-index.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@
"excerpt": "Browser Audio Guide Autoplay Browsers usually block audio until a user gesture occurs. This is normal. Call play() from: - click - pointer down - touch - keyboard action - another direct user-triggered event Do not expec",
"body": "Browser Audio Guide Autoplay Browsers usually block audio until a user gesture occurs. This is normal. Call play() from: - click - pointer down - touch - keyboard action - another direct user-triggered event Do not expect audio to start from: - module import - initial render - useEffect on page load - background timers Lazy AudioContext AudioProvider creates AudioContext only when ensureAudioContext() is needed by playback or volume actions. This avoids: - import-time browser side effects - autoplay policy violations - server-side rendering crashes - unused audio contexts in routes that never play sound Suspended Contexts Some browsers create an audio context in suspended state. The provider calls resume() when playback starts. If sound does not play: - confirm the call happens from a click - confirm the browser tab is not muted - confirm system volume is low but audible - check the console for Web Audio errors For the full AudioProvider state model, including the custom idle value, see the AudioProvider state machine. Safari Notes Safari can be stricter about user gestures and device routing. Keep playback actions directly connected to buttons. Avoid wrapping initial playback in a delayed promise chain if possible. Firefox Notes Firefox can keep a context suspended until interaction is clearly user-driven. The demo QA covers Firefox behavior, but manual listening is still required. SSR And Frameworks The package is designed for browser usage. If you use a framework with server rendering, render AudioProvider only in client components or client-side routes. For Next.js App Router: Permissions The current release does not request microphone permissions. Playback-only APIs do not need microphone access."
},
{
"title": "Comparison",
"url": "/docs/comparison",
"excerpt": "Comparison There are a few well-established ways to do audio on the web. They solve different problems, so the right choice depends on what you are building. This page lays out where webaudio-kit fits next to Tone.js, Ho",
"body": "Comparison There are a few well-established ways to do audio on the web. They solve different problems, so the right choice depends on what you are building. This page lays out where webaudio-kit fits next to Tone.js, Howler.js, and use-sound. The short version - webaudio-kit — generate audio (tones, sweeps, noise) and visualize it, with no audio files. React hooks plus a framework-agnostic core. - Tone.js — a full framework for making music in the browser: synths, effects, transport, and scheduling. - Howler.js — play back audio files and sprites across browsers. - use-sound — a small React hook for playing audio files, built on Howler. When to reach for each | You want to… | Best fit | | ----------------------------------------------------- | --------------------- | | Play a generated beep, chime, or alert with no assets | webaudio-kit | | Sweep a frequency or emit shaped noise | webaudio-kit | | Draw a waveform or spectrum of live audio | webaudio-kit | | Play a recorded sound effect or music file | Howler.js / use-sound | | Play short sound files from inside React | use-sound | | Build an instrument, sequencer, or DAW-style app | Tone.js | webaudio-kit webaudio-kit is built around generating and analyzing audio rather than playing files. You get React hooks for tones, frequency sweeps, and noise bursts, plus canvases that wire themselves to an analyser to draw waveforms and spectrums. Under the hood there is a framework-agnostic core with the math helpers (midiToFrequency, frequencyToNoteName, dbToGain) so the same primitives work outside React. Because the sound is synthesized, there are no audio assets to ship and nothing to fetch at runtime — useful for UI feedback sounds, test tones, and visualizers. webaudio-kit deliberately does not try to be a music framework or a file-playback library; see Scope and limitations. Tone.js Tone.js is a framework for creating music in the browser. It provides synthesizers, effects, a transport with sample-accurate scheduling, and a large instrument and signal vocabulary. If you are building an instrument, a sequencer, or anything that needs musical timing, Tone.js gives you far more than webaudio-kit aims to. The trade-off is a larger surface area and more concepts to learn for cases where you only need a tone or a meter. Howler.js Howler.js is a mature, framework-agnostic library for playing back audio files. It handles cross-browser quirks, audio sprites, and spatial audio. Reach for Howler when your sounds are recorded assets — sound effects, voiceover, music tracks. webaudio-kit does not play files; it generates sound, so the two cover different needs. use-sound use-sound is a React hook by Josh Comeau that wraps Howler to play audio files with a minimal API. It is a great fit when you have sound files and want to trigger them from React. If instead you want the sound generated for you — a beep without an asset, a sweep, or a visualization — that is what webaudio-kit is for. The two can coexist in the same app. Can I use them together? Yes. They are not mutually exclusive. A common setup is use-sound or Howler for recorded effects and webaudio-kit for generated cues and visualizations. Pick per sound, not per project."
},
{
"title": "Deployment",
"url": "/docs/deployment",
Expand Down
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,10 @@
"typecheck": "tsc -p tsconfig.base.json --noEmit",
"test": "vitest run && pnpm test:scripts",
"test:scripts": "node --test scripts/*.test.mjs",
"test:coverage": "vitest run --coverage",
"test:watch": "vitest",
"lint": "eslint . --max-warnings=0",
"format:check": "prettier --check .",
"verify": "pnpm test:coverage && pnpm test:scripts && pnpm typecheck && pnpm build && pnpm demo:build && pnpm site:build && pnpm release:check-changelogs && pnpm lint && pnpm format:check"
"verify": "pnpm test && pnpm typecheck && pnpm build && pnpm demo:build && pnpm site:build && pnpm release:check-changelogs && pnpm lint && pnpm format:check"
},
"engines": {
"node": ">=20.19"
Expand Down