API Overview

mod provides a comprehensive set of audio components organized into categories:

Core

AudioProvider

The root component that initializes the Web Audio context.

<AudioProvider>
  {/* Your audio modules */}
</AudioProvider>

Learn more →

Sources

Components that generate audio signals:

• ToneGenerator - Oscillator with multiple waveforms
• NoiseGenerator - White and pink noise
• Microphone - Live audio input
• MP3Deck - Audio file playback
• StreamingAudioDeck - Stream audio from URLs

CV Generators

Components that generate control voltage signals for modulation:

• LFO - Low-frequency oscillator
• ADSR - Envelope generator with gate input
• Sequencer - Step sequencer
• Clock - Timing source for triggers

Processors

Components that transform audio signals:

• Filter - Multi-mode filter
• Delay - Delay effect
• Reverb - Reverb effect
• Compressor - Dynamic range compressor
• Distortion - Distortion effect
• Panner - Stereo panner
• EQ - 3-band equalizer
• And many more...

Mixers

Components that combine multiple audio signals:

• Mixer - 4-channel mixer
• CrossFade - Crossfade between two inputs

Output

Component for audio output:

• Monitor - Audio output with device selection

Visualizations

Components for visualizing audio signals:

• Oscilloscope - Waveform visualization
• SpectrumAnalyzer - Frequency spectrum visualization
• LevelMeter - Audio level meter with peak detection

Common Patterns

Component Structure

All mod components follow a consistent structure:

<Component input={inputRef} output={outputRef}>
  {(controls) => (
    <YourUI {...controls} />
  )}
</Component>

Props

• input - ModStreamRef - Reference to input audio stream (processors/mixers/output only)
• output - ModStreamRef - Reference to output audio stream (sources/processors only)
• cv - ModStreamRef - Reference to CV input (optional, for modulatable parameters)
• gate - ModStreamRef - Reference to gate input (ADSR only)
• children - Render prop function that receives control functions

Render Props

Each component exposes controls through the render prop:

{({ parameter, setParameter, ... }) => (
  <input
    value={parameter}
    onChange={(e) => setParameter(e.target.value)}
  />
)}

Type Definitions

import type {
  ModStreamRef,
  ModStream,
  ToneGeneratorProps,
  ToneGeneratorRenderProps,
  // ... etc
} from '@mode-7/mod';

Next Steps

Explore the detailed API documentation for each component, or check out the Getting Started Guide to start building.