Getting Started

Introduction

React treats UI as a function of state. This library aims to treat music as a function of state, rendering sound instead of UI. Reactronica can play complex musical sequences with web synths, samples and audio effects.

Your own UI components live side by side with Reactronica, sharing the same state and elegantly kept in sync.

Uses ToneJS under the hood. Inspired by React Music.

Warning: Experimental. APIs may change.

Install

npm install reactronica tone

Note: Use React version >= 16.8 as Hooks are used internally.

Usage

import React from 'react';
import { Song, Track, Instrument, Effect } from 'reactronica';

const Example = () => {
  return (
    // Top level component must be Song, with Tracks nested inside
    <Song bpm={90} isPlaying={true}>
      {/* Track with sequenced steps */}
      <Track
        steps={['C3', null, 'A3', 'F3']}
        volume={-3}
        onStepPlay={(step, index) => {
          doSomething(step, index);
        }}
      >
        {/* Browser-based synth */}
        <Instrument type="polySynth" />
        {/* Feedback effect */}
        <Effect type="feedbackDelay" />
      </Track>

      {/* Sampler with mp3 files */}
      <Track>
        <Instrument
          type="sampler"
          samples={{
            C3: 'path/to/kick.mp3',
            D3: 'path/to/snare.mp3',
            E3: 'path/to/hihat.mp3',
          }}
          notes={[{ name: 'C3' }]}
        />
      </Track>
    </Song>
  );
};