Project Overview
Browser-based live coding music IDE — CodeMirror editor, visual node graph, 4 audio engines (Strudel, Tone.js, Web Audio, MIDI) and audio-reactive Beatling creatures with dual-brain AI.
The Challenge
Build a professional live coding music environment in the browser that unifies four completely different audio engines under one interface while providing real-time visual feedback through waveform, spectrum, and timeline visualizers.
The Solution
CodeMirror 6 editor with engine-specific syntax highlighting and 500ms debounce, React Flow node graph visualizing audio routing live, 4 audio engines (Strudel, Tone.js, Web Audio, MIDI), Canvas visualizers at 60fps, Beatling ecosystem with 6 creature species and dual-brain AI (neural networks + Conway's Game of Life).
Technologies Used
Results
104 tests across 19 files, multiple persistence backends (IndexedDB, URL sharing, GitHub Gist), audio recording as WebM, full i18n in DE/EN/ES, bidirectional editor ↔ node graph synchronization.