5 ms·

Show HN: Wafxr – dynamic sound FX via WebAudio

27 points by fenomas 6y ago

Minor49er 6y ago
This is really cool. I'm really enjoying the sounds. Each sound effect button also gives you a completely new sound every time. With an interval set, this could pass as a space age drum machine.
- fenomas 6y ago
  Thanks! This GUI front-end is aimed at sound effects, but the underlying library is abstract enough to do general instruments like a drum machine. If I was a bit better at FM synthesis I'd preset buttons for kick drums, snares, harpsichords or what have you...
  - Minor49er 6y ago
    Given the design with the sounds that you have currently, I think you wouldn't have much trouble pulling off any of those if you wanted to
PaulDavisThe1st 6y ago
Maybe compile supercollider to wasm and use that, so that you don't fully reinvent the wheel for synthesis languages (not that it hasn't already been reinvented over and over and over).
- fenomas 6y ago
  This project differs from things like supercollider in that it doesn't generate static files, the sounds you hear are being created dynamically via WebAudio. So for something like a web game, one can use this project to make a sound effect, then copy/paste the code at the bottom of the page to play that sound in the game. (And since the sounds aren't pre-rendered, one can also twiddle the parameters at runtime to add variation to the sound each time it plays.)
  - PaulDavisThe1st 6y ago
    Supercollider (and Chuck and others) do not just render to static files. They can all be used to generate real time audio and be manipulated in real time. They have oodles of synthesis and processing models already present. It is possible to write stuff in these languages that cannot be rendered in realtime by any current computer, but these days you have to work pretty hard to do that. Even on a phone, you'd have a lot of possibilities.
    - fenomas 6y ago
      I meant that playing supercollider sound effects in a web browser would normally mean rendering static files. Naturally I wasn't suggesting it can't play audio in realtime.
      - PaulDavisThe1st 6y ago
        Just cook up a WebAudio backend for SC, and you're done :)
        fenomas 6y ago
        SC is a programming language. A back end for it would mean a compiler, interpreter, GC, etc. This project is a GUI for creating WebAudio node graphs. It does not parse or interpret a programming language; it's not functionally or structurally similar to things like chuck or supercollider.
        PaulDavisThe1st 6y ago
        This is the "playback code" you generate for one of the sounds: // import Gen from 'wasgen' // var gen = new Gen() gen.play([ {type:"n0", gain:{a:0.027,h:0,d:0.013,s:0.45,r:0.054}}, {type:"bandpass", freq:{t:2,p:0.4,q:0.01},Q:0.8}, ], 999, 1, gen.now(), gen.now() + 0.084) This is structurally extremely isomorphic to SC or Chuck etc., and could become more powerful if it was SC with a WebAudio backend for output. I know what the differences are - I've worked in this field for 20 years. I was just trying to give you a gentle smiley faced nudge to jump in on a "better" version of what you've already done in order to Make The World A Better Place. Really :)
- pierrec 6y ago
  Having converted a few things to wasm, I think porting SuperCollider would be considerably more difficult than modulating a bunch of WebAudio oscillator nodes together. Especially since SC is architected as multiple processes communicating with each other. That said, it's not totally crazy either, but it would be a wholly different kind of project.
mmastrac 6y ago
Super cool - this is basically sfxr in native HTML5 audio form.
pierrec 6y ago
I've been keeping notes on all the browser-based audio playgrounds I come across, should probably make a review of them all at some point. In the meantime here's the list: Estuary, Zupiter, Synthesine, Gibber, Slang, Beepbox... (missing some since my notes are disorganized) They range from unfinished toys to epic environments. Also my project AudioMasher is supposed to be the latter. This seems to do one thing well (FM synthesis for effects) which is probably a much better idea!
- fenomas 6y ago
  Thanks for the list! Incidentally for a library that does one thing you might check out wasgen (which TFA is basically a GUI for). In short you give it a description of an arbitrary audio graph and parameters, and it builds all the nodes for you and then disposes them afterwards. So very suitable to build more complicated audio apps on top of.
fenomas 6y ago
Hi HN! In case it's not obvious, the key feature of this project is that it creates sound effects dynamically at runtime, without any samples or static audio files. So if you twiddle the GUI and find a sound you like, you can then copy the code at the bottom to play that sound in whatever other web project. And since it's just code you can add whatever amount of variation to the sound effects without any extra file size. Thanks for having a look!
- regularjack 6y ago
  "it creates sound effects dynamically at runtime, without any samples or static audio files" I think the word you're looking for is synthesis. Very cool stuff by the way, congrats for shipping.
joe_momma 6y ago
This is neat could have used this heavily during my college radio days. Brilliant use of new web technologies.
seg_lol 6y ago
This is wonderful! Very simple, minimal and useful tool! I don't Js, but I am thinking of a fork that has a log of generated sounds. It is fun to mash the button 10 times to see what the sound space is. Or, could let it run and then hit pause when it finds something you like. On a hardware side, I am thinking an ESP32 based device with midi and TTL in that can run the SFX, be able to update the FX over a rest call. Then use those generated FX as the population for a GA, or train a GAN to generate FX. I could see these SFX being something like a font or palette, similar points in a design space. I realized you are the same person behind the Noa [1] Voxel Engine. [1] http://andyhall.github.io/noa-lt/ http://andyhall.github.io/noa-lt/

