5 ms·

Drum Synthesis in JavaScript

96 points by trypwire 5y ago

fab1an 5y ago
This is cool. If the author is reading this: consider adding some sound files to your post?
- leviathant 5y ago
  Not the author, but here's something I put together about 8 years ago using the web audio API to synthesize analog drum sounds, specifically modeled from the Boss DR-110: https://www.bitrotten.com/dr110/webaudio/ https://www.bitrotten.com/dr110/webaudio/ (See also https://github.com/leviathant/BossDR110/tree/feature/synthesized-sounds https://github.com/leviathant/BossDR110/tree/feature/synthes...)
  - trypwire 5y ago
    Awesome! Thanks for sharing
  - atum47 5y ago
    This looks great, I'm definitely going to try it again when I'm on the desktop
- trypwire 5y ago
  Thanks, and yes I totally agree (OP here). I looked into it for a brief minute: I'm using Ghost Blog to host my articles and I didn't see an easy way to attach the media there directly. The available options seemed to involve embedding a Souncloud link or so, which was enough to deter me at the time. If anyone has ideas for simple audio clip sharing in a Ghost blog, I'd love to hear
  - ipsum2 5y ago
    Record an audio file, convert it to video with a static image, upload to YouTube.
    - kumarharsh 5y ago
      You can embed Codepens with a play button too, which would be cooler as a demo
- deleted 5y ago
  [deleted]
skybrian 5y ago
Neat! I'd like to see something similar for a harmonica. Has it been done?
- alfiedotwtf 5y ago
  Here's someone building a harmonica using FM synthesis: https://m.youtube.com/watch?v=bZ0X_-k9cwo https://m.youtube.com/watch?v=bZ0X_-k9cwo
  - CyberDildonics 5y ago
    That sounds like terrible cheap midi and nothing like a harmonica
alfiedotwtf 5y ago
Awesome stuff! Drum synthesis is one of those rabbit holes where you can obsess for a long time, when instead you can find good enough sounds quickly and should probably just use them! I wonder how many collective hours people have burned in trying to synthesize the 909. Here's one cool video of getting it in Reaktor (https://m.youtube.com/watch?v=A_AWH3SgM84 https://m.youtube.com/watch?v=A_AWH3SgM84)... way cool as a project, but the ROI if everyone did it lol. I've been using all my spare hours the past week spinning on trying to synthesis the snare used in the original Amen Break using Modo Drum to no avail. Like I said... Rabbit hole and I should probably just use samples like everyone else :(
- trypwire 5y ago
  Thanks! Oh yea, such a rabbit hole. I started trying to synthesize a snare as part of this library and blog post and got lost in the weeds so quickly. I ended up skipping it for now but will surely come back to it eventually
  - alfiedotwtf 5y ago
    Time consuming, but fun no doubt :) I've been wondering if machine learning or metaheuristics could be used to get close to an input sound. I've been toying with this idea using MIDI CC with a Rytm.
