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
- Explore CV Generators
- Learn about Processors
- Build a simple synthesizer
