Live Music Coder IDE with code editor, audio waveform visualizer and visual node graph
Creative CodingAudioReact

Live Music Coder

Browser-basierte Live-Coding-IDE für Musik — CodeMirror-Editor, visueller Node-Graph, 4 Audio-Engines (Strudel, Tone.js, Web Audio, MIDI) und audio-reaktive Beatling-Kreaturen mit Dual-Brain-KI.

Projektübersicht

Browser-basierte Live-Coding-IDE für Musik — CodeMirror-Editor, visueller Node-Graph, 4 Audio-Engines (Strudel, Tone.js, Web Audio, MIDI) und audio-reaktive Beatling-Kreaturen mit Dual-Brain-KI.

Die Herausforderung

Eine professionelle Live-Coding-Umgebung für Musik im Browser entwickeln, die vier völlig unterschiedliche Audio-Engines unter einer einheitlichen Oberfläche vereint und gleichzeitig visuelles Echtzeit-Feedback durch Wellenform-, Spektrum- und Timeline-Visualizer bietet.

Die Lösung

CodeMirror 6 Editor mit engine-spezifischem Syntax-Highlighting und 500ms Debounce, React Flow Node-Graph der Audio-Routing live visualisiert, 4 Audio-Engines (Strudel, Tone.js, Web Audio, MIDI), Canvas-Visualizer bei 60fps, Beatling-Ökosystem mit 6 Kreaturenarten und Dual-Brain-KI (neuronale Netze + Conway's Game of Life).

Eingesetzte Technologien

React 19 TypeScript Vite CodeMirror 6 React Flow Strudel 1.3 Tone.js 15 Web Audio API WebMidi.js Canvas 2D Zustand Tailwind CSS 4

Ergebnisse

104 Tests in 19 Dateien, mehrere Persistenz-Backends (IndexedDB, URL-Sharing, GitHub Gist), Audio-Aufnahme als WebM, vollständige i18n in DE/EN/ES, bidirektionale Editor-↔-Node-Graph-Synchronisation.