Make Dope Beats with ReactJS


“With a kick, snare, kicks and high hat, skilled in the trade of that old boom bap”

Before I was a software engineer, I was a music producer. Specifically, I made beats for rap songs. Then file sharing put a dent in the music industry, and it became much harder to do as a career. But hey, I had programming to fall back on!

I still made music as a hobby over the years, but less and less seriously as time went on. Very recently, I got news that Akai was discontinuing its iconic offering of standalone hardware MPC drum machines. This made me deeply sad. I mowed untold numbers of lawns for my first MPC and it felt to me like the death of an era.

akai mpc2000 top lg 771x578

So I did what any geek that writes React code all day long would do. I wrote a library so that I can make beats with ReactJS. I call it react-music.

react-music let you make beats using JSX code and hooks into the Web Audio API to turn your code into beautiful music. There is no UI, with the exception of a play/stop button and a spectrum analyzer that renders on your page:

=

The code is regular React components that implements the sort of features you might find in a sequencer/sampler/DAW via the props API:

Screen Shot 2016 08 22 at 1 15 15 PM

Open up your running app in a browser, and now you have super hot beats:

The library is still very young at this point, and has a lot of work on the roadmap, but if you’d like to make some hot fire with the power of React, check it out here:

https://github.com/FormidableLabs/react-music

We Are Formidable


Formidable is a Seattle and London-based engineering consultancy and open source software organization, specializing in React.js, React Native, GraphQL, Node.js, and the extended JavaScript ecosystem.

Since 2013, our agile team has worked with companies ranging in size from startups, to Fortune 100s, to build quality software and level up engineering teams.

Launching a new JavaScript Product?
Need Help with an Existing Project?

Get in touch

August 15, 2016

Introducing Webpack Dashboard

Read Next