
Make Dope Beats with ReactJS - thekenwheeler
https://formidable.com/blog/2016/08/22/make-dope-beats-with-reactjs/
======
eric_bullington
While you check out this very cool repo on Formidable's Github, if you're
interested in React and/or data visualization, be sure to also check out their
Victory React dataviz project, and accompanying charts library.

Victory is somewhat similar to what we discussed putting together as the
underlying React-based dataviz library for our react-d3 chart library, except
they seem to be figuring out a nice animation API where we struggled.

I ended up burning out from (both paid and open source) overwork last year,
and never got my (very basic) dataviz library code out the door, but I'm
incredibly impressed with the comprehensive library Formidable has come up
with[0], with lots more to come it would appear. I'm easing back into open
source work now, but it's pretty clear there's no longer a need for a good
low-level, React-based dataviz library.

If you're looking for an interesting new dataviz library to check out, take a
look at Victory.

0\. [https://formidable.com/open-source/victory/](https://formidable.com/open-
source/victory/)

------
kevincennis
I'll take a second to shamelessly plug my library TinyMusic for those of you
who might want similar-ish functionality but aren't familiar with or don't
like React

[https://github.com/kevincennis/TinyMusic](https://github.com/kevincennis/TinyMusic)

~~~
jhsu
nice! I just used it last week to make this little thing
[https://github.com/jhsu/atom-tonetype](https://github.com/jhsu/atom-tonetype)
.

~~~
kevincennis
Hahaha. That's awesome!

------
liamzebedee
There's a whole subgenre of programming called algorave (algorithmic rave)
which is oriented around building music using functional/declarative
paradigms.

It's a super cool creative branch of prog research, much of it involving live
programming, funky editors/IDEs (Ixi Lang is the macOS rich text editor, where
on certain key combos its content is piped and the colours of the editor
changed live -- bit of a hack and super cool).

Check some out --
[https://www.youtube.com/watch?v=uAq4BAbvRS4](https://www.youtube.com/watch?v=uAq4BAbvRS4)

------
scotchio
Ken Wheeler makes many cool things:
[http://kenwheeler.github.io/](http://kenwheeler.github.io/)

~~~
graedus
Indeed, I use slick regularly. Thanks Ken!

------
joshontheweb
React is actually really ideal for web audio components. The web audio api is
quite easy to use for the most part. The hard part tends to be building usable
ui on top of it. I've tried in the past to bundle up modular audio components
in a way that they can be used in a package manager. It is hard to do well
since you also need css and html to go along with the js. With react, all that
stuff is already together in one modular piece that is easy to install in your
audio chain.

I've worked on building some audio stuff before using backbone. I might
restart with React. In the very least, I will try and implement the redux
pattern.

My pet project: [http://robotaudio.com/](http://robotaudio.com/)

more full featured synthesizer:
[https://github.com/joshontheweb/synth](https://github.com/joshontheweb/synth)

Edit: Looks like the layout is bonkered for some reason. It normally looks
better :D

~~~
david-given
That's really cool!

How much of the audio processing is software DSP in Javascript, and how much
is wiring together API components?

~~~
joshontheweb
Ideally none of it. In this app I don't believe that I used any
scriptProcessorNodes. I can't remember though. The general idea is that you
are connecting nodes into an audio grid but all of the dsp is happening
natively. You can process the audio manually in js but it isn't as fast and is
generally frowned upon. I believe that they are deprecating the
scriptProcessorNodes and providing a way for you to define dspin js but have
it run on the system level.

------
superice
That's pretty badass.

Does someone know what the name is of the song used in the video? It sounds
familiar, but I can't come up with the name.

~~~
troncheadle
DMX - X Gon' Give It To Ya

~~~
dacohenii
maybe this version could be called "JSX Gon' Give It To Ya"

~~~
thekenwheeler
lol

------
wturner
I can relate to the author of this article. I taught myself JavaScript in
parallel with the Web Audio API around 2012.

Warning, shameless plug: Since there are no books that teach sound artists how
to program using JavaScript I decided to write one based on the process I went
through.

It is available for pre order if anyone is interested:

[https://www.amazon.com/JavaScript-Sound-Artists-Learn-
Audio/...](https://www.amazon.com/JavaScript-Sound-Artists-Learn-
Audio/dp/113896154X)

~~~
robertnealan
As someone currently using (aka fighting) the web audio API, there's
definitely a market for better, clearer information out there, but I'm curious
how successful targeting a such a niche market has been?

~~~
wturner
The book I wrote is a "how to program" book that uses JavaScript coupled with
the Web Audio API as a tool to appeal to sound artists. It is not a book to
teach those who already know how to program the Web Audio API. When I've gone
on Amazon to look at beginner programming books I've found that most "themed"
books are directed to those who want to learn how to build websites, mobile
apps or games - but none are directed to DJ's, electronic musicians, sound
artists etc. I wrote a book that does just that, but as it stands I have no
idea if it will sell.

------
tomphoolery
I'm a huge fan of this kind of programming! While not using the Web Audio API,
I built a DSL in Ruby that allows you to sequence an analog synth (or anything
that speaks MIDI):
[https://github.com/tubbo/mass](https://github.com/tubbo/mass)

I'm also working on a synth that models a Moog Voyager called "Worf: Son of
Moog".

------
imaginology
I'm interested in this and I have bookmarked it to try out some time.

Maybe in the not-too-distant future the days of standalone audio software will
be gone and everything will be run in a web browser. This would solve all the
piracy problems, no need to update ever, and no compatibility issues.

I never tried the hardware MPCs, but I recently splashed out on an MPC Touch
and I'm having a great time with it.

------
6stringmerc
Clever and cool to see such things in progress. Reminds me a bit of the Garage
Band "Drummer" utility that I've been really impressed by. It could be the
sample library used in the example but I would probably characterize the
beat/output as more "MIDI Throwback" than dope. Slick and worth checking out
for sure.

~~~
thekenwheeler
Its a work in progress. Right now the synths are single oscillators with no
filter. When I get those composing with effects, it'll sound more like a real
patch. Also, sample maps for the sampler with note input will make doing
things like wav based piano lines a lot easier.

------
mumphster
Neat I made a grid sequencer synth thing using react and webaudio a few months
back. Let's you edit the adsr envelopes in realtime, sync to a plugged in
launchpad over midi, and supports sharing.

Music is fun!

[http://ell.github.io/grid/](http://ell.github.io/grid/)

~~~
eriknstr
I don't hear any sound using Firefox 48.0 on Fedora 23. The tab has the
loudspeaker icon on it indicating that it probably should be making sound. I
pressed a bunch of the buttons, turning them green and they are changed to
yellow row by row.

Meanwhile, Chromium 51 on Fedora 23 works fine.

~~~
throwanem
Apparently it uses Web MIDI, and apparently Web MIDI only works in Chrome
right now.

Of course, this would all have been a lot easier to root-cause if _somebody_
had documented his stuff a little, but... :)

------
brianzelip
[dat cowbell, hihat, kick, and snare
tho]([https://github.com/FormidableLabs/react-
music/tree/master/pu...](https://github.com/FormidableLabs/react-
music/tree/master/public/samples))

so dope, thanks and nice work.

------
mikesea
I made a visual drum sequencer in React a couple years back as I was learning
React/Flux: [http://mikesea.github.io/beats/](http://mikesea.github.io/beats/)

I'm sure the React code has aged quite a bit, but it was a fun weekend
project.

------
adjohu
This is barely react. It's a container element that does all the heavy lifting
with some children that are used as data stores. Would be cleaner and nicer to
just use JSON and stop pretending it's React.

------
kunle_e
This is cool! I was a music producer before I got into engineering as well. I
was very fond of my MPC, which I still own. It would be fun to make a replica
of one of the early drum PC-based drum machines: Hammerhead

------
akst
It would be awesome to see an interactive playground for this, where people
can just mess around with simple examples. I wonder if it would be simple
enough to have a codepen/jsfiddle of this.

------
stemuk
X gon give it to ya!

------
teen
uhh isn't this just XML with a pointless render cycle since the DOM isn't
mutable?

~~~
exogen
The render cycle is what makes it actually play the sounds and show the EQ.

------
Bahamut
What advantage does this have over a regular DAW (other than being free)?
Wouldn't most artists not be familiar with all of the concepts inherent with
using JSX, and find it easier using a more traditional DAW? (FL Studio,
Cubase, Reason, Logic, etc.)

I get that this is a for fun project it seems, just seems a little low on the
practical scale for an artist.

~~~
coldtea
> _What advantage does this have over a regular DAW (other than being free)?_

Absolutely nothing, and wasn't meant to at all. The purpose of this is is not
to be practical, it's to make some noise with React.

~~~
thekenwheeler
Yeah, its severely limited compared to a DAW in almost every way. But its
super fun to mess around with, and if you like React and the Web Audio API
then its a cool example integration as well. My vision long term is that this
will serve as a set of primitives that can be composed into instrument presets
and have UI hooks so you can build something like a step sequencer UI or a
drum machine.

~~~
mst
Have you ever played Rez on the Dreamcast? I kept wondering if you could do
procedurally generated music from monitoring inputs so that you could listen
to your production system.

I mention this only because I've flailed and failed to even figure out where
to start to do such a thing a few times, and what you're doing looks like
sufficient fun that I'm actually tempted to try again. No promises I ever will
or that I'll remember to tell you if I do, mind ;)

Or, tl;dr: "I don't care if it's powerful, it actually looks like fun and
that's awesome".

~~~
thekenwheeler
i haven't but that sounds dope. you should give it a shot!

