I like to build music instruments on digital platforms for fun.

So I often think about building the right abstractions to make music development more fun and simple.

Most of my research (rightfully) lead me to danigb’s excellent work on Music with JavaScript.

Among other libraries danigb is the author of tonal, soundfont-player and many others.

The work described below builds on top of these excellent libraries.

Because I enjoy building apps with React, I wrote : react-soundfont-player which is a very thin React wrapper around soundfont-player

Once that was done, I wanted a way to :

Keep track of which notes were being played at any time.

Update the UI when a note starts/stops playing

Be able to imperatively start and stop playing any note without worrying about how it’s stored and if it’s there.

To achieve these 3 objectives I built mobx-music which exposes only one function : getInstruments

And react-mobx-music to map the mobx state to a Headless React Component :

With this toolkit in hand you can trivially build any instrument you want !

Here’s a sandbox with a small example :

Fork the sandbox to start your own musical experiments !

Or unleash your creativity.

Obligatory GIF :

Cheers !

Props to :

Michel Weststrate for creating MobX !

The awesome React team :D

danigb for building a bunch of great javascript music libraries !