Make Beats with React

The Tweet

Later That Day...

Make Beats with React

The Loop Machine

Steps, beats, bars and all the good stuff.

The Tempo

Beats per minute (BPM)

Browser Beatmaker

splice.com/sounds/beatmaker

We give instructions to the machine, let it figure out what to do.

Declarative

Meet React-Music

Why React-Music?

- Leverages Web Audio API

- Composable React Components

- Clean, simple API

Song

Sequencer

Instruments

- Sampler

- Synth

- Monosynth

Sampler

Plays sample from audio file.

Synth

Oscillator, wave form, melody.

Monosynth

Single note. No chords. Glide!

Demo Time!

Live examples... what could go wrong?

Filters & Effects

Elaborate sounds. Add depth.

Super Hard!

Tweak. Save. Listen. Tweak again.

Ugh.

A Little Experiment

Extending React-Music.

Live Controls

Play with instruments & effects in real-time.

Demo Time!

A basic live-mixing console.

github.com/simonswiss/react-music

react-music-mix.surge.sh

Code

Live Demo

Promising Start

React-music is 3 weeks old only.

- good traction early on

So Far So Good

yo Jed, k dubs says what up homie

- Ken Wheeler

”

Code + Music

It's good fun.

Beer + Pizza

It's good fun too!

Thank You.

@simonswiss