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: Highly experimental. APIs will change.
Demos
Digital Audio Workstation
Early prototype of a browser based Digital Audio Workstation. Inspired by Ableton Live, Cubase and Logic Pro, this experiment comes complete with multi-track sequencing, browser synths, drums and web audio effects.
Music chord/scale toolbox
Improve your understanding of music theory with this chord, scale and progression finder.
Install
$ npm install --save reactronica tone
Note: Use React version >= 16.8 as Hooks are used internally.
Template
To get started quickly with Create React App and Reactronica, just run the command below:
$ npx create-react-app my-app --template reactronica
Examples
Drum Pads
Have a hit a tap out a beat.
import { Song, Track, Instrument } from 'reactronica';// Simplified Drum Padsconst DrumPads = () => {const [notes, setNotes] = React.useState(null);return (<><buttononMouseDown={() => setNotes([{ name: 'C3' }])}onMouseUp={() => setNotes(null)}>Kick</button>{/* ...other pads */}{/* Reactronica Components */}<Song><Track><Instrumenttype="sampler"notes={notes}samples={{C3: '/drums/kick.wav',D3: '/drums/snare.wav',E3: '/drums/hat.wav',}}onLoad={() => {// Runs when samples are loaded}}/></Track></Song></>);};
Piano Roll
Classic piano roll step sequencer. Try editing the notes and come up with different chords and melodies.
import { Song, Track, Instrument } from 'reactronica';// Simplified Piano Rollconst PianoRollExample = () => {const [isPlaying, setIsPlaying] = useState(false);const [currentStepIndex, setCurrentStepIndex] = useState(0);const [steps, setSteps] = useState([['C3', 'E3', 'A3'],null,['C3', 'E3', 'G3', 'B3'],null,['C3', 'F3', 'A3'],null,['D3', 'G3', 'B3'],null,]);return (<><button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? 'Play' : 'Stop'}</button><PianoRollcurrentStepIndex={currentStepIndex}onClick={(steps) => setSteps(steps)}/>{/* Reactronica Components */}<Song isPlaying={isPlaying}><Tracksteps={steps}// Callback triggers on every steponStepPlay={(stepNotes, index) => {setCurrentStepIndex(index);}}><Instrument type="polySynth" /></Track></Song></>);};
Ukulele Tablature
Interactive tablature for ukulele. Have a play and try changing the notes while the song is playing. Arrow keys should work as well.
import { Song, Track, Instrument } from 'reactronica';const UkuleleTab = () => {const [tab, setTab] = React.useState(defaultTab);const [isPlaying, setIsPlaying] = React.useState(false);const [currentIndex, setCurrentIndex] = React.useState(0);const steps = tabToSteps(tab);return (<><button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? 'Stop' : 'Play'}</button><Tabtab={tab}currentIndex={currentIndex}onUpdate={(newTab) => {setTab(newTab);}}/>{/* Reactronica Components */}<Song isPlaying={isPlaying} bpm={90}><Tracksteps={steps}subdivision={'8n'}onStepPlay={(_, i) => {setCurrentIndex(i);}}><Instrumenttype="sampler"samples={{C4: `/ukulele/uke_060.wav`,'C#4': `/ukulele/uke_061.wav`,// ... D4 - A#5 samplesB5: `/ukulele/uke_083.wav`,C6: `/ukulele/uke_084.wav`,}}/></Track></Song></>);};
Usage
import React from 'react';import { Song, Track, Instrument, Effect } from 'reactronica';const Example = () => {return (// Top level component must be the Song, with Tracks nested inside<Song bpm={90} isPlaying={true}><Track// Array of several typessteps={[// Note in string format'C3',// Object with note and duration{ name: 'C3', duration: 0.5 },{ name: 'D3', duration: 0.5 },// Array of strings for chords['C3', 'G3'],null,null,// Array of objects for chords[{ name: 'C3', duration: 0.5 },{ name: 'G3', duration: 0.5 },],null,]}// Volume in decibelsvolume={0}pan={0}// Callback for every tickonStepPlay={(step, index) => {doSomething(step, index);}}><Instrument type="polySynth" />{/* Add effects chain here */}<Effect type="feedbackDelay" /><Effect type="distortion" /></Track><Track><Instrumenttype="sampler"samples={{C3: 'path/to/kick.mp3',D3: 'path/to/snare.mp3',E3: 'path/to/hihat.mp3',}}// Add some notes here to playnotes={[{ name: 'C3' }]}/></Track></Song>);};
Documentation
Song
This component wraps around all Reactronica components, providing top level control of the audio.
- bpm
number
- Speed or pace of the song. Short for beats per minute. - isPlaying
boolean
- Whether the song is playing or not. Defaults tofalse
. - volume
number
- Volume of entire song - isMuted
boolean
- Mute the whole song
Track
Tracks make up the layers of audio within a Song. Each individual Track has independent volume
, pan
, steps
and effects
.
- volume
number
- Volume of track - pan
number
- Panning of track - mute
boolean
- Mute track - solo
boolean
- Only play this track, or other solo'd tracks - steps
StepType[]
- An array of steps to play. Can bestring
or{ name: string, duration: number, velocity: number }
. - onStepPlay
function
- Callback that runs on every step.
Instrument
Should be wrapped by a Track and becomes its audio source.
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 forsampler
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 filesamples
. This is advanced usage. - onLoad
function
- Only forsampler
instrument type. Gets called after allsamples
load
Effect
Audio effects such as feedbackDelay
, distortion
and freeverb
. Add as children of Track, with multiple Effects allowed.
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.