Cascada — piano en tu iPad
Un tutor de piano con las notas cayendo sobre el teclado. Vive entero en el navegador:
sin cuenta, sin suscripción, sin límite de canciones y sin internet una vez instalado.
Hecho con el pack de skills replica-skill,
a partir del mapa de funciones de una app de App Store. Clean room: se replicaron las
funciones y el recorrido, no su código, su catálogo, sus textos ni su marca.
El trabajo de reconocimiento está en replica/.
Ponerlo en el iPad (3 minutos)
1. Publica la página
El repositorio ya trae el flujo de GitHub Pages. Solo hay que encenderlo:
- En GitHub, ve a Settings → Pages.
- En Source, elige GitHub Actions.
- Listo. Todo lo que llega a
main se publica solo: el flujo corre las tres suites y,
solo si pasan, despliega. Si algo falla, la versión viva se queda como estaba.
Queda en https://javi-molin.github.io/piano/.
Hace falta https. Instalarla y el modo sin conexión dependen de un service worker, y
eso no funciona abriendo el archivo a pelo.
2. Instálala
En el iPad, con Safari (no con Chrome: en iOS solo Safari sabe instalar):
- Abre la dirección de arriba.
- Toca Compartir (el cuadrado con la flecha).
- Añadir a pantalla de inicio → Añadir.
Ya tienes el icono. Ábrelo desde ahí: va a pantalla completa, sin barras, y funciona en avión.
3. Primer uso
Elige si quieres los nombres de nota en Do Re Mi o en C D E, y empieza. El catálogo
trae 14 piezas; la primera recomendada es la escala de Do mayor o Estrellita.
Cómo se usa
| |
|---|
| Aprender | La canción te espera en cada nota, el tiempo que necesites. Si te adelantas, va contigo: el tempo lo pones tú. Es el modo para empezar. |
| Tocar | A tiempo, con la precisión contada pero sin presión. |
| Dominar | Con puntaje, estrellas y tres niveles de exigencia. Una pieza queda "dominada" con 90 % a velocidad real. |
| Escuchar | Solo oírla, viendo caer las notas. Para enterarte de cómo va antes de tocarla. |
Dentro del reproductor: velocidad del 25 al 200 % en vivo, manos (la que no practicas
la toca la app), bucle, metrónomo. Al terminar, un mapa de calor te dice en qué
compases se te escapa, y un botón te mete a practicar justo esos.
Con qué puedes tocar
- La pantalla. Multitouch, con los nombres de nota sobre las teclas.
- Tu piano de verdad, por el micrófono. Ajustes → Con qué toco → Micrófono, y ahí
mismo ves lo que oye, para comprobarlo sin fiarte. Oye varias notas a la vez, que es
como suena un piano: con pedal, o tocando seguido, las cuerdas anteriores siguen sonando.
Medido contra un piano simulado realista: oye las 42 notas de seis escenarios distintos
—incluido pedal y sala ruidosa— y se cuela alguna de más, unas once en total. Y oye
lo mismo con la señal a 0,01 que a 0,3 de pico: no hace falta acercar el iPad al
piano, ni acertar con la sensibilidad. Con auriculares va mejor: si no, el altavoz se
oye a sí mismo.
- Un teclado MIDI, donde el navegador tenga Web MIDI. Safari en iPad no lo trae:
en el iPad, el camino es la pantalla o el micrófono.
- El teclado del ordenador: fila
Z…M y Q…P.
Tus canciones
- Importa cualquier
.mid: arrastrándolo, eligiéndolo o pegando el enlace directo.
Esto es lo que hace que la biblioteca no tenga límite, y es exacto.
- Pega un enlace de YouTube, Spotify o SoundCloud y Cascada lee el título y te lleva a
los dos caminos que sí funcionan (ver abajo).
- Sube audio (
.mp3, .m4a, .wav, .ogg, .flac), uno o varios de golpe, sin
límite de peso ni de duración. La transcripción está en beta y tiene dos modos:
acordes y melodía, que saca varias notas a la vez, y solo la melodía, más rápido
y más limpio con una sola línea. El tempo lo detecta sola. Lo único que crece con la
duración es el tiempo: unos 12 segundos de análisis por minuto de audio (el triple en
modo acordes), con su barra de progreso.
- Graba lo que improvises en Juego libre y se guarda como una canción más.
- Exporta toda tu biblioteca a un
.json desde Ajustes. Como no hay nube, esa es la
forma de llevártela a otro dispositivo o de no perderla si borras los datos de Safari.
Una canción de YouTube o Spotify
Pégale el enlace en + Añadir canción. Cascada lee el título (con el oEmbed público del
servicio: sin clave y sin cuenta) y te deja en dos caminos:
- Buscar un MIDI de esa canción. Es lo exacto: las notas de verdad, con las dos manos.
Un toque y estás buscándolo con el título ya puesto.
- Ponla y que Cascada la escuche. Le das a grabar, suena la canción —en un altavoz al
lado, o compartiendo el sonido de otra pestaña si estás en un portátil— y saca la melodía
de oído, con el tempo detectado solo.
Lo que no hace, y por qué: convertir el enlace solo, de un toque. Spotify no entrega
audio que el navegador pueda leer, y YouTube ni permite descargarlo desde otra página ni lo
autoriza. Y aunque llegara el audio, transcribir una mezcla completa con calidad necesita un
modelo corriendo en un servidor. Aquí no hay servidor: ese es justo el precio de que la app
sea tuya, gratis, sin cuenta y sin conexión. Así que en vez de un botón que falla, están los
dos caminos que llevan a lo mismo en dos toques.
Tu piano, el que tienes de verdad
En Ajustes → Tu piano dices de cuántas teclas es: 25, 37, 49, 61, 76, 88 o sin límite.
Si tu teclado no empieza en un Do, mueve la nota más grave por octavas.
Con eso puesto, lo que no entra en tu teclado se arregla como tú digas:
- Traerlas a la octava más cercana (por defecto). Cambia un poco la música —un bajo sube
una octava y se nota— pero puedes tocar la pieza entera en lo que tienes.
- Omitirlas. Se quitan y punto.
- Mostrarlas igual. Las ves aunque no las alcances.
El detalle de cada canción te dice en una línea cuántas notas se movieron y cuántas se
quitaron, para que no haya sorpresas.
Subir o bajar la canción entera
En el detalle de la canción: − Octava / − Semitono / Original / + Semitono / + Octava, o
el deslizador para cualquier punto entre −24 y +24 semitonos. La digitación se recalcula
sola y el tono se recuerda para esa canción. Si al subir se te sale del teclado, el ajuste de
tu piano lo recoge después.
El catálogo
14 piezas de dominio público, arregladas aquí: escala de Do y arpegios, Hanon n.º 1,
Estrellita, Oda a la Alegría, Jingle Bells, Noche de paz, Minueto en Sol,
estudio de arpegios, Greensleeves, Para Elisa, Canon en Re, Preludio en Do de Bach y
el tema del Claro de luna. No hay nada con derechos: lo demás lo pones tú con tus MIDI.
Para desarrollar
Cero dependencias y cero compilación. Solo hace falta un servidor estático, porque los
módulos ES no cargan desde file://.
python3 -m http.server 8080 # o: npm start
# http://localhost:8080
npm test # 62 del núcleo + micrófono + tokens + despliegue (solo Node)
npm run test:e2e # 37 recorridos en Chromium (necesita playwright)
npm run icons # regenera los iconos desde los tokens
Qué hay dentro
index.html una sola página, pantallas conmutadas
styles.css tokens de diseño como custom properties
sw.js service worker: todo del caché primero
src/score.js modelo musical: DSL propio, digitación, secciones, tu teclado
src/songs.js el catálogo de dominio público
src/midi.js lector y escritor de MIDI estándar, y entrada Web MIDI
src/audio.js piano sintetizado (sin un solo byte de sample)
src/pitch.js afinación: YIN en dos pasadas y FFT, compartido
src/mic.js notas por micrófono, de Mi1 a Do7, varias a la vez
src/transcribe.js audio a notas: melodía o acordes, tempo automático, grabación (beta)
src/keyboard.js geometría, dibujo y multitouch del teclado
src/roll.js el piano-roll que cae
src/player.js el tutor: modo espera, puntuación, bucle
src/store.js IndexedDB + localStorage, exportar e importar
src/ui.js, src/app.js pantallas y cableado
tools/make_icons.py genera los PNG del icono, sin librerías
tests/ núcleo, micrófono, tokens, despliegue y navegador
(con un piano simulado y un mp3 de prueba, los dos propios)
replica/ recon, arquitectura, diseño, marca, pruebas, paridad
.claude/skills/ el pack replica-skill, por si quieres repetir algún paso
Decisiones que explican casi todo lo demás:
- El reloj maestro es el del audio, no
requestAnimationFrame. rAF deriva; el audio no.
- Todo se mide en beats, no en milisegundos. Así, al bajar la velocidad, el margen de
acierto se ensancha solo: ralentizar ayuda de verdad.
- Sin samples de piano. Un piano grabado son decenas de megas y mataría el modo sin
conexión. El timbre es sintético y la app entera pesa menos que una foto.
- Sin backend. El precio: no hay sincronización entre dispositivos. Se cubre exportando.
Lo que esta app no hace
Dicho antes de que lo descubras tú:
- No convierte una canción de Spotify o YouTube en un tutorial de un toque. Eso necesita
un modelo de transcripción corriendo en un servidor, y aquí no hay servidor. Lo que sí
hace: leer el título del enlace, llevarte a buscar su MIDI —que es exacto— o grabarla
mientras suena y sacarla de oído.
- La transcripción propia oye acordes, pero no es un modelo entrenado. Medida sobre
acordes de piano simulado con todo lo que lo hace difícil (cuerdas con rigidez, tres por
nota, sala): encuentra 22 de 24 notas, pero se inventa unas 10. Sobre tonos sintéticos
perfectos salía impecable; esa cifra no servía para nada, porque un piano no suena así.
Para exactitud, importa un MIDI.
- No tiene catálogo de canciones conocidas. Serían licencias. El catálogo es de dominio
público y lo tuyo lo pones tú.
- No hay cuenta ni nube. Si borras los datos del navegador sin exportar, se va.
- No manda recordatorios. Una PWA en iOS no da notificaciones sin más. La racha está,
el aviso no.
- Está solo en español.
Paridad medida contra el mapa de recon: 90 / 100
(npm run parity). Lo que falta es exactamente lo de arriba.
Licencia
MIT. Las obras del catálogo son de dominio público; los arreglos se escribieron aquí.
