Tres líneas de código, menos de un minuto, y suena música. Esta es la historia de Strudel Notebook: un manual vivo para aprender a componer con código que diseñé pensando en una idea sencilla pero poco habitual: en vez de enseñar música a programadores, enseñar programación a músicos.

Esta entrada es un resumen de mi última publicación: Miralles-Bono, J. L. (2026). Vibe-live-coding: Jamming con la inteligencia artificial y Strudel. En OUT: el aula como laboratorio para reimaginar una nueva educación artística desde propuestas inclusivas y creativas. Universitat de València. Disponible en Research Gate.

Un alumno abre el navegador y escribe…

Imagina a un estudiante de conservatorio con años de armonía a sus espaldas, pero que nunca ha programado. Abre una pestaña del navegador y escribe esto:

n("0 [2 4] <7 5> 4").scale("C4:minor").s("piano").room(0.3)

Suena un arpegio en do menor, con una nota que va alternando en cada ciclo. Añade debajo una caja de ritmos…

sound("bd [~ sd] hh*4 [hh oh]").bank("RolandTR808").gain(0.7)

…y un bajo sintético cuyo filtro oscila siguiendo una onda sinusoidal:

note("c2 [~ c2] eb2 [~ g2]").s("sawtooth").lpf(sine.range(300,1800)).gain(0.5)

Pulsa Play. Las tres capas suenan a la vez, se dibujan en un espectrograma y se pueden compartir con un compañero mediante un enlace. Ese momento condensa todo lo que me interesa: la distancia entre lo que quiero que suene y cómo se escribe, y cómo acortarla.

Marco rápido: del pentagrama al código

Una pincelada teórica, prometo que breve. En 1958, Charles Seeger distinguió entre notación prescriptiva (la que precede a la música y la instruye, como una partitura) y notación descriptiva (la que sigue a la música y la registra). Ya hablamos esto en el blog. El live coding hace algo fascinante: colapsa las dos. El código es a la vez la receta de lo que sonará, el registro de las decisiones que tomas en el momento y la actuación misma, visible en pantalla. La notación ya no solo describe o prescribe: genera.

A esto le sumo dos ingredientes más. El primero es el vibe coding (término de Andrej Karpathy, 2025): describir en lenguaje natural lo que quieres y dejar que una IA generativa produzca un prototipo funcional que luego escuchas, entiendes y reescribes. De hecho, Strudel Notebook fue creado íntegramente con vibe coding, conversando con Claude. El segundo es lo pedagógico: convertir todo esto en una experiencia de aula. A esa mezcla la llamo vibe-live-coding.

La herramienta de base es Strudel, la reimplementación de TidalCycles en JavaScript creada por Felix Roos. Funciona en cualquier navegador, sin instalar nada, igual en Windows, macOS o LliureX. Ideal para un aula con dispositivos dispares (BYOD). Pero la documentación oficial asume que ya conoces el house, el techno y las cajas de ritmo… no la armonía funcional ni los modos. Y ahí es donde quise invertir el punto de partida.

Strudel Notebook: un manual vivo

Strudel Notebook es una plataforma web de código abierto (VitePress + Vue 3 + el motor de audio de Strudel) que se despliega sola en GitHub Pages y funciona en cualquier navegador moderno. Su licencia AGPL-3.0 significa que cualquier docente puede bifurcarla, adaptarla y crear sus propias lecciones a partir de una plantilla incluida.

El diseño parte de lo que el alumno ya sabe: las lecciones usan vocabulario musical (escalas, modos, grados) antes que jerga de programación, las visualizaciones incluyen partitura y teclado junto al espectro, y la función n().scale() permite pensar en grados de escala… que es exactamente como piensa quien estudia armonía.

El StrudelBox: un editor con varios modos

El corazón de la plataforma es el StrudelBox, un editor de código embebido en cada lección. Lo que lo diferencia del REPL estándar de Strudel es que ofrece distintos modos según la autonomía del alumno:

