{
  "markdown": "# Audiorective\n\nThe wholestack audio primitives.\n\nIf you've explored enough Web Audio projects, you'll notice a big missing puzzle piece. Beyond your most valuable audio logic, there are many fundamental problems to solve — state management, coping with UI frameworks, scheduling, to name a few.\n\nEveryone implements their own version of these in slightly different ways. Most end up tightly coupled to specific UI and audio frameworks.\n\nNow it's even worse in the vibe-coding era: ask your AI magician to build something audio on the web, and it will almost certainly start from scratch — or at best reach for Tone.js if you thought to ask.\n\naudiorective aims to solve this — think JUCE-grade infrastructure, but for the web platform. Native audio has mature frameworks that handle audio threading, parameter automation, host communication, and UI binding. Web Audio has nothing equivalent; Tone.js is a music-production library, not a general-purpose audio application framework.\n\nWe fill that structural gap with independent, composable packages. Each one solves a specific recurring problem — from reactive state management to scheduling, analysis, and beyond — so you can focus on the exciting part: audio.\n\nWhat's even better: we also ship an agent skill that teaches LLMs how to use audiorective to solve real audio problems correctly. Whether you're a vibe-coder, an AI-assisted session engineer, or a 100% hand-crafting master — we've got you covered. See [Agent Skill](#agent-skill) below for install instructions.\n\n## Packages\n\n| Package                                             | Description                                                                                               |\n| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| [`@audiorective/core`](./packages/core)             | Reactive primitives for Web Audio — Param, AudioProcessor, AudioEngine, Sampler, BufferPlayer, FilePlayer |\n| [`@audiorective/react`](./packages/react)           | React hooks and context factories                                                                         |\n| [`@audiorective/threejs`](./packages/threejs)       | Three.js bindings — engine glue, spatial transform sync                                                   |\n| [`@audiorective/playcanvas`](./packages/playcanvas) | PlayCanvas bindings — shared AudioContext + pre/post-panner FX on SoundSlot                               |\n| [`@audiorective/clock`](./packages/clock)           | Timing and scheduling engine — transport, tempo, look-ahead tick windows, rulers                          |\n\nFramework-agnostic core. First-class React bindings. Works headless in Node.js.\n\n## Design Principles\n\n- **No state duplication** — AudioProcessor owns all state. UI frameworks observe and mutate directly. No dispatch, no actions, no reducers.\n- **Web Audio conventions** — `.value` everywhere, scheduling methods match `AudioParam` 1:1. If you know `gainNode.gain.value`, you know the API.\n- **LLM-friendly** — every package ships with agent skills so LLMs can build with audiorective out of the box.\n- **Standalone packages** — use what you need. No monolithic framework lock-in.\n\n## Examples\n\n[apps/web/src/demos/livehouse](./apps/web/src/demos/livehouse) — **Livehouse PA Simulator**, one app built with `@audiorective/core`, `@audiorective/react`, `@audiorective/playcanvas`, and three.js: you're the PA tech in a cyber livehouse. Six audio drones (FilePlayer stems, a synth, and a Sampler for the pads) fly in a PlayCanvas world; walk around to hear the spatial mix shift, mix each channel (EQ / volume / solo / mute / 3D pan) from a React iPad HUD, fire the sampler pads, and hit Headphone to monitor a dry stereo mixdown. Demonstrates the full stack: one `AudioContext`, three renderers, zero duplicated audio state. Runs at `/showroom/livehouse` on the site.\n\n[apps/web/src/demos/sequencer](./apps/web/src/demos/sequencer) — a 16-step **drum machine** built with `@audiorective/clock`, `@audiorective/core`, and `@audiorective/react`. One `grid(patternLength)` loop over a `CycleBarRuler` schedules the whole pattern; transport, tempo, and live step edits all go through the clock. The reference consumer for [docs/clock.md](./docs/clock.md). Runs at `/showroom/sequencer` on the site.\n\n[apps/web/src/demos/pixi](./apps/web/src/demos/pixi) — a minimal **PixiJS** spectrum visualizer built with only `@audiorective/core`, `alien-signals`, and `pixi.js`. Shows that a 2D canvas renderer needs no binding package: the core `Analyser` feeds per-frame spectrum bars, an `effect()` drives a signal-reactive glow, and pointer drags write params directly (with the UI-owned `level` kept separate from the ramped `gate` envelope). See [docs/pixijs.md](./docs/pixijs.md). Runs at `/showroom/pixi` on the site.\n\n## Agent Skill\n\n### Any agent (Claude Code, Cursor, OpenCode, Cline, …)\n\nInstall with the [Vercel skills CLI](https://github.com/vercel-labs/skills):\n\n```sh\nnpx skills add audiorective/audiorective\n```\n\nThe CLI auto-detects whichever agent you have installed and writes the skill into the right place.\n\n### Claude Code plugin\n\naudiorective also ships as a [Claude Code plugin](https://code.claude.com/docs/en/plugins). Add this repo as a marketplace, then install the plugin from it.\n\n**CLI**\n\n```sh\n/plugin marketplace add audiorective/audiorective\n/plugin install audiorective@audiorective\n```\n\n**Claude Desktop (Code or Cowork tab)**\n\n1. Click **Customize** in the sidebar\n2. Click the **+** button in the **Personal Skills** section → **Add Marketplace**\n3. Enter `audiorective/audiorective`\n4. Install the audiorective plugin from the browser\n\nFull reference: [Discover and install plugins](https://code.claude.com/docs/en/discover-plugins).\n\n## License\n\nMIT\n\n## Links\n\n- [GitHub](https://github.com/audiorective/audiorective)\n- [@audiorective/core on npm](https://www.npmjs.com/package/@audiorective/core)\n- [@audiorective/react on npm](https://www.npmjs.com/package/@audiorective/react)\n- [@audiorective/threejs on npm](https://www.npmjs.com/package/@audiorective/threejs)\n- [@audiorective/playcanvas on npm](https://www.npmjs.com/package/@audiorective/playcanvas)\n- [@audiorective/clock on npm](https://www.npmjs.com/package/@audiorective/clock)\n",
  "bytes": 6352,
  "sha": "67da5c668f89c2f5102c40a228e51ea9b451d22122c99de79409cce833e749c0",
  "repo_slug": "audiorective/audiorective",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_audiorective_audiorective_audiorective_88ee96c4/readme"
}