Make Dope Beats with ReactJS

22 August 2016

Formidable Icon

Ken Wheeler

“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.

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:

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:

Related Posts