@web-kits/audio

Declarative audio synthesis for the web. Describe sounds as plain objects, play them with one function call.

~11 kB gzipped, tree-shakeable, works with vanilla JS or React.

Install

npm install @web-kits/audio

Quick start

import { defineSound, ensureReady } from "@web-kits/audio";

const click = defineSound({
  source: { type: "sine", frequency: { start: 1200, end: 300 } },
  envelope: { attack: 0.001, decay: 0.06, sustain: 0, release: 0.03 },
  gain: 0.3,
});

await ensureReady();
click();

React

import { usePatch } from "@web-kits/audio/react";

function App() {
  const patch = usePatch("/patches/core.json");

  return (
    <button onClick={() => patch.play("click")} disabled={!patch.ready}>
      Click me
    </button>
  );
}

CLI

Browse and install community sound patches directly from GitHub repos:

# Browse the registry
npx @web-kits/audio add

# Install from a GitHub repo
npx @web-kits/audio add user/repo

# Create a new patch
npx @web-kits/audio init

# List installed patches
npx @web-kits/audio list

Monorepo structure

packages/audio       Core library + CLI (published to npm)
apps/web             Documentation, registry, and homepage
ui/                  Shared UI components
.web-kits/           First-party sound patches & generated code

Documentation

Full docs at audio.raphaelsalaja.com.

References

• Built on the Web Audio API
• Patch discovery and CLI inspired by skills.sh by Vercel

Contributing

See CONTRIBUTING.md for setup instructions and guidelines.

License

MIT