Re.corder
App complementaria de un instrumento de viento electrónico financiado en Kickstarter: emparejamiento, lecciones de digitación, canciones para tocar con acompañamiento, dúos.
- Rol
- Desarrollador Flutter en un equipo pequeño: la interfaz, las lecciones, los dúos, los perfiles y el editor de digitaciones
- Cliente
- Artinoise
- Periodo
- 2020–2024
- Plataformas
- iOS y Android desde una única base de código Flutter
El producto
Re.corder es una flauta dulce llena de sensores: pads táctiles en los agujeros, un sensor de presión del soplo y un acelerómetro. Por Bluetooth es un controlador MIDI, y el teléfono es donde suena: la app convierte lo que digitas y soplas en música mediante su propio sintetizador, con cualquiera de sus 38 sonidos de instrumentos.
La app es también donde se aprende a tocarla. Un primer uso comprueba tus dedos y tu soplo; las canciones suenan contigo mientras la partitura avanza y se comprueba cada nota; dos instrumentos pueden compartir un teléfono para tocar a dúo; los puntos de experiencia y las insignias llevan la cuenta. Los ajustes reescriben la tabla de digitaciones que usa el propio instrumento.
- 34%
- de los commits de la app son míos (398 de 1155)
- 37k
- líneas de Dart en la app, sin contar su plugin de Bluetooth y sintetizador
- 7
- idiomas en la interfaz
- 38
- sonidos de instrumentos que puede tocar el Re.corder
Recorrido
La app en acción
Elige una grabación o salta directamente a un capítulo.
Grabado a partir del código de la app en tamaño de teléfono, en horizontal, con un instrumento virtual tocando. El sonido se genera después a partir de las notas que la app envió a su sintetizador, con el soundfont libre en el que se basa su propio banco de sonidos.
Qué hace
Un instrumento que habla con el teléfono
01
Emparejamiento y, luego, una primera lección
El Re.corder aparece como dispositivo MIDI Bluetooth. El inicio rápido lo empareja y después lee sus sensores mientras sigues las indicaciones: cada nota de dos escalas se pone verde cuando se tapan los agujeros correctos, y un indicador sigue la presión del soplo.
02
Canciones para tocar con acompañamiento
Eliges un sonido y una canción. La pista de acompañamiento suena con tu parte silenciada, la partitura sigue la música y la nota que tocas se compara con la nota bajo el cursor: en verde o en rojo sobre el nombre de la nota y en la barra de progreso, mientras el dibujo de la flauta muestra la digitación de la nota que hay que tocar. El final de la canción se convierte en puntos de experiencia e insignias.
03
Dos músicos, un teléfono
Dos instrumentos se conectan al mismo teléfono. Cada músico elige un sonido y una parte (uno contra otro sobre la misma melodía, o juntos con melodía y armonía) y la app puntúa a los dos.
04
Digitaciones que se pueden reescribir
El instrumento decide qué nota tocar a partir de una tabla de digitaciones que le envía la app. La barroca es la predeterminada; los ajustes guardan tablas para otros instrumentos y tablas personalizadas, que se editan agujero por agujero sobre el dibujo de la flauta que la app usa en todas partes; en el inicio rápido, ese mismo dibujo muestra qué agujeros detectan los sensores como tapados.
05
Dos estilos, para niños y adultos
Un tema crema y naranja para niños y uno oscuro para músicos adultos, elegido en el primer arranque y modificable más tarde. Los ejercicios de la sección Learn se desbloquean a medida que el músico sube de nivel.
Por dentro
Cómo se construyó
MIDI por Bluetooth y el protocolo del instrumento
La app mantiene una conexión Bluetooth LE por instrumento e interpreta el BLE-MIDI que este notifica: notas, el soplo como cambios de control, cambios de programa. Todo lo demás (consultar los sensores, enviar las tablas de digitación y los ajustes) es un protocolo SysEx con confirmaciones sobre la misma característica.
Sonido y partitura en el teléfono
Las notas las toca FluidSynth, compilado dentro de la versión de Android, a partir del banco de sonidos libre FluidR3 GM, modificado con un sonido de flauta dulce propio; la pista de acompañamiento es un segundo sintetizador que reproduce un archivo MIDI con las partes de los músicos silenciadas. La partitura es MusicXML dibujado por OpenSheetMusicDisplay en un WebView; la app consulta la posición de reproducción para mover su cursor y compara cada nota tocada con la que está debajo.
Mi parte
La mayor parte de la interfaz en los dos temas; el dibujo de la flauta y el editor de digitaciones; el inicio rápido; el modo dúo y los perfiles de amigos; la experiencia, los niveles y las insignias; las cuentas y los perfiles sincronizados con Firebase; las noticias y los videotutoriales gestionados desde Firebase; el consentimiento de privacidad, la exportación de datos y la eliminación de la cuenta a los que tienen derecho los usuarios europeos; la internacionalización y las etiquetas de accesibilidad. Las capas de Bluetooth, SysEx y sintetizador las construyó el resto del equipo.
Grabar una app en producción
Una flauta virtual, y el sonido devuelto a su sitio
Sin el instrumento la app hace poco, y su sonido sale de código nativo que un navegador no puede ejecutar. Así que las grabaciones usan una copia del código de la app con el instrumento simulado y el sonido generado después de cada toma.
- 1
La app, compilada para el navegador
Una compilación de Flutter web del código de la app en tamaño de teléfono, en horizontal y configurada para creer que se ejecuta en Android. Firebase se sustituye por las implementaciones falsas en memoria de sus bibliotecas de pruebas; un parámetro en la URL carga un primer arranque o un músico habitual.
- 2
Un Re.corder virtual
El plugin de Bluetooth recibe una mitad web que responde como el instrumento: se anuncia, se empareja, expone el servicio MIDI, responde a las consultas de los sensores y envía BLE-MIDI cuando toca. Durante una canción toca su parte a tempo, con soplo y una ligera imprecisión humana en el ritmo; en las lecciones se le dice qué tocar.
- 3
Canciones arregladas para la demo
Los arreglos de la empresa se quedan fuera. Un script escribe una pequeña biblioteca de melodías de dominio público (la melodía, una segunda voz para los dúos, un acompañamiento), tanto en el MIDI que la app reproduce como en el MusicXML que dibuja.
- 4
El sonido, generado después de la toma
La compilación para el navegador es muda: registra cada nota que habrían tocado los dos sintetizadores de la app, con su instante. Después de cada toma, la herramienta de grabación convierte ese registro en audio con FluidSynth y el soundfont libre FluidR3 GM (del que parte el propio banco de la app) y lo coloca bajo el video, sincronizado al fotograma.
El logotipo, la interfaz y sus ilustraciones son los de la propia app. Las canciones, los músicos y sus perfiles son contenido de ejemplo creado para este portfolio, y el sonido es el soundfont estándar FluidR3 GM, sin la flauta dulce modificada de la app.
Aquí no hay demo que probar: Re.corder está en producción, así que esta página muestra grabaciones con contenido de ejemplo.
Todas las pantallas
La colección completa de capturas
BienvenidaPrimer arranque: el inicio rápido empieza con el emparejamiento. EmparejamientoEl Re.corder se anuncia como dispositivo MIDI Bluetooth. Lección de digitaciónLos agujeros se iluminan según los sensores táctiles; cada nota de la escala se pone verde una vez digitada. Lección de soploEl sensor de presión, leído en tiempo real mientras el músico sopla. InicioAprender con ejercicios, tocar canciones o tocar en pareja. Sonidos de instrumentosEl Re.corder puede sonar con cualquiera de los sonidos del sintetizador, de la flauta dulce al violonchelo. CancionesCanciones por género y dificultad (biblioteca de ejemplo en la demo). PartituraLa partitura, con la digitación de la nota que hay que tocar. TocandoLas notas correctas se ponen en verde, en la nota y en la barra de progreso. ResultadoPuntos de experiencia e insignias al final de una canción. Un segundo instrumentoEl modo dúo necesita dos Re.corder conectados al mismo teléfono. Modos de dúoUno contra otro, juntos o libre. Un sonido para cada unoCada músico elige un sonido. Un dúoLas dos partes en una misma partitura, cada una comparada con lo que toca su músico. ResultadoLos dos músicos ganan experiencia. DigitacionesBarroca por defecto; las tablas personalizadas y las digitaciones de otros instrumentos se envían al Re.corder. AjustesTemas, inicio rápido y los ajustes MIDI del instrumento. AprenderLos ejercicios se desbloquean con el nivel del músico. Tema ProUn tema oscuro para músicos adultos, elegido en el primer arranque. Tema Pro: partituraLas mismas pantallas, con otro estilo.
Siguiente caso de estudio
Indennizzo Diretto →