React audio components for making music in the browser.
React treats UI as a function of state. This library aims to treat music as a function of state, rendering sound instead of UI. Visual 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.
$ npm install --save reactronicaNote: Use React version >= 16.8 as Hooks are used internally.
To get started quickly with Create React App and Reactronica, just run the command below:
$ npx create-react-app my-app --template reactronicaimport 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
// Array of several types
steps={[
// Note in string format
'C3',
// Object with note name 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={80}
pan={0}
// Callback for every tick
onStepPlay={(step, index) => {
console.log(step, index);
}}
>
<Instrument type="synth" />
{/* Add effects chain here */}
<Effect type="feedbackDelay" />
<Effect type="distortion" />
</Track>
<Track>
<Instrument
type="sampler"
samples={{
C3: 'path/to/kick.mp3',
D3: 'path/to/snare.mp3',
E3: 'path/to/hihat.mp3',
}}
// Add some notes here to play
notes={[{ name: 'C3' }]}
onLoad={(buffers) => {
// Runs when all samples are loaded
}}
/>
</Track>
</Song>
);
};- https://tonejs.github.io/
- https://github.com/FormidableLabs/react-music
- https://github.com/jaredpalmer/tsdx
- https://github.com/crabacus/the-open-source-drumkit for the drum sounds
MIT © unkleho