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

Live Music Coder

IDE de codificación musical en vivo en el navegador — editor CodeMirror, grafo de nodos visual, 4 motores de audio (Strudel, Tone.js, Web Audio, MIDI) y criaturas Beatling reactivas al audio con IA de doble cerebro.

Resumen del proyecto

IDE de codificación musical en vivo en el navegador — editor CodeMirror, grafo de nodos visual, 4 motores de audio (Strudel, Tone.js, Web Audio, MIDI) y criaturas Beatling reactivas al audio con IA de doble cerebro.

El desafío

Construir un entorno profesional de codificación musical en vivo en el navegador que unifique cuatro motores de audio completamente diferentes bajo una interfaz mientras proporciona retroalimentación visual en tiempo real.

La solución

Editor CodeMirror 6 con resaltado de sintaxis por motor y debounce de 500ms, grafo de nodos React Flow visualizando el ruteo de audio en vivo, 4 motores de audio, visualizadores Canvas a 60fps, ecosistema Beatling con 6 especies de criaturas y IA de doble cerebro.

Tecnologías utilizadas

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

Resultados

104 pruebas en 19 archivos, múltiples backends de persistencia (IndexedDB, URL sharing, GitHub Gist), grabación de audio como WebM, i18n completo en DE/EN/ES, sincronización bidireccional editor ↔ grafo de nodos.