- scarecrowbob 5y ago
  Really depends on your end goal. I've spent a lot of time synthesizing drums I could have sampled, but I'm a lot faster and more precise at synthesizing whatever I need now. If you just want to make the air shake, a quick way is to turn on the radio :D
  - alfiedotwtf 5y ago
    The kick, I'm fine. Getting the 909 snare on the Rytm is impossible for me, and hitting the original Amen Break kit's snare on MODO Drum is proving difficult (and yes, I've brought the tempo back to the original bpm) but still not close :(
atum47 5y ago
I fiddle with creating sounds in JavaScript a bit, but I just went as far as creating sounds fx for a game (pretty simple ones). I want to try and work with it a little bit more in the future. Great article, definitely inspiring.
TheRealPomax 5y ago
Wait, why is there no "play with it here" github.io page? This shouldn't require anyone to build anything just to play with it? O_o
- trypwire 5y ago
  It's coming ;)
ushakov 5y ago
hey Nick, have you tried Faust? https://faust.grame.fr/ https://faust.grame.fr/
- trypwire 5y ago
  I have indeed! I've used Faust quite a bit over the past few years, and it was very much an inspiration for Elementary. In general I wanted a tool that meant I could think and work on my dsp in the same way that I think and work on my UI, and with the same language even.
valdiorn 5y ago
really cool, but needs demos, or at least audio clips.

96 points by trypwire 5y ago

fab1an 5y ago

This is cool. If the author is reading this: consider adding some sound files to your post?

leviathant 5y ago
Not the author, but here's something I put together about 8 years ago using the web audio API to synthesize analog drum sounds, specifically modeled from the Boss DR-110: https://www.bitrotten.com/dr110/webaudio/ https://www.bitrotten.com/dr110/webaudio/ (See also https://github.com/leviathant/BossDR110/tree/feature/synthesized-sounds https://github.com/leviathant/BossDR110/tree/feature/synthes...)
- trypwire 5y ago
  Awesome! Thanks for sharing
- atum47 5y ago
  This looks great, I'm definitely going to try it again when I'm on the desktop
trypwire 5y ago
Thanks, and yes I totally agree (OP here). I looked into it for a brief minute: I'm using Ghost Blog to host my articles and I didn't see an easy way to attach the media there directly. The available options seemed to involve embedding a Souncloud link or so, which was enough to deter me at the time. If anyone has ideas for simple audio clip sharing in a Ghost blog, I'd love to hear
- ipsum2 5y ago
  Record an audio file, convert it to video with a static image, upload to YouTube.
  - kumarharsh 5y ago
    You can embed Codepens with a play button too, which would be cooler as a demo
deleted 5y ago
[deleted]

skybrian 5y ago

Neat! I'd like to see something similar for a harmonica. Has it been done?

alfiedotwtf 5y ago
Here's someone building a harmonica using FM synthesis: https://m.youtube.com/watch?v=bZ0X_-k9cwo https://m.youtube.com/watch?v=bZ0X_-k9cwo
- CyberDildonics 5y ago
  That sounds like terrible cheap midi and nothing like a harmonica

alfiedotwtf 5y ago

Awesome stuff! Drum synthesis is one of those rabbit holes where you can obsess for a long time, when instead you can find good enough sounds quickly and should probably just use them! I wonder how many collective hours people have burned in trying to synthesize the 909. Here's one cool video of getting it in Reaktor (https://m.youtube.com/watch?v=A_AWH3SgM84 https://m.youtube.com/watch?v=A_AWH3SgM84)... way cool as a project, but the ROI if everyone did it lol. I've been using all my spare hours the past week spinning on trying to synthesis the snare used in the original Amen Break using Modo Drum to no avail. Like I said... Rabbit hole and I should probably just use samples like everyone else :(

trypwire 5y ago
Thanks! Oh yea, such a rabbit hole. I started trying to synthesize a snare as part of this library and blog post and got lost in the weeds so quickly. I ended up skipping it for now but will surely come back to it eventually
- alfiedotwtf 5y ago
  Time consuming, but fun no doubt :) I've been wondering if machine learning or metaheuristics could be used to get close to an input sound. I've been toying with this idea using MIDI CC with a Rytm.
scarecrowbob 5y ago
Really depends on your end goal. I've spent a lot of time synthesizing drums I could have sampled, but I'm a lot faster and more precise at synthesizing whatever I need now. If you just want to make the air shake, a quick way is to turn on the radio :D
- alfiedotwtf 5y ago
  The kick, I'm fine. Getting the 909 snare on the Rytm is impossible for me, and hitting the original Amen Break kit's snare on MODO Drum is proving difficult (and yes, I've brought the tempo back to the original bpm) but still not close :(

atum47 5y ago

I fiddle with creating sounds in JavaScript a bit, but I just went as far as creating sounds fx for a game (pretty simple ones). I want to try and work with it a little bit more in the future. Great article, definitely inspiring.

TheRealPomax 5y ago

Wait, why is there no "play with it here" github.io page? This shouldn't require anyone to build anything just to play with it? O_o

trypwire 5y ago
It's coming ;)

ushakov 5y ago

hey Nick, have you tried Faust? https://faust.grame.fr/ https://faust.grame.fr/

trypwire 5y ago
I have indeed! I've used Faust quite a bit over the past few years, and it was very much an inspiration for Elementary. In general I wanted a tool that meant I could think and work on my dsp in the same way that I think and work on my UI, and with the same language even.

valdiorn 5y ago

really cool, but needs demos, or at least audio clips.