Modular Synth in the browser
Als Teil des Open Source Audio Meetups (jetzt sonoj.org) präsentiere ich Synflow – ein browsernatives, visuelles Node-Graph-System, dessen Hauptfokus auf der flexiblen Erstellung von maßgeschneiderten Synthesizern und Audio-Flows liegt. Das quelloffene Projekt unter MIT-Lizenz schließt die Lücke zwischen starren Desktop-Anwendungen und rein textbasierten Audio-Sprachen, indem es eine komplett installations- und kompilierungsfreie Eurorack-Simulation direkt in den Webbrowser bringt. Anstatt mühsam Code zu schreiben, können Sounddesigner und Entwickler Synthesizer-Strukturen, Drum Machines oder komplexe Modulationsketten durch das visuelle Verdrahten virtueller Module in Echtzeit patchen und sofort hörbar machen.
Während klassische Software-Synthesizer oft funktionell fest verdrahtet sind und reine DSP-Sprachen eine steile Lernkurve besitzen, bietet Synflow einen zugänglichen, visuellen Mittelweg für schnelles Prototyping und Experimente. Der Vortrag beleuchtet die modulare Architektur der Web-Workstation und zeigt auf, wie aus einfachen Grundbausteinen komplexe, spielbare Synthesizer-Stimmen geformt werden:
- Klangerzeugung & Synthese: Mit aktuell 46 integrierten Open-Source-Nodes lassen sich von klassischen subtraktiven Synthesizern und Orgel-Stimmen bis hin zu perkussiven Synthesen (wie Kicks, Snares und Hi-Hats) jegliche Instrumente frei patchen. Achtung es kommt auch ein Dudelsack!
Die native Audio-Engine: Der C++ Rendering-Thread des Browsers (Web Audio API) verarbeitet Oszillatoren, Filter und Gain-Stufen in einem gerichteten, kreisfreien Graphen, während AudioWorklets maßgeschneiderten DSP-Code in einem separaten High-Priority-Thread ausführen.
Die visuelle UI-Eben: Angetrieben von React 19 und XYFlow (React Flow) v12 bietet das Interface intuitive Drehregler im Eurorack-Stil, Waveform-Vorschauen und ein unkompliziertes Drag-to-Connect-Kabelsystem.
Echtzeit-Steuerung & Logik: Ein minimaler, dependency-freier EventBus synchronisiert MIDI-Keyboards, Clock-Ticks, Sequenzer und Gate-Signale vollkommen verzögerungsfrei über alle Module hinweg.
Erweiterbarkeit für Entwickler: Dank des Hot-Swap-fähigen Audio Graph Managers lassen sich Parameter im laufenden Betrieb ändern. Eigene JavaScript- oder WASM-basierte DSP-Ideen können innerhalb weniger Stunden als völlig neue Synthesizer-Module implementiert werden. Zudem wird gezeigt wie man mit Hilfe von Rust in kürzester Zeit hochperfotmante WASM Bausteine für Audio Streaming erstellen kann.
Neben den softwarearchitektonischen Konzepten wird im Vortrag anhand einer Live-Demo (dem wenn gewünscht kollaborativen Aufbau eines Synthesizers von Null auf) gezeigt, wie moderne Webstandards den Browser in ein mächtiges Werkzeug für die Open-Source-Audio-Community verwandeln. Zudem zeige ich mehrere Patches und Live Demos.