A React-first declarative WebAudio library for building audio graphs
npm install react-dinA React-first declarative WebAudio library for building audio graphs.
Build complex audio graphs using React's declarative paradigm. Audio nodes are represented as React components that automatically connect based on their parent-child relationships.
> [!WARNING]
> This is a work in progress. The API is not stable and may change in the future.
> It as been published to reserve npm package name react-din.
- 🎛️ Declarative Audio Graph - Build audio graphs using JSX components
- 🔊 AudioContext Management - Automatic context creation, unlock handling, and master bus
- 🎹 Sequencer & Transport - Musical timing with BPM, time signature, and step sequencing
- 🎯 Scoped Triggers - Per-track trigger events for instruments
- 📊 Analyzers - FFT, waveform, and metering analysis
- 🎨 Effects - Reverb, Chorus, Distortion, and more
- 🖥️ SSR-Safe - No AudioContext errors on the server
- ⚡ Headless - No DOM output, pure audio graph
- 🔊 3D Spatial Audio - Built-in Panner for 3D positioning
``bash`
npm install react-dinor
yarn add react-dinor
pnpm add react-din
`tsx
import { AudioProvider, Gain, Filter, Osc } from 'react-din';
function App() {
return (
);
}
`
Components automatically connect to their parent's output. The tree structure defines the audio routing:
`tsx`
Create step sequences with pattern-based triggering:
`tsx
import { Sequencer, Track, useTrigger, Sampler } from 'react-din';
function DrumMachine() {
return (
);
}
`
Use musical timing with the transport system:
`tsx
import { TransportProvider, useTransport, useBeat } from 'react-din';
function PlayButton() {
const { isPlaying, play, stop, bpm } = useTransport();
return (
);
}
function BeatDisplay() {
const { beat, bar, step } = useBeat('step');
return
$3
Analyze audio with FFT and metering:
tsx
import { useFFT, useMeter, Analyzer } from 'react-din';function Visualizer() {
const { bass, mid, high, spectrum } = useFFT({ fftSize: 512 });
const { rmsDb, isClipping } = useMeter();
return (
scale(${1 + bass * 0.5}) }}>
Level: {rmsDb.toFixed(1)} dB
);
}
`$3
Apply effects to audio:
tsx
import { Reverb, Chorus, Distortion } from 'react-din/effects';function EffectsChain() {
return (
);
}
`$3
Use the Panner component for 3D positional audio:
tsx
import { AudioProvider, Panner, Sampler } from 'react-din';function SpatialAudio() {
const [position, setPosition] = useState({ x: 0, y: 0, z: -5 });
return (
positionY={position.y}
positionZ={position.z}
panningModel="HRTF"
distanceModel="inverse"
refDistance={1}
maxDistance={10000}
rolloffFactor={1}
>
);
}
`API Reference
$3
| Export | Type | Description |
|--------|------|-------------|
|
| Component | Root provider, owns AudioContext |
| useAudio | Hook | Access AudioContext and state |$3
| Export | Type | Description |
|--------|------|-------------|
|
Gain | Component | Volume control |
| Filter | Component | Biquad filter (lowpass, highpass, etc.) |
| Osc | Component | Oscillator (sine, square, sawtooth, triangle) |
| Delay | Component | Delay effect |
| Compressor | Component | Dynamics compressor |
| Convolver | Component | Convolution reverb |
| Panner | Component | 3D spatial audio |
| StereoPanner | Component | Simple L/R panning |
| WaveShaper | Component | Distortion/waveshaping |$3
| Export | Type | Description |
|--------|------|-------------|
|
TransportProvider | Component | Musical timing provider |
| useTransport | Hook | Access transport state and controls |
| useBeat | Hook | Reactive time position |$3
| Export | Type | Description |
|--------|------|-------------|
|
Sequencer | Component | Step sequencer |
| Track | Component | Defines pattern and triggers children |
| useTrigger | Hook | Receive trigger events (state-based) |
| useOnTrigger | Hook | Receive trigger events (callback-based) |$3
| Export | Type | Description |
|--------|------|-------------|
|
Analyzer | Component | Analysis node |
| useAnalyzer | Hook | Raw analysis data |
| useFFT | Hook | Frequency band analysis |
| useMeter | Hook | Level metering |$3
| Export | Type | Description |
|--------|------|-------------|
|
Sampler | Component | Audio buffer playback |
| Noise | Component | Noise generator |
| MediaStream | Component | Microphone/stream input |
| ConstantSource | Component | Constant value source |$3
| Export | Type | Description |
|--------|------|-------------|
|
Reverb | Component | Algorithmic/convolution reverb |
| Chorus | Component | Chorus effect |
| Distortion | Component | Distortion/overdrive |$3
| Export | Type | Description |
|--------|------|-------------|
|
useFrame | Hook | Per-frame updates |
| tickAudio | Function | Manual frame tick for external loops |
| isSSR | Function | Check if running on server |Spatial Audio with @react-three/drei
If you're using react-three-fiber for 3D graphics, you can integrate spatial audio using
@react-three/drei's PositionalAudio component which wraps Three.js Audio system.`tsx
import { Canvas } from '@react-three/fiber';
import { PositionalAudio } from '@react-three/drei';function Scene() {
return (
);
}
``For more advanced Three.js audio integration, see the drei PositionalAudio documentation.
MIT