quick start

main idea synopsis

The Subhardhorde is a browser-based reimagining of the Subharchord, a rare East German synthesizer from the 1960s. Unlike traditional synths that stack overtones, it generates subharmonics (undertones) via frequency division, creating a distinct, melancholic timbre. This project translates that analog logic into a modern, touch-first interface using the Web Audio API. It features a unique “MEL” filter bank based on human pitch perception, formant filters for vowel shaping, and a rhythmic chopper, all controlled via a unified XY pad and keyboard shortcuts for expressive, real-time performance.

shortcuts and interface

Performance Keys:

Z … M: Trigger notes (C Minor scale).

Control Zones (Hold key + Move Mouse/Touch):

S: Subharmonics (X: Ratio 1-16, Y: Mix).
D: MEL Filter (X: Center Shift, Y: Gain/Q).
F: Formant (X: Vowel A-U, Y: Mix).
G: Modulation (X: Rate, Y: Depth).
H: Rhythm (X: Chop Rate, Y: Depth).
J: Env (X: Attack, Y: Release).
K: PWM (X: Duty 5–95%, Y: Depth around duty).
L: Spread/Detune (X: 0–60 cents spread, Y: distribution).

Hold Toggle:

A: Toggle hold/sustain for the on-screen keyboard and Z–M note keys.

MEL Filter Bank:

Q … ': Toggle individual filter bands on/off.
Multislider: Drag across the top bars to shape the filter curve.

Presets:

1 - 9: Load Preset.
Shift + 1 - 9: Save Preset.

Interpolation / inertia:

Shift + A: Cycle interpolation/inertia ladder (0, 200–2000 ms, 4s, 8s, 16s, 32s, 64s). Interp is not stored in presets.

historical context

The Subharchord (1960s, GDR, Ernst Schreiber) generated sound using a Master Oscillator and a series of Frequency Dividers to create “Subharmonics” (Undertones). Unlike standard synthesis (Overtones), this creates a unique harmonic series going “downwards”.

Key Components modeled here:

Master Oscillator (Sawtooth/Square)
Subharmonic Divider (Simulated via separate Osc)
Mel Filter (Bandpass following Mel scale perception)
Formant Filter (Vowel shaping)
Chorus/Vibrato (Chormodulation)

DIY UX innovations

This interface supersedes physical limitations through several strategies rooted in Human-Computer Interaction (HCI) theory:

Quasi-Modes (Sandwich Keys): Instead of permanent mode switches which lead to mode errors, the interface uses “spring-loaded” modes (holding D, F, etc.). This aligns with Jef Raskin’s interface theory, allowing the user to momentarily shift the function of the XY pad (the primary input device) without losing context.
Direct Manipulation & Gestural Input: The MEL filter bank utilizes a “multislider” paradigm where users can “draw” the EQ curve. This affords a level of spectral shaping speed impossible with physical faders. The XY pad consolidates multiple parameters (e.g., Vowel and Mix) into a single gestural space, increasing the bandwidth of information transfer from human to machine.
Visual Feedback Loops: The integration of a real-time spectrogram as the background layer provides immediate feedback. This bridges the gap between the abstract “MEL” scale (a psychoacoustic scale of pitch) and the physical reality of the sound, enhancing the learnability of the synthesis engine.

technological aspects

Audio Engine: Built on the Web Audio API, utilizing a graph of OscillatorNode, BiquadFilterNode (for Formants and MEL bands), and GainNodes. The subharmonic generation simulates the original divider circuits using mathematical frequency division logic.
Pulse Width Modulation (PWM): Implemented as a sawtooth plus DC offset feeding a sign waveshaper, giving a classic pulse without custom PeriodicWaves. Duty cycle is clamped to 5–95% to avoid clicks/DC. Depth modulates around the current duty and is rate-locked to the main modulation rate. Smoothing via setTargetAtTime prevents zippering, keeping the Berlin Subharchord character intact.
Spread/Detune (SD): The subharmonic voice is now a three-pulse bank: a base pulse plus ± detuned pulses. Spread ranges 0–60 cents; distribution crossfades energy between the center and side pulses (outer-only vs even). Frequencies remain integer dividers; only cents detune is applied, preserving the subharmonic identity while adding shimmer/chorus.
Design Pattern: The application follows a reactive component pattern (Astro). The UI rendering is decoupled from the audio thread, using a requestAnimationFrame loop to draw the Canvas UI (pointers, spectrogram) for 60fps performance without blocking audio processing.
Aesthetics: The interface adopts a “Lab-Industrial” dark mode, using high-contrast neon accents against a stark black background, reminiscent of oscilloscope displays and early computing terminals (Courier New font), emphasizing function over skeuomorphic decoration.
Persistence: localStorage is employed to persist the 9 user presets, allowing the instrument to retain state between sessions, a crucial feature for serious musical tools often missing in web toys.

future steps

The future of online synthesis lies in collaborative telepresence. Using WebRTC, multiple users could manipulate the same Subharchord instance—one controlling the subharmonics while another shapes the MEL filter. Furthermore, the integration of Web MIDI would allow this engine to be played by physical keyboards, turning the browser into a legitimate sound module for DAW production. We also envision porting the DSP to AudioWorklets and WebAssembly (WASM) to allow for more complex, circuit-accurate modeling of the original germanium transistor distortions.

references

@article{schneider2018subharchord,
  title={The Subharchord: A Sound Generator from the GDR},
  author={Schneider, Albrecht and v. Ruschkowski, E.},
  journal={Organised Sound},
  year={2018},
  publisher={Cambridge University Press}
}

@book{raskin2000humane,
  title={The Humane Interface: New Directions for Designing Interactive Systems},
  author={Raskin, Jef},
  year={2000},
  publisher={Addison-Wesley Professional}
}

@misc{webaudioapi,
  title={Web Audio API},
  author={W3C},
  year={2021},
  url={https://www.w3.org/TR/webaudio/}
}

@patent{schreiber1960subharchord,
  title={Subharchord II Funktionsbeschreibung},
  author={Schreiber, Ernst},
  year={1960},
  note={RFZ Berlin}
}