Live Music Coder: IDE de Música en el Navegador y como App de Escritorio
Cómo empezó todo: un video de Instagram
Yo no conocía el live music coding. Para nada.
Una noche estaba haciendo doom scroll en Instagram — y de repente me detuve en un video. Una chica estaba sentada frente a su laptop, escribiendo código en vivo en el escenario, y mientras lo hacía, iba contando historias. De ese código surgía música en tiempo real. El público escuchaba. Yo estaba fascinado.
No tenía idea de qué era aquello. Pero de inmediato quería hacerlo yo también.
La investigación me llevó a strudel.cc — la herramienta en el navegador que probablemente ella usaba. Jugué con ella un rato. La mecánica era impresionante, pero la interfaz? No. Demasiado básica, demasiado desestructurada — nada con lo que quisiera trabajar de verdad.
Así que hice lo que siempre hago: construí la mía.
Línea de tiempo del proyecto
Explorado el panorama del live coding (Strudel, Sonic Pi, TidalCycles). Diseñada la capa de abstracción de motores. Evaluado CodeMirror 6 como editor.
Integrado CodeMirror 6 con sistema de extensiones personalizado. Conectado Strudel como primera fuente de audio. Debounce de 500ms para evaluación en vivo.
Integrados Tone.js, Web Audio API y Salida MIDI como motores adicionales. API unificada Start/Stop/Error para los cuatro motores.
React Flow como visualizador bidireccional de enrutamiento de audio. Tres visualizadores Canvas a 60fps (Waveform, Spectrum, Pattern Timeline) compartiendo un solo AnalyserNode.
Criaturas reactivas al audio con sistema de doble cerebro (Red Neuronal + Conway). Autosave IndexedDB, URL sharing con lz-string, integración con GitHub Gist.
104 pruebas en 19 archivos. Traducción completa DE/EN/ES con i18next. Grabación de audio basada en MediaRecorder. Lanzamiento en live-music-coder.pro.
El problema central: cuatro APIs completamente diferentes
El mayor desafío técnico no era un solo motor — era unificar cuatro que funcionan de manera completamente diferente:
Lenguaje basado en patrones inspirado en TidalCycles. Usa mini-notación para ritmos: note("c3 e3 g3").slow(2).
Sintetizadores y efectos con reproducción programada. Ideal para estructuras melódicas y sonidos sintetizador clásicos.
Acceso directo al procesamiento de audio del navegador. Control máximo para sonidos experimentales y cadenas de efectos.
Envía señales MIDI a sintetizadores externos y DAWs vía WebMidi.js. Conecta equipos digitales y analógicos.
La solución: una capa de abstracción de motor con una API unificada Start/Stop/Error — pero lógica de análisis de código completamente diferente para cada motor.
El editor: CodeMirror 6 con detección de motor
El editor usa CodeMirror 6 con un sistema de extensiones personalizado. El debounce de 500ms es crítico: demasiado agresivo significa re-evaluación constante al escribir. Demasiado lento significa sin sensación “viva”.
El grafo de nodos: React Flow como visualizador de enrutamiento de audio
La característica más inusual es el grafo de nodos — no muestra lo que el usuario construyó manualmente, sino lo que el código realmente produce. El grafo se actualiza bidireccionalmente: cambiar código y el grafo se actualiza. Arrastrar un parámetro en el grafo y el código se actualiza.
Visualizadores a 60fps con Canvas 2D
Siete visualizadores especializados — expandidos de los tres originales a través de múltiples sprints de desarrollo:
Visualización de osciloscopio de la señal de audio en tiempo real. AnalyserNode.getTimeDomainData() con requestAnimationFrame.
Análisis de frecuencia basado en FFT. 512 bins visualizados como barras — de 20Hz a 20kHz.
Visualizador específico de Strudel que muestra slots de patrones activos, loops y eventos de timing.
Visualización estilo DAW con línea de tiempo desplazable, colores de velocidad y etiquetas de notas. Widgets de slider para parámetros.
Cuadrícula visual de patrones — muestra beats activos como puntos en una cuadrícula. Ideal para visión rítmica.
Espiral de notas rotatoria — tonos dispuestos en un círculo, ideal para relaciones armónicas.
Visualización de rueda de frecuencia — muestra frecuencias activas como segmentos en una rueda rotatoria.
El secreto del rendimiento: todos los visualizadores comparten un único AnalyserNode — sin múltiples tomas del stream, sin diferencias de latencia.
Los Beatlings: criaturas que “escuchan” la música
La característica más lúdica: Beatlings — 6 especies de criaturas que reaccionan a la música. Su cerebro dual combina una red neuronal (reacciona a características de frecuencia) con el Juego de la Vida de Conway (evolución de patrones corporales). Beats de bajo fuertes activan Crasher Beatlings. Melodías suaves hacen emerger Drifters.
Persistencia: tres backends
Auto-guardado cada 30 segundos. Historial completo de sesiones con undo/redo entre sesiones.
Código actual comprimido con lz-string y codificado como parámetro URL. Un enlace comparte el estado exacto del código.
Guardar y cargar Gists vía Octokit. Snippets públicos pueden compartirse con la comunidad.
Después del lanzamiento: 7 sprints de desarrollo
Después del sprint inicial de 12 semanas, el desarrollo continuó — con siete sprints de funcionalidades que transformaron el proyecto de un prototipo a una herramienta creativa completa:
Visualizador Piano Roll estilo DAW con línea de tiempo desplazable, colores de velocidad y widgets de slider interactivos para control de parámetros.
Cuadrícula visual de patrones como nuevo visualizador. Funcionalidad de grabación mejorada con mejor calidad de audio.
Integración de Gamepad API para entrada de controlador. Módulo de entrada MIDI para hardware externo. Atajos solo/mute por motor. Panel de consola para debugging en vivo.
Dos nuevos visualizadores: espiral de notas rotatoria para relaciones armónicas y rueda de frecuencia para frecuencias activas.
Panel de configuración completo con 4 temas, ajuste de tamaño de fuente, modo Vim, modo Zen, números de línea y word wrap. Todo persistido en localStorage.
Integración @strudel/draw para creación visual de patrones. Widgets inline con feedback en tiempo real directamente en el editor.
App nativa macOS (Intel + Apple Silicon) con auto-updater, formato de archivo .lmc y firma de código. Windows y Linux en planificación.
La biblioteca de sesiones: 43 piezas curadas
Una de las mayores novedades es la Biblioteca de Sesiones — una colección de 43 piezas musicales compuestas por IA que sirven como recurso de aprendizaje e inspiración:
Cada sesión tiene múltiples movimientos con tonalidades nombradas, marcas de BPM y notas del compositor.
Ambient, Blues, Deep Work, Dub, Electronic, Lo-Fi, Narrativo, Retro, Techno y Trance.
Ruta dedicada /sessions con filtros y búsqueda. Cada sesión puede abrirse directamente en el editor.
Las piezas demuestran diversas técnicas — desde patrones ambient minimalistas hasta estructuras trance complejas.
App de Escritorio: Electron para macOS
Live Music Coder ya no es solo una herramienta de navegador — desde v1.0.2 existe una app de escritorio Electron nativa:
- macOS Intel + Apple Silicon (.dmg) — firmada y notarizada
- Auto-updater — nuevas versiones se detectan e instalan automáticamente
- Formato .lmc — formato de proyecto propio con asociación de archivos
- Windows + Linux — en planificación
Entrada Extendida: Gamepad y MIDI
Desde el Sprint 3, Live Music Coder soporta dos nuevos métodos de entrada:
Entrada de controlador vía Gamepad API. Ejes y botones pueden mapearse a parámetros de audio.
Controladores MIDI externos envían mensajes CC directamente a los motores. Ideal para performance en vivo basada en knobs.
Cada motor de audio puede silenciarse o ponerse en solo individualmente — perfecto para aislar durante la edición.
Logging de errores en tiempo real y debugging directamente en el IDE. Sin necesidad de cambiar a las DevTools del navegador.
Calidad: pruebas y estabilidad
Se prueban: lógica del ejecutor de motores, parseo de código por motor, derivación del grafo desde AST, algoritmos de generación de criaturas y capa de persistencia.
La sorpresa al final: la licencia
Cometí un error que quisiera evitarle a otros: no leí la licencia antes de empezar a construir.
Cuando el proyecto estuvo terminado, finalmente leí la licencia de Strudel. Lo que encontré fue la GNU Affero General Public License (AGPL-3.0) — una licencia copyleft que exige que cualquier producto que utilice Strudel también deba publicarse bajo la AGPL-3.0.
Después de pensarlo, decidí hacer lo correcto: Live Music Coder se publica bajo la AGPL-3.0. Strudel es un proyecto de código abierto extraordinario, y la comunidad que lo construyó merece esa reciprocidad.
Preguntas frecuentes
Frequently Asked Questions
Strudel es el mejor punto de partida. La mini-notación es intuitiva y produce resultados audibles rápidamente. note("c3 e3 g3").slow(2) es suficiente para tu primer beat. Tone.js es el siguiente paso para estructuras más melódicas.
No. El live music coding es basado en código, no en notación. Una comprensión básica del ritmo ayuda, pero la mayoría de los patrones surgen experimentando. El lenguaje de patrones está más cerca de la programación que de la teoría musical clásica.
Cada motor tiene fortalezas: Strudel para patrones rítmicos, Tone.js para sintetizadores, Web Audio para sonidos experimentales, MIDI para equipo externo. La combinación permite flujos de trabajo que no serían posibles con un solo motor.
El código se parsea en un AST (Abstract Syntax Tree). Cada nodo de audio en el AST recibe un ID estable. El grafo lee el AST y muestra los nodos. Los cambios en el grafo modifican el AST, que se serializa de vuelta a código. Los IDs estables evitan que los nodos salten con cada cambio.
Sí — con la app de escritorio Electron todo funciona completamente sin conexión. La versión de navegador necesita conexión a internet para GitHub Gist y compartir por URL, pero el editor y los motores de audio también funcionan sin conexión gracias a IndexedDB.
Los Beatlings — criaturas reactivas al audio con sistema de doble cerebro — son código propietario y fueron eliminados de la versión de código abierto. Se están desarrollando como un proyecto separado e independiente.
El proyecto está disponible en live-music-coder.pro y como proyecto de código abierto en GitHub. La app de escritorio para macOS está disponible para descargar. Pull requests bienvenidos.