Tutti i progetti
Sugli store · registrazioni con contenuti di esempioCaso di studio

Re.corder

App companion per uno strumento a fiato elettronico finanziato su Kickstarter: abbinamento, lezioni di diteggiatura, brani da suonare sulla base, duetti.

Ruolo
Sviluppatore Flutter in un piccolo team: interfaccia, lezioni, duetti, profili ed editor delle diteggiature
Cliente
Artinoise
Periodo
2020–2024
Piattaforme
iOS e Android da un’unica codebase Flutter
  • Flutter
  • Dart
  • Bluetooth LE MIDI
  • MIDI SysEx
  • FluidSynth
  • OpenSheetMusicDisplay
  • RxDart
  • Firebase Auth
  • Realtime Database

Il prodotto

Re.corder è un flauto dolce pieno di sensori: pad touch sui fori, un sensore di pressione del fiato e un accelerometro. Via Bluetooth funziona da controller MIDI, e a suonare è il telefono: l’app trasforma in musica ciò che diteggi e soffi, attraverso il suo sintetizzatore, con uno qualsiasi dei 38 suoni di strumento.

Ed è nell’app che si impara a suonarlo. Il primo avvio mette alla prova dita e fiato; i brani ti accompagnano mentre lo spartito scorre e ogni nota viene controllata; due strumenti possono condividere lo stesso telefono per i duetti; punti esperienza e badge tengono il conto. Dalle impostazioni si riscrive la tabella di diteggiatura usata dallo strumento stesso.

34%
dei commit dell’app sono miei (398 su 1.155)
37k
righe di Dart nell’app, senza contare il suo plugin per Bluetooth e sintetizzatore
7
lingue nell’interfaccia
38
suoni di strumento che il Re.corder può suonare

Tour guidato

L’app in azione

Scegli una registrazione, o salta direttamente a un capitolo.

Suonare su un brano, primo fotogramma
0:00 / 0:59

Registrate dal codice dell’app in formato smartphone, in orizzontale, con uno strumento virtuale che suona. Il suono è generato in un secondo momento dalle note che l’app ha inviato al suo sintetizzatore, con il soundfont libero da cui deriva il suo banco di suoni.

Cosa fa

Uno strumento che parla con il telefono

01

L’abbinamento, poi una prima lezione

Il Re.corder compare come dispositivo MIDI Bluetooth. La guida rapida lo abbina, poi ne legge i sensori mentre segui le istruzioni: ogni nota di due scale diventa verde appena i fori giusti sono coperti, e un indicatore segue la pressione del fiato.

02

Brani da suonare sulla base

Scegli un suono e un brano. La base suona senza la tua parte, lo spartito segue la musica e la nota che suoni viene confrontata con quella sotto il cursore: verde o rossa sul nome della nota e sulla barra di avanzamento, mentre il disegno del flauto mostra la diteggiatura della nota da suonare. A fine brano arrivano punti esperienza e badge.

03

Due musicisti, un telefono

Due strumenti si collegano allo stesso telefono. Ogni musicista sceglie un suono e una parte (uno contro l’altro sulla stessa melodia, oppure insieme tra melodia e armonia) e l’app li valuta entrambi.

04

Diteggiature da riscrivere

È lo strumento a decidere quale nota suonare, in base a una tabella di diteggiatura che gli invia l’app. Quella barocca è l’impostazione predefinita; nelle impostazioni ci sono le tabelle di altri strumenti e quelle personalizzate, modificabili foro per foro sul disegno del flauto che l’app usa ovunque; nella guida rapida lo stesso disegno mostra quali fori i sensori rilevano come coperti.

05

Due stili, per bambini e per adulti

Un tema crema e arancio per i bambini e uno scuro per i musicisti adulti, scelto al primo avvio e modificabile in seguito. Gli esercizi della sezione Learn si sbloccano man mano che il musicista sale di livello.

Sotto il cofano

Come è stato realizzato

Bluetooth MIDI e il protocollo dello strumento

L’app mantiene una connessione Bluetooth LE per ogni strumento e interpreta il BLE-MIDI che lo strumento notifica: note, fiato sotto forma di control change, program change. Tutto il resto (interrogare i sensori, inviare tabelle di diteggiatura e impostazioni) passa per un protocollo SysEx con conferme di ricezione, sulla stessa caratteristica.

Suono e spartito sul telefono

Le note sono suonate da FluidSynth, compilato nella build Android, con il banco di suoni libero FluidR3 GM, modificato con un suono di flauto dolce tutto suo; la base è un secondo sintetizzatore che suona un file MIDI con le parti dei musicisti silenziate. Lo spartito è MusicXML disegnato da OpenSheetMusicDisplay in una web view; l’app interroga la posizione di riproduzione per spostare il cursore e confronta ogni nota suonata con quella che ci sta sotto.

