Skip to content

Sources

Source modules generate or input audio signals. They are the starting point of any signal chain.

Available Sources

ToneGenerator

Generates pure tones using oscillators.

Use for: Synthesizers, test tones, drones
Waveforms: Sine, square, sawtooth, triangle
API: ToneGenerator

tsx
<ToneGenerator output={ref} frequency={440} type="sine" gain={0.5} />

NoiseGenerator

Generates different types of noise.

Use for: Percussion, wind sounds, texture
Types: White, pink, brown
API: NoiseGenerator

tsx
<NoiseGenerator output={ref} type="white" gain={0.3} />

Microphone

Captures audio from the user's microphone.

Use for: Live input, vocoders, effects processing
API: Microphone

tsx
<Microphone output={ref}>
  {({ isActive, error }) => (
    <div>{isActive ? 'Recording...' : 'Click to enable'}</div>
  )}
</Microphone>

MP3Deck

Plays audio files from the user's computer.

Use for: Sample playback, backing tracks
Formats: MP3, WAV, OGG, FLAC, M4A
API: MP3Deck

tsx
<MP3Deck output={ref}>
  {({ loadFile, play, pause, currentTime, duration }) => (
    <div>
      <FilePicker onFileSelect={loadFile} accept="audio/*" />
      <button onClick={play}>Play</button>
    </div>
  )}
</MP3Deck>

StreamingAudioDeck

Streams audio from URLs.

Use for: Internet radio, streaming services, remote audio
Formats: Any streamable audio format
API: StreamingAudioDeck

tsx
<StreamingAudioDeck output={ref}>
  {({ url, setUrl, play, pause }) => (
    <div>
      <TextInput value={url} onChange={setUrl} type="url" />
      <button onClick={play}>Play Stream</button>
    </div>
  )}
</StreamingAudioDeck>

Common Patterns

Multiple Oscillators

tsx
const osc1 = useModStream();
const osc2 = useModStream();
const mixed = useModStream();

<ToneGenerator output={osc1} frequency={220} />
<ToneGenerator output={osc2} frequency={440} />
<Mixer inputs={[osc1, osc2]} output={mixed} />

Noise + Tone Layer

tsx
const tone = useModStream();
const noise = useModStream();
const layered = useModStream();

<ToneGenerator output={tone} frequency={55} type="sine" />
<NoiseGenerator output={noise} type="pink" gain={0.1} />
<Mixer inputs={[tone, noise]} output={layered} />

Live Processing

tsx
const mic = useModStream();
const processed = useModStream();

<Microphone output={mic} />
<Reverb input={mic} output={processed} />
<Monitor input={processed} />

Next Steps

Released under the MIT License.