Show HN: I Built a Synthesizer with WASM | Hacker News Reader

Show HN: I Built a Synthesizer with WASM

timdaub.github.io

25 pointstimdaub10 comments

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.

Same on Chrome-based Edge on Windows 10.

Happened to me on edge, then I reloaded and waited a few seconds before clicking anything and it worked.

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

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/

Have fun jamming :)

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 ;)

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

- 2: https://googlechromelabs.github.io/web-audio-samples/audio-w...

- 3: https://github.com/TimDaub/wasm-synth

- 4: https://timdaub.github.io/

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?

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