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

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.

Code

Live Demo

Promising Start

React-music is 3 weeks old only.

- good traction early on

So Far So Good

- featured at React Rally

- hot reloading by Dan Abramov

- song arrangement in roadmap

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

React-Music

By simonswiss

React-Music

Slides for the React Sydney talk on September 12th 2016

  • 3,379