4 ms·

Show HN: I Built a Synthesizer with WASM

25 points by timdaub 6y ago

timdaub 6y ago
Hi, OP here. I also wrote a long blog post about my journey building it here: https://timdaub.github.io/2020/02/19/wasm-synth/ https://timdaub.github.io/2020/02/19/wasm-synth/ Have fun jamming :)
- ArtWomb 6y ago
  Uncanny! I was literally just going to post this here in HN ;) timdaub, do you know if it's possible to generate the sound file in a second thread and store the blob file in a shared array buffer? Am planning to run my own experiments, but just wondering if you tried anything like what I am describing to do real time sound synthesis? Thanks ;)
  - timdaub 6y ago
    Hey ArtWomb, glad that you're interested. Actually, I've never done anything with real time sound synthesis myself. To your question: Recording audio or store a blob file. WASM-Synth continuously calls the audio generation code within the AudioWorklet [1]. To make it simple, you could just send this `sample` each time to the main process and store it there somehow. There's many examples how to send data between the AudioWorklet and the main thread [2]. WASM-Synth is open source [3]. I'd be happy to merge a PR that integrated a "recording" functionality! Hit me up on GH or email. You find it on my website [4]. - 1: https://github.com/TimDaub/wasm-synth/blob/master/src/js/worklets/synth.js#L42 https://github.com/TimDaub/wasm-synth/blob/master/src/js/wor... - 2: https://googlechromelabs.github.io/web-audio-samples/audio-worklet/ https://googlechromelabs.github.io/web-audio-samples/audio-w... - 3: https://github.com/TimDaub/wasm-synth https://github.com/TimDaub/wasm-synth - 4: https://timdaub.github.io/ https://timdaub.github.io/
- FraKtus 6y ago
  It does not work for me with Safari 13, no sound. Works fine with Chrome. This is nice! Can you explain how you implemented the interface?
  - timdaub 6y ago
    Hey, actually the interface is built with React. The piano itself is a third-party component from someone on GitHub. The knobs and the ADSR graph are react components too that I released as their own packages - https://github.com/TimDaub/react-simple-knob https://github.com/TimDaub/react-simple-knob - https://github.com/TimDaub/react-envelope-graph https://github.com/TimDaub/react-envelope-graph A specialty of those is that they're interactive SVGs. Especially for building the ADSR graph, I found working with an approximate function that "drew itself" much easier than working with the canvas or webGL. But I have plans to build a wave table (similar to the one in Ableton Live) in webGL.
cbarrick 6y ago
This is very broken on Firefox on my machine. Everytime I click a key, it loads up a blank white page with a constant tone in the background. I have to refresh to fix it up.
- T-A 6y ago
  Same on Chrome-based Edge on Windows 10.
  - buzzerbetrayed 6y ago
    Happened to me on edge, then I reloaded and waited a few seconds before clicking anything and it worked.
    - timdaub 6y ago
      Ah yes, I know this problem. The problem is that many browsers want the audio context to be loaded upon user interaction (e.g. a key press). What causes the bug is that I essentially create the audio context and load a bunch of code. There's an issue that's open for a while now: https://github.com/TimDaub/wasm-synth/issues/4 https://github.com/TimDaub/wasm-synth/issues/4
seesawtron 6y ago
You might also like this: https://musiclab.chromeexperiments.com/Song-Maker/song/5208554320429056 https://musiclab.chromeexperiments.com/Song-Maker/song/52085...

25 points by timdaub 6y ago

Hi, OP here. I also wrote a long blog post about my journey building it here: https://timdaub.github.io/2020/02/19/wasm-synth/ https://timdaub.github.io/2020/02/19/wasm-synth/ Have fun jamming :)

ArtWomb 6y ago
Uncanny! I was literally just going to post this here in HN ;) timdaub, do you know if it's possible to generate the sound file in a second thread and store the blob file in a shared array buffer? Am planning to run my own experiments, but just wondering if you tried anything like what I am describing to do real time sound synthesis? Thanks ;)
- timdaub 6y ago
  Hey ArtWomb, glad that you're interested. Actually, I've never done anything with real time sound synthesis myself. To your question: Recording audio or store a blob file. WASM-Synth continuously calls the audio generation code within the AudioWorklet [1]. To make it simple, you could just send this `sample` each time to the main process and store it there somehow. There's many examples how to send data between the AudioWorklet and the main thread [2]. WASM-Synth is open source [3]. I'd be happy to merge a PR that integrated a "recording" functionality! Hit me up on GH or email. You find it on my website [4]. - 1: https://github.com/TimDaub/wasm-synth/blob/master/src/js/worklets/synth.js#L42 https://github.com/TimDaub/wasm-synth/blob/master/src/js/wor... - 2: https://googlechromelabs.github.io/web-audio-samples/audio-worklet/ https://googlechromelabs.github.io/web-audio-samples/audio-w... - 3: https://github.com/TimDaub/wasm-synth https://github.com/TimDaub/wasm-synth - 4: https://timdaub.github.io/ https://timdaub.github.io/
FraKtus 6y ago
It does not work for me with Safari 13, no sound. Works fine with Chrome. This is nice! Can you explain how you implemented the interface?
- timdaub 6y ago
  Hey, actually the interface is built with React. The piano itself is a third-party component from someone on GitHub. The knobs and the ADSR graph are react components too that I released as their own packages - https://github.com/TimDaub/react-simple-knob https://github.com/TimDaub/react-simple-knob - https://github.com/TimDaub/react-envelope-graph https://github.com/TimDaub/react-envelope-graph A specialty of those is that they're interactive SVGs. Especially for building the ADSR graph, I found working with an approximate function that "drew itself" much easier than working with the canvas or webGL. But I have plans to build a wave table (similar to the one in Ableton Live) in webGL.

cbarrick 6y ago

This is very broken on Firefox on my machine. Everytime I click a key, it loads up a blank white page with a constant tone in the background. I have to refresh to fix it up.

T-A 6y ago
Same on Chrome-based Edge on Windows 10.
- buzzerbetrayed 6y ago
  Happened to me on edge, then I reloaded and waited a few seconds before clicking anything and it worked.
  - timdaub 6y ago
    Ah yes, I know this problem. The problem is that many browsers want the audio context to be loaded upon user interaction (e.g. a key press). What causes the bug is that I essentially create the audio context and load a bunch of code. There's an issue that's open for a while now: https://github.com/TimDaub/wasm-synth/issues/4 https://github.com/TimDaub/wasm-synth/issues/4

seesawtron 6y ago

You might also like this: https://musiclab.chromeexperiments.com/Song-Maker/song/5208554320429056 https://musiclab.chromeexperiments.com/Song-Maker/song/52085...