La mia parte

Gran parte dell’interfaccia, in entrambi i temi; il disegno del flauto e l’editor delle diteggiature; la guida rapida; la modalità duo e i profili degli amici; esperienza, livelli e badge; account e profili sincronizzati con Firebase; news e video tutorial gestiti da Firebase; il consenso privacy, l’esportazione dei dati e la cancellazione dell’account che spettano agli utenti europei; l’internazionalizzazione e le etichette di accessibilità. I livelli Bluetooth, SysEx e del sintetizzatore sono opera del resto del team.

Registrare un’app in produzione

Un flauto virtuale, e il suono rimesso al suo posto

Senza lo strumento l’app fa poco, e il suo suono nasce da codice nativo che un browser non può eseguire. Per questo le registrazioni usano una copia del codice dell’app con lo strumento simulato e il suono generato dopo ogni ripresa.

  1. 1

    L’app, compilata per il browser

    Una build web di Flutter del codice dell’app, in formato smartphone, in orizzontale, a cui si fa credere di girare su Android. Firebase è sostituito dalle implementazioni fittizie in memoria delle sue librerie di test; un parametro nell’indirizzo carica un primo avvio oppure un musicista che torna.

  2. 2

    Un Re.corder virtuale

    Il plugin Bluetooth riceve una metà web che risponde come lo strumento: si annuncia, si abbina, espone il servizio MIDI, risponde alle interrogazioni dei sensori e invia BLE-MIDI quando suona. Durante un brano suona la sua parte a tempo, con il fiato e un pizzico di imprecisione umana; nelle lezioni gli si dice cosa suonare.

  3. 3

    Brani arrangiati per la demo

    Gli arrangiamenti dell’azienda restano fuori. Uno script scrive una piccola libreria di melodie di pubblico dominio (la melodia, una seconda voce per i duetti, un accompagnamento), sia come MIDI che l’app suona, sia come MusicXML che l’app disegna.

  4. 4

    Il suono, generato dopo la ripresa

    La build per il browser è muta: annota ogni nota che i due sintetizzatori dell’app avrebbero suonato, con il suo istante. Dopo ogni ripresa, lo script di registrazione trasforma quell’elenco in audio con FluidSynth e il soundfont libero FluidR3 GM (quello da cui parte il banco dell’app) e lo mette sotto il video, sincronizzato al fotogramma.

Il logo, l’interfaccia e le sue illustrazioni sono quelli dell’app. I brani, i musicisti e i loro profili sono contenuti di esempio creati per questo portfolio, e il suono è quello del soundfont standard FluidR3 GM, senza il flauto dolce modificato dell’app.

Lezione di diteggiatura

Qui non c’è una demo da provare: Re.corder è un prodotto attivo, quindi questa pagina mostra registrazioni con contenuti di esempio.

Ogni schermata

La raccolta completa degli screenshot

  • BenvenutoAl primo avvio la guida rapida comincia dall’abbinamento.
  • AbbinamentoIl Re.corder si annuncia come dispositivo MIDI Bluetooth.
  • Lezione di diteggiaturaI fori si illuminano in base ai sensori di tocco; ogni nota della scala diventa verde appena è diteggiata.
  • Lezione di fiatoIl sensore di pressione, letto in tempo reale mentre si soffia.
  • HomeImparare con gli esercizi, suonare i brani o suonare in coppia.
  • Suoni degli strumentiIl Re.corder può suonare con qualsiasi suono del sintetizzatore, dal flauto dolce al violoncello.
  • BraniBrani per genere e difficoltà (nella demo, una libreria di esempio).
  • SpartitoLo spartito, con la diteggiatura della nota da suonare.
  • Sulla baseLe note giuste diventano verdi, sulla nota e sulla barra di avanzamento.
  • RisultatoPunti esperienza e badge alla fine del brano.
  • Un secondo strumentoLa modalità duo richiede due Re.corder collegati allo stesso telefono.
  • Modalità duoUno contro l’altro, insieme o in libertà.
  • Un suono a testaOgni musicista sceglie un suono.
  • Un duettoEntrambe le parti su un solo spartito, ciascuna confrontata con ciò che suona il suo musicista.
  • RisultatoEntrambi i musicisti guadagnano esperienza.
  • DiteggiatureBarocca come impostazione predefinita; le tabelle personalizzate e le diteggiature di altri strumenti vengono inviate al Re.corder.
  • ImpostazioniTemi, guida rapida e impostazioni MIDI dello strumento.
  • ImparaGli esercizi si sbloccano con il livello del musicista.
  • Tema ProUn tema scuro per i musicisti adulti, scelto al primo avvio.
  • Tema Pro: spartitoLe stesse schermate, con un altro stile.

Prossimo caso di studio

Indennizzo Diretto →