• Modo libre: un editor normal, escribes y ejecutas sin restricciones.
• Modo guiado: el docente bloquea ciertas líneas y deja solo algunos parámetros editables mediante desplegables o campos con pistas. Por ejemplo: un patrón rítmico fijo y un desplegable para explorar sintetizadores, o una estructura armónica bloqueada con un hueco donde el alumno escribe su melodía. Es andamiaje puro: acota las decisiones sin quitar la agencia, y se retira cuando ya no hace falta.
• Modo quiz: preguntas con opciones o código y feedback inmediato. Perfecto para ear training inverso: suena un patrón y hay que identificar la escala, la transformación o el efecto.

Pero el StrudelBox es más que un editor. Incluye un panel de notas para escribir observaciones y decisiones junto al código (un diario reflexivo digital), y un historial con snapshots que guarda estados sucesivos y documenta el proceso creativo de forma cronológica. Ambos se pueden compartir mediante un enlace. Y permite exportar el trabajo en tres formatos: el código fuente, un archivo MIDI y una grabación de audio: el mismo objeto musical existiendo a la vez como texto, como secuencia y como sonido.

El panel de visualización: un melógrafo digital

Cuando ejecutas código, debajo se despliega el VisualizerPanel, con visualizaciones en tiempo real organizadas en pestañas. Las agrupo en dos familias:

• Analíticas (ver el sonido como acústica): forma de onda, espectro de frecuencias (20 Hz–20 kHz, escala logarítmica, con indicador de pico) y espectrograma. Conceptos de audio que en la formación clásica suelen quedarse en lo teórico, ahora visibles.
• Creativas (ver el sonido como música que el alumno ya conoce): piano roll (con opción de solfeo), partitura en pentagrama, un teclado de 88 teclas que se ilumina en tiempo real y una rejilla de batería tipo secuenciador.

Hay un guiño histórico aquí: en 1951 el propio Seeger describió el melógrafo, un aparato mecánico para producir notación descriptiva automática a partir del sonido. El VisualizerPanel es, en cierto modo, ese viejo sueño hecho navegador: un melógrafo que, además de describir el sonido, lo conecta con el código que lo genera y con la notación que el alumno ya sabe leer. Esa triple conexión (código ↔ sonido ↔ representación visual) es lo que le da su potencial pedagógico.

¿Y en el aula?

Las piezas anteriores permiten montar actividades en tres ejes: aprender (exploraciones acotadas con modo guiado, ear training con modo quiz), crear (remixar snippets, componer con restricciones, exportar a MIDI para llevarlo a un DAW u otra asignatura) y actuar y reflexionar (el ping-pong de código: un alumno crea un patrón, comparte el enlace, otro lo modifica y lo devuelve; jam sessions de clase; notas e historial como material evaluable).

El rol del docente se desplaza del sabio en el estrado al guía al lado. Y aquí va lo importante: el docente no necesita ser programador, necesita ser músico y saber escuchar. Su trabajo es sostener la escucha crítica y acompañar la decisión: «¿qué versión prefieres y por qué?». Cuando un alumno elige entre dos variaciones de un patrón, está componiendo. Esa decisión es el núcleo del aprendizaje.

¿Y la IA? Funciona como un andamiaje de segundo orden: el alumno puede pedir a un asistente externo un primer borrador de código, pero documenta qué pidió, qué obtuvo y qué cambió. El criterio es claro: la IA genera el primer borrador, pero el alumno decide qué suena.

Pruébalo (y haz tu propia versión)

Strudel Notebook no es un producto cerrado, sino una infraestructura abierta. Su valor no está en el contenido concreto de sus lecciones, sino en la arquitectura que hace posible la exploración guiada, el registro del proceso y el puente entre práctica creativa y comprensión acústica. Si eres docente, bifúrcalo, cámbialo y diseña tus lecciones.

• 🎹 Probar la app: jlmirallesb.github.io/strudel_notebook
• 💻 Código fuente (GitHub): github.com/JLMirallesB/strudel_notebook
• 🌐 Strudel: strudel.cc

Abre el navegador, escribe tres líneas y dale a Play. Lo demás es escuchar.