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:

Join our team — we're hiring!

Related Posts

trace-pkg: Package Node.js apps for AWS Lambda and ...

Packaging Node.js applications for the cloud can be slow and tedious. We introduce trace-pkg, a general purpose tool to quickly and efficiently packag ...

Jetpack: trace your way to faster and smaller Serv ...

Want faster-than-ever-before packaging speeds combined with the smallest possible bundle size for your Serverless Framework application? Come meet the ...

Jetpack: multiple engines for your Serverless pack ...

The 'serverless-jetpack' plugin continues its mission to make Serverless Framework packaging and deployment rocket-fast with new features including pa ...