Simple Web Synth Architecture

The Simple Web Synth is a software synthesizer that uses the common technique of subtractive synthesis to produce sound using two oscillators, a noise source, and a filter. The volume contour and filter are controlled by envelopes. Detailed notes follow.

All of these are basic building blocks you see everywhere in synthesizers, hence the name "Simple". This synthesizer is not intended to be particularly interesting. It's purpose is to run in modern web browsers without plugins, which empowers me to create interactive audio features on this web site. This is possible with WebAssembly and the Web Audio API, using RNBO to generate the WebAssembly code (alternately: in theory, I could have coded it in C++ and compiled the C++ to WebAssembly using Emscripten).

The diagram below shows the signal flow of the Simple Web Synth. The diagram is generated with Mermaid.js.

Notes:

"PWM" is pulse width modulation of the pulse wave, including frequency and amount controls for a built-in LFO per oscillator.
The "level" and "amplitude envelope" boxes represent amplifiers.
- The amplifiers that say "level" are manually controlled by "level" sliders in the UI.
- The amplifier that says "amplitude envelope" is controlled by an ADSR (attack, decay, sustain, release) envelope generator.
The filter's envelope, which controls frequency, also uses an ADSR envelope generator.
- The filter envelope amount parameter is bipolar, so the filter envelope can be inverted.
The ADSR envelope generators have controls to toggle velocity sensitivity (scale the max amplitude by the MIDI note's velocity) and shape controls (linear or exponential)
Near the end of the signal chain, saturation (a type of distortion) allows for amplifying the signal to the point it would easily clip, and then a non-linear transfer curve is applied using the hyperbolic tangent function to simulate analog saturation (a common technique in DSP). When saturation is set to zero, the tanh() function is bypassed.
A limiter at the end of the signal chain protects and large spikes in volume, which could happen with some settings such as high resonance on the filter.
Simple Synth is polyphonic and can play multiple notes at the same time. Effectively, there are multiple copies of this entire synthesizer architecture, and each copy handles one note.

flowchart TD

Oscillator1 ----> MIX
Oscillator2 ---> MIX
Noise --> MIX
MIX(unity mixer) --> AMP
AMP(amplitude envelope) --> Filter
Filter --> MA
MA(main level) --> S
S(saturator) --> L
L(limiter)

subgraph Oscillator1[Oscillator 1]
  O1_SIN(sine
        wave) --> O1_SEL
  O1_TRI(triangle
         wave) --> O1_SEL
  O1_SAW(saw
         wave) --> O1_SEL
  O1_PUL(pulse
         wave) --> O1_SEL
  O1_PWM(PWM) --> O1_PUL
  O1_SEL{wave
         shape
         selector} --> O1_AMP
  O1_AMP(level)
end

subgraph Oscillator2[Oscillator 2]
  O2_SIN(sine
  wave) --> O2_SEL
  O2_TRI(triangle
  wave) --> O2_SEL
  O2_SAW(saw
  wave) --> O2_SEL
  O2_PUL(pulse
  wave) --> O2_SEL
  O2_PWM(PWM) --> O2_PUL
  O2_SEL{wave
         shape
         selector} --> O2_AMP
  O2_AMP(level)
end

subgraph Noise[Noise Source]
  WHITE(white
        noise) --> N_SEL
  PINK(pink
       noise) --> N_SEL
  N_SEL{noise
        color
        selector} --> N_AMP(level)
end

subgraph Filter[State Variable Filter]
  none --> F
  LP(lowpass) --> F
  HP(highpass) --> F
  BP(bandpass) --> F
  NOTCH(notch) --> F
  F{filter
    type
    selector}
  FENV(
    filter
    frequency
    envelope) --> LP & HP & BP & NOTCH
end