Live Music Coder: Musik-IDE im Browser und als Desktop-App

Wie es angefangen hat: Ein Instagram-Video

Ich kannte Live Music Coding nicht. Überhaupt nicht.

Dann war ich eines Abends am Doom-Scrolling auf Instagram — und plötzlich blieb ich bei einem Video hängen. Eine Frau saß vor ihrem Laptop, schrieb Code live auf der Bühne, und erzählte dabei Geschichten. Aus dem Code entstand in Echtzeit Musik. Das Publikum lauschte. Ich war fasziniert.

Ich hatte keine Ahnung, was das war. Aber ich wollte es sofort selbst machen.

Die Recherche führte mich zu strudel.cc — dem Browser-Tool, das sie vermutlich benutzt hatte. Ich spielte eine Weile damit herum. Die Mechanik war beeindruckend, aber die Oberfläche? Nein. Zu karg, zu unstrukturiert — nichts, womit ich wirklich arbeiten wollte.

Also machte ich das, was ich immer mache: Ich baute mein eigenes.

Projektverlauf

Das Kernproblem: Vier völlig unterschiedliche APIs

Das größte technische Problem war nicht eine einzelne Engine — sondern vier zu vereinen, die komplett unterschiedlich funktionieren:

Die Lösung: Ein Engine-Abstraktionslayer, der für jede Engine einen eigenen Executor mit einheitlicher Start/Stop/Error-API hat — aber vollständig unterschiedliche Code-Parsing-Logik.

Der Editor: CodeMirror 6 mit Engine-Detection

Der Editor verwendet CodeMirror 6 mit einem benutzerdefinierten Extension-System:

// Engine-spezifisches Syntax-Highlighting
function buildEditorExtensions(engine: AudioEngine) {
  const extensions = [
    darkTheme,
    lineNumbers(),
    autocompletion(),
    debounce(500, (code) => executeCode(code, engine)),
  ];

  switch (engine) {
    case 'strudel':
      return [...extensions, strudelHighlighting, strudelAutoComplete];
    case 'tone':
      return [...extensions, toneJsHighlighting, toneJsSnippets];
    case 'webaudio':
      return [...extensions, webAudioHighlighting];
    case 'midi':
      return [...extensions, midiHighlighting, midiChannelLens];
  }
}

Der 500ms-Debounce ist entscheidend: Zu aggressiv bedeutet ständige Neuauswertung mitten im Tippen. Zu träge bedeutet keine “lebendige” Reaktion.

Der Node-Graph: React Flow als Audio-Routing-Visualizer

Das ungewöhnlichste Feature ist der Node-Graph — er zeigt nicht, was der Nutzer manuell erstellt hat, sondern was der Code tatsächlich produziert.

Das Ergebnis: Der Graph aktualisiert sich bidirektional. Code ändert sich, Graph updated. Im Graph einen Parameter ziehen, Code updated.

7 Visualizer mit Canvas 2D bei 60fps

Mittlerweile sind es sieben spezialisierte Visualizer — von den ursprünglichen drei auf sieben erweitert über mehrere Entwicklungs-Sprints:

Das Performance-Geheimnis: Alle Visualizer teilen einen einzigen AnalyserNode — kein mehrfaches Tap des Audiostreams, keine Latenz-Unterschiede zwischen den Darstellungen.

Die Beatlings: Kreaturen die Musik “hören”

Das spielerischste Feature sind die Beatlings — 6 Kreaturenarten, die auf die Musik reagieren. Ihr Dual-Brain-System kombiniert ein neuronales Netzwerk (reagiert auf Frequenz-Features) mit Conway’s Game of Life (Evolutionsmuster). Spielt man laute Bass-Beats, werden Crasher-Beatlings aktiv. Sanfte Melodien lassen Drifter auftauchen.

Persistenz: Drei Backends

Nach dem Launch: 7 Entwicklungs-Sprints

Nach dem initialen 12-Wochen-Sprint ging die Entwicklung weiter — mit sieben Feature-Sprints, die das Projekt von einem Proof-of-Concept zu einem vollwertigen Creative Tool transformiert haben:

Die Sessions-Sammlung: 43 kuratierte Stücke

Eine der größten Neuerungen ist die Sessions Library — eine Sammlung von 43 AI-komponierten Musikstücken, die als Lern- und Inspirationsressource dienen:

Desktop-App: Electron für macOS

Live Music Coder ist nicht mehr nur ein Browser-Tool — seit v1.0.2 gibt es eine native Electron Desktop-App:

• macOS Intel + Apple Silicon (.dmg) — Code-signiert und notarisiert
• Auto-Updater — neue Versionen werden automatisch erkannt und installiert
• .lmc Dateiformat — eigenes Projektformat mit Dateiverknüpfung
• Windows + Linux — in Planung

Erweiterte Eingabe: Gamepad und MIDI Input

Seit Sprint 3 unterstützt Live Music Coder zwei neue Eingabemethoden:

Qualität: Tests und Stabilität

104

in 19 Testdateien

Getestet werden: Engine-Executor-Logik, Code-Parsing pro Engine, Graph-Derivation aus AST, Kreatur-Spawn-Algorithmen und Persistenz-Layer.

Die Überraschung am Ende: Die Lizenz

Ich habe einen Fehler gemacht, den ich anderen ersparen möchte: Ich habe die Lizenz nicht gelesen, bevor ich angefangen habe.

Als das Projekt fertig war, las ich endlich die Lizenz von Strudel. Was ich fand, war die GNU Affero General Public License (AGPL-3.0) — eine Copyleft-Lizenz, die verlangt, dass jedes Softwareprodukt, das auf Strudel aufbaut, ebenfalls unter der AGPL-3.0 veröffentlicht werden muss.

Nach einigem Nachdenken habe ich beschlossen, das Richtige zu tun: Live Music Coder wird unter der AGPL-3.0 veröffentlicht. Strudel ist ein beeindruckendes Open-Source-Projekt, und die Community verdient diese Gegenseitigkeit.

Häufige Fragen

Frequently Asked Questions

Welche Audio-Engine eignet sich für Einsteiger?

Braucht man Musik-Kenntnisse?

Warum vier Engines statt einer?

Wie funktioniert die bidirektionale Graph-Sync?

Kann ich Live Music Coder offline nutzen?

Was ist mit den Beatlings passiert?

Das Projekt ist live unter live-music-coder.pro und als Open-Source-Projekt auf GitHub verfügbar. Die Desktop-App für macOS steht als Download bereit. Pull Requests willkommen.