Make Dope Beats with ReactJS | Hacker News Reader

Make Dope Beats with ReactJS

formidable.com

216 pointsthekenwheeler45 comments

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/

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

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

Hahaha. That's awesome!

Have you looked at CSound? http://csound.github.io/documentation.html I'm really into the idea of having a standard for music scoring, and not just for music scoring, but also for like... identifying the instrument.

I wish that the music tools that existed accept CSound (or any standard) more. Your JS array is solid though :thumbsup-emoji:

Oh this is nice. I'll take a second to also shamelessly plug my library Barrel, which is like these except it's for sequencing anything you can do with a JavaScript function, not specifically music.

https://www.npmjs.com/package/barrel

holy mackerel, this lib is dope.

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

Ken Wheeler makes many cool things: http://kenwheeler.github.io/

Indeed, I use slick regularly. Thanks Ken!

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/

more full featured synthesizer: https://github.com/joshontheweb/synth

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

That's really cool!

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

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.

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.

DMX - X Gon' Give It To Ya

Ofcourse. From the Deadpool movie, I remember now. Thanks :)

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

lol

Sounds like a variation on one of DMX's hits back in the day

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

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?

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.

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

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

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.

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.

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.

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/

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.

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... :)

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

so dope, thanks and nice work.

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

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

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.

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

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.

X gon give it to ya!

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

No, this does not parse as XML. XML does not allow braces around attribute values.

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

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.

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

It's a very new project, I believe. Seeing what this group has accomplished with the Victory React dataviz library, I wouldn't discount it yet. I'll be very interested to see what they put together. Or it may just remain a fun side project. Either way, cool to play with!

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

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.

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

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

If you can script it with JS, that can be a huge advantage. Lots of interesting compositional ideas become available when you have a Turing-complete scripting interface, ideas that are extremely tedious to execute in a DAW.

Having this all be accessible over the web is another advantage; not having to pay for and/or download a big heavy DAW to develop, collaborate on, or interact with your beats opens up a lot of possibilities.

It will be a long time before something like this can compete with a DAW in terms of polish and breadth of sounds, but it still offers a lot of interesting musical ideas to explore.

Reply on news.ycombinator.com