Components

Song

This wraps around all Reactronica components, providing top level control of the audio.

Example

const Audio = ({ isPlaying }) => {
  return (
    <Song isPlaying={isPlaying} bpm={90} volume={-3} isMuted={false}>
      <Track steps={['C3', 'C3', 'C3', 'C3']}>
        <Instrument type="synth" />
      </Track>
    </Song>
  );
};

Props

bpm number

Speed or pace of the song. Short for beats per minute.

isPlaying boolean

Sets the song to be either playing or stopped. Defaults to false.

volume number

Volume of entire song.

isMuted boolean

Mute the whole song

Track

Tracks make up the layers of audio within a Song. Each Track has independent volume, pan, and mute controls. Pass steps through to play a sequence.

Example

const Audio = ({ isPlaying }) => {
  return (
    <Song isPlaying={isPlaying} bpm={90}>
      <Track 
        steps={['C3', null, 'F3', 'G3']}
        volume={-3}
        pan={0}
        mute={false}
        onStepPlay={(step) => {
          // Callback that triggers on every step
          console.log(step) // 'C3' ... 'G3' ... 'F3' ... 'G3'
        }}
      >
        <Instrument type="synth" />
      </Track>
    </Song>
  );
};

Props

steps StepType[]

An array of steps to play. Can be string or { name: string, duration: number, velocity: number } or even an array of an array to create chords.

...
// Pass an array of notes to play chords
<Track
  steps={[['C3', 'E3', 'G3'], ['G3', 'B4', 'D4']]}
>
...
// To control note duration or velocity, use an object
<Track
  steps={[{ name: 'C3', duration: 0.3, velocity: 0.8 }]}
>
...

volume number

Volume of track.

pan number

Panning of track.

mute boolean

Mutes track.

solo boolean

Only play this track, or other solo'd tracks

onStepPlay function

Callback that runs on every step.

Instrument

Wrapped by a Track and becomes its audio source. Either a type of browser-based synth, or a sampler that plays audio samples.

Example

const Audio = () => {
  return (
    <Song>
      <Track>
        // Browser-based synth example
        <Instrument 
          type="synth"
          notes={['C3']}
          envelope={{
            attack: 0.2,
            release: 0.5,
          }}
        />
      </Track>
      <Track>
        // Sampler example
        <Instrument 
          type="sampler"
          notes={['D3']}
          samples={{
            'C3': 'path/to/file1.mp3',
            'D3': 'path/to/file2.mp3',
          }}
        />
      </Track>
    </Song>
  );
};

Props

type amSynth | duoSynth | fmSynth | membraneSynth | metalSynth | monoSynth | pluckSynth | sampler | synth

Instrument type.

notes NoteType[]

An array of notes ({ name: string, velocity: number }) to trigger Instrument, useful for auditioning sounds or live performance.

samples object

Only for sampler instrument type. eg. { C3: '/path/to/file1.wav', D3: '/path/to/file2.wav' }

polyphony number

Maximum number of notes played at the same time. Only for some synth types.

oscillator { type: 'triangle' | 'sine' | 'square' }

A repeating waveform shape. Only for some synth types.

envelope { attack: number, decay: number, sustain: number, release: number }

key string | number

Built-in React prop that can be changed to flush previously loaded file samples. This is advanced usage.

onLoad function

Only for sampler instrument type. Gets called after all samples load

Effect

Audio effects such as feedbackDelay, distortion and freeverb. Add as children of Track, with multiple Effects allowed.

Example

const Audio = ({ isPlaying }) => {
  return (
    <Song isPlaying={isPlaying}>
      <Track steps={['C3', 'G3', 'E3', 'A3']}>
        <Instrument type="synth" />
        // Distortion effect
        <Effect type="distortion" wet={0.2} />
        // Add more to chain effects together
        <Effect type="feedbackDelay" wet={0.3} />
        <Effect type="autoFilter" />
      </Track>
    </Song>
  );
};

Props

type autoFilter | autoPanner | autoWah | bitCrusher | distortion | feedbackDelay | freeverb | panVol | tremolo

Effect type

wet number

How much the effect is mixed with the original source. 1 = 100%, 0 = none.