27 points by fenomas 6y ago

This is really cool. I'm really enjoying the sounds. Each sound effect button also gives you a completely new sound every time. With an interval set, this could pass as a space age drum machine.

fenomas 6y ago
Thanks! This GUI front-end is aimed at sound effects, but the underlying library is abstract enough to do general instruments like a drum machine. If I was a bit better at FM synthesis I'd preset buttons for kick drums, snares, harpsichords or what have you...
- Minor49er 6y ago
  Given the design with the sounds that you have currently, I think you wouldn't have much trouble pulling off any of those if you wanted to

PaulDavisThe1st 6y ago

Maybe compile supercollider to wasm and use that, so that you don't fully reinvent the wheel for synthesis languages (not that it hasn't already been reinvented over and over and over).

fenomas 6y ago
This project differs from things like supercollider in that it doesn't generate static files, the sounds you hear are being created dynamically via WebAudio. So for something like a web game, one can use this project to make a sound effect, then copy/paste the code at the bottom of the page to play that sound in the game. (And since the sounds aren't pre-rendered, one can also twiddle the parameters at runtime to add variation to the sound each time it plays.)
- PaulDavisThe1st 6y ago
  Supercollider (and Chuck and others) do not just render to static files. They can all be used to generate real time audio and be manipulated in real time. They have oodles of synthesis and processing models already present. It is possible to write stuff in these languages that cannot be rendered in realtime by any current computer, but these days you have to work pretty hard to do that. Even on a phone, you'd have a lot of possibilities.
  - fenomas 6y ago
    I meant that playing supercollider sound effects in a web browser would normally mean rendering static files. Naturally I wasn't suggesting it can't play audio in realtime.
    - PaulDavisThe1st 6y ago
      Just cook up a WebAudio backend for SC, and you're done :)
      - fenomas 6y ago
        SC is a programming language. A back end for it would mean a compiler, interpreter, GC, etc. This project is a GUI for creating WebAudio node graphs. It does not parse or interpret a programming language; it's not functionally or structurally similar to things like chuck or supercollider.
        PaulDavisThe1st 6y ago
        This is the "playback code" you generate for one of the sounds: // import Gen from 'wasgen' // var gen = new Gen() gen.play([ {type:"n0", gain:{a:0.027,h:0,d:0.013,s:0.45,r:0.054}}, {type:"bandpass", freq:{t:2,p:0.4,q:0.01},Q:0.8}, ], 999, 1, gen.now(), gen.now() + 0.084) This is structurally extremely isomorphic to SC or Chuck etc., and could become more powerful if it was SC with a WebAudio backend for output. I know what the differences are - I've worked in this field for 20 years. I was just trying to give you a gentle smiley faced nudge to jump in on a "better" version of what you've already done in order to Make The World A Better Place. Really :)
pierrec 6y ago
Having converted a few things to wasm, I think porting SuperCollider would be considerably more difficult than modulating a bunch of WebAudio oscillator nodes together. Especially since SC is architected as multiple processes communicating with each other. That said, it's not totally crazy either, but it would be a wholly different kind of project.

mmastrac 6y ago

Super cool - this is basically sfxr in native HTML5 audio form.

pierrec 6y ago

I've been keeping notes on all the browser-based audio playgrounds I come across, should probably make a review of them all at some point. In the meantime here's the list: Estuary, Zupiter, Synthesine, Gibber, Slang, Beepbox... (missing some since my notes are disorganized) They range from unfinished toys to epic environments. Also my project AudioMasher is supposed to be the latter. This seems to do one thing well (FM synthesis for effects) which is probably a much better idea!

fenomas 6y ago
Thanks for the list! Incidentally for a library that does one thing you might check out wasgen (which TFA is basically a GUI for). In short you give it a description of an arbitrary audio graph and parameters, and it builds all the nodes for you and then disposes them afterwards. So very suitable to build more complicated audio apps on top of.

fenomas 6y ago

Hi HN! In case it's not obvious, the key feature of this project is that it creates sound effects dynamically at runtime, without any samples or static audio files. So if you twiddle the GUI and find a sound you like, you can then copy the code at the bottom to play that sound in whatever other web project. And since it's just code you can add whatever amount of variation to the sound effects without any extra file size. Thanks for having a look!

regularjack 6y ago
"it creates sound effects dynamically at runtime, without any samples or static audio files" I think the word you're looking for is synthesis. Very cool stuff by the way, congrats for shipping.

joe_momma 6y ago

This is neat could have used this heavily during my college radio days. Brilliant use of new web technologies.

seg_lol 6y ago

This is wonderful! Very simple, minimal and useful tool! I don't Js, but I am thinking of a fork that has a log of generated sounds. It is fun to mash the button 10 times to see what the sound space is. Or, could let it run and then hit pause when it finds something you like. On a hardware side, I am thinking an ESP32 based device with midi and TTL in that can run the SFX, be able to update the FX over a rest call. Then use those generated FX as the population for a GA, or train a GAN to generate FX. I could see these SFX being something like a font or palette, similar points in a design space. I realized you are the same person behind the Noa [1] Voxel Engine. [1] http://andyhall.github.io/noa-lt/ http://andyhall.github.io/noa-lt/