Browser Synth Experiment
I’ve recently purchased a keytar and I’d like to use my phone as its synthesizer. This interactive post is a testing ground for ideas in coding my own synth.
A synthesizer in the browser is appealing since it gives me the same setup on PC and Android. WebAudio is the tool to use for this, but it has latency issues due to its design choices. In WebAudio, each node in the graph has a 128 sample buffer. This means each layer of processing (gain, reverb, filter, compressor, etc.) adds around 3ms of latency at 44.1khz. That adds up quick! If I use WebAudio’s built in nodes, I’ll need to be very careful to avoid building up latency. Chrome does not actually behave this way! (test below with the layers control)
There’s the option of using an AudioWorklet, but that will involve using WebAssembly for any serious work. To add to the complexity, a custom cross-thread communication scheme will have to be figured out due to the realtime nature of audio processing. Apparently javascript’s message passing mechanism doesn’t cut it due to inefficient synchronization and garbage production. If I go for the worklet approach, it will be a pretty serious project.
This page should automatically detect your MIDI device and play sounds. You’ll need to interact with this page to allow sound to play.
Latency in milliseconds:
Number of layers:
Active notes: no input received
Here's a log because Chrome on Android doesn't give me one.