@web-kits/audio

Declarative Web Audio synthesis: define a sound as an object, play it

Tier A · StrongAnimation LibraryToolaudio.raphaelsalaja.com

(Visit audio.raphaelsalaja.com ↗)(Docs)(Repository)

@web-kits/audio is a ~11 kB tree-shakeable TypeScript library that turns Web Audio synthesis into plain object literals — you call defineSound() with sources, filters, envelopes, modulation, layers, effects, and spatial settings, then trigger it with one function. It ships first-class React integration (a provider plus useSound, usePatch, useSequence, useAnalyser, useListener), an offline render path to AudioBuffer or WAV, and a CLI for browsing and installing community sound patches. A curated preset library covers ten aesthetics: core, minimal, soft, crisp, playful, organic, retro, mechanical, drums, and synths. It is for developers adding UI sound design or generative audio without learning the raw Web Audio graph.

Install

npm install @web-kits/audio

For an agent

Use this over Howler or a bag of MP3s when the sounds are UI feedback — clicks, toggles, sends, errors — because synthesised patches cost no network bytes, scale in pitch and length by parameter, and never desync from state. Start from the preset library (core/minimal/crisp for product UI) rather than hand-tuning oscillators, and read /resources/llms and /resources/skill first: the author publishes an llms.txt and an agent skill, so you can load the whole API contract instead of guessing. Remember browser autoplay policy — audio needs a user gesture, so call ensureReady() on first interaction or your first sound silently fails.

Why it is here. It makes sound a design token rather than an asset pipeline, and it is one of the few small libraries that ships an agent skill and llms.txt as first-class docs.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: React, Vanilla JS
Styling: Not applicable
Distribution: npm package, CLI installer, GitHub repository
Platform: Web
Content type: Code, Audio
Agent readiness: Readable open source, CLI installable, llms.txt, Agent skill or rules pack, Structured documentation
Accessibility: Unknown
Maturity: Actively maintained
GitHub stars: 514
Package: @web-kits/audio

Notable for

defineSound() object API
React hooks incl. useAnalyser
10-category preset library
offline render to WAV
publishes llms.txt and an agent skill

Provenance

Verified 2026-08-15. HTTP 200. https://audio.raphaelsalaja.com/ , https://audio.raphaelsalaja.com/sitemap.xml (full route list — API, concepts, integrations, library, resources/llms, resources/skill), https://audio.raphaelsalaja.com/library , https://github.com/raphaelsalaja/audio (stars, MIT, npm name, CLI)

Also in Motion & Interaction

audio.raphaelsalaja.comTier A