Make Dope Beats with ReactJS

August 22, 2016
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:

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

Related Posts

Rust vs Go: Which Is Right For My Team?

August 29, 2024
In recent years, the shift away from dynamic, high-level programming languages back towards statically typed languages with low-level operating system access has been gaining momentum as engineers seek to more effectively solve problems with scaling and reliability. Demands on our infrastructure and devices are increasing every day and downtime seems to lurk around every corner.

A Rare Interview With A Designer who Designs Command-line Interfaces

May 13, 2024
For years, terminal and command-line applications have followed a familiar pattern: developers identify a need, code a solution, and release it for free, often as open-source software.

The Evolution of urql

December 6, 2022
As Formidable and urql evolve, urql has grown to be a project that is driven more by the urql community, including Phil and Jovi, than by Formidable itself. Because of this, and our commitment to the ethos of OSS, we are using this opportunity to kick off what we’re calling Formidable OSS Partnerships.