11 ms·

Make Dope Beats with ReactJS

216 points by thekenwheeler 10y ago

superice 10y ago
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 10y ago
  DMX - X Gon' Give It To Ya
  - superice 10y ago
    Ofcourse. From the Deadpool movie, I remember now. Thanks :)
  - dacohenii 10y ago
    maybe this version could be called "JSX Gon' Give It To Ya"
    - thekenwheeler 10y ago
      lol
- deleted 10y ago
  [deleted]
- dtien 10y ago
  Sounds like a variation on one of DMX's hits back in the day
Bahamut 10y ago
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.
- eric_bullington 10y ago
  > 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!
- coldtea 10y ago
  >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 10y ago
    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 10y ago
      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 10y ago
        i haven't but that sounds dope. you should give it a shot!
eric_bullington 10y ago
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/
scotchio 10y ago
Ken Wheeler makes many cool things: http://kenwheeler.github.io/ http://kenwheeler.github.io/
- graedus 10y ago
  Indeed, I use slick regularly. Thanks Ken!
joshontheweb 10y ago
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 10y ago
  That's really cool! How much of the audio processing is software DSP in Javascript, and how much is wiring together API components?
  - joshontheweb 10y ago
    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.
teen 10y ago
uhh isn't this just XML with a pointless render cycle since the DOM isn't mutable?
- jsprogrammer 10y ago
  No, this does not parse as XML. XML does not allow braces around attribute values.
- exogen 10y ago
  The render cycle is what makes it actually play the sounds and show the EQ.
imaginology 10y ago
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.
kevincennis 10y ago
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 10y ago
  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 10y ago
    Hahaha. That's awesome!
- civilian 10y ago
  Have you looked at CSound? http://csound.github.io/documentation.html 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:
- zachrose 10y ago
  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 https://www.npmjs.com/package/barrel
- thekenwheeler 10y ago
  holy mackerel, this lib is dope.
mikesea 10y ago
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.
6stringmerc 10y ago
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 10y ago
  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.
kunle_e 10y ago
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
mumphster 10y ago
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 10y ago
  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 10y ago
    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... :)
stemuk 10y ago
X gon give it to ya!
brianzelip 10y ago
[dat cowbell, hihat, kick, and snare tho](https://github.com/FormidableLabs/react-music/tree/master/public/samples https://github.com/FormidableLabs/react-music/tree/master/pu...) so dope, thanks and nice work.
tomphoolery 10y ago
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".
liamzebedee 10y ago
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
wturner 10y ago
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/dp/113896154X https://www.amazon.com/JavaScript-Sound-Artists-Learn-Audio/...
- robertnealan 10y ago
  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 10y ago
    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.
akst 10y ago
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.
adjohu 10y ago
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.

216 points by thekenwheeler 10y ago

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 10y ago
DMX - X Gon' Give It To Ya
- superice 10y ago
  Ofcourse. From the Deadpool movie, I remember now. Thanks :)
- dacohenii 10y ago
  maybe this version could be called "JSX Gon' Give It To Ya"
  - thekenwheeler 10y ago
    lol
deleted 10y ago
[deleted]
dtien 10y ago
Sounds like a variation on one of DMX's hits back in the day

Bahamut 10y ago

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.

eric_bullington 10y ago
> 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!
coldtea 10y ago
>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 10y ago
  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 10y ago
    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 10y ago
      i haven't but that sounds dope. you should give it a shot!

eric_bullington 10y ago

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/

scotchio 10y ago

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

graedus 10y ago
Indeed, I use slick regularly. Thanks Ken!

joshontheweb 10y ago

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 10y ago
That's really cool! How much of the audio processing is software DSP in Javascript, and how much is wiring together API components?
- joshontheweb 10y ago
  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.

teen 10y ago

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

jsprogrammer 10y ago
No, this does not parse as XML. XML does not allow braces around attribute values.
exogen 10y ago
The render cycle is what makes it actually play the sounds and show the EQ.

imaginology 10y ago

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.

kevincennis 10y ago

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 10y ago
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 10y ago
  Hahaha. That's awesome!
civilian 10y ago
Have you looked at CSound? http://csound.github.io/documentation.html 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:
zachrose 10y ago
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 https://www.npmjs.com/package/barrel
thekenwheeler 10y ago
holy mackerel, this lib is dope.

mikesea 10y ago

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.

6stringmerc 10y ago

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 10y ago
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.

kunle_e 10y ago

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

mumphster 10y ago

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 10y ago
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 10y ago
  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... :)

stemuk 10y ago

X gon give it to ya!

brianzelip 10y ago

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

tomphoolery 10y ago

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

liamzebedee 10y ago

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

wturner 10y ago

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/dp/113896154X https://www.amazon.com/JavaScript-Sound-Artists-Learn-Audio/...

robertnealan 10y ago
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 10y ago
  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.

akst 10y ago

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.

adjohu 10y ago

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.