Uno studio play-along che cambia altezza e tempo nel browser

Contesto

L'editore realizza libri di metodo per studenti di musica e voleva che il metodo stampato arrivasse con un modo per esercitarsi sopra la musica — un'app play-along in cui lo studente carica un brano, suona la propria parte sopra l'accompagnamento e adatta la registrazione al proprio livello: la rallenta per impararla, o la sposta in una tonalità comoda. Doveva girare su qualunque dispositivo lo studente già possiede, senza un download da uno store, e la libreria che uno studente poteva aprire doveva essere legata al libro che aveva davvero comprato.

Problema

Il cuore del problema è di ingegneria audio, non un lettore multimediale.

• Cambiare tempo e altezza in modo indipendente, dal vivo. Rallenta l'audio in modo ingenuo e l'altezza si abbassa; acceleralo e si alza — e cambiare tonalità di solito significa ri-registrare. Fare l'uno o l'altro da solo, in un browser, mentre l'audio è in riproduzione, è elaborazione del segnale in tempo reale, non un interruttore nelle impostazioni.
• Molti stem, un solo clock. Un brano è composto da più tracce — lo strumento dello studente, l'accompagnamento — che devono partire, fermarsi, ripetersi e restare in sincrono al campione. Pochi millisecondi di scarto si sentono come un flam.
• Deve funzionare dove sono gli studenti. Nessun cancello dello store, gira su un telefono o un laptop, e continua a funzionare quando il Wi-Fi della sala prove non lo fa.
• Accesso legato a un libro fisico. La libreria che uno studente può sbloccare deve corrispondere al libro di metodo che ha comprato — riscattabile, conteggiabile e non un liberi tutti.

Approccio

Il motore gira sulla Web Audio API con SoundTouchJS che si occupa di pitch-shift e time-stretch, così uno studente può rallentare un passaggio senza che vada calante, o spostarlo in un'altra tonalità senza che acceleri — applicato dal vivo durante la riproduzione. Ogni stem è schedulato rispetto a un unico clock audio, così le tracce restano in sincrono per quanto il tempo venga spinto e tirato, e una battuta difficile può essere ripetuta in loop finché non viene.

Il tutto è una PWA Angular: si installa sulla home, gira su qualunque telefono o laptop senza uno store, e mette in cache il suo audio in IndexedDB così un brano scaricato continua a suonare offline in una sala prove senza segnale. Il catalogo dei brani è dato, non codice — ogni brano, i suoi stem e le tonalità che offre sono descritti in un foglio di calcolo che i redattori dell'editore mantengono, così il nuovo repertorio esce senza un rilascio.

L'accesso è regolato da codici: uno studente riscatta un codice stampato sul suo libro di metodo — scansionato con la fotocamera o digitato — per sbloccare la libreria corrispondente, e una vista admin conta i riscatti (codici demo con tetto inclusi) così l'editore può vedere come i libri si trasformano in esercizio. Firebase porta storage per l'audio, autenticazione e hosting, così l'editore gestisce un unico sistema end to end.

Risultato

Uno studente apre l'app dal codice nel suo libro e si esercita sulla musica vera — rallentando un passaggio per impararlo, portandolo nella propria tonalità, ripetendo in loop le battute difficili — sul telefono o sul laptop che ha già, online o offline. Un metodo stampato diventa qualcosa con cui gli studenti suonano invece di leggere, e l'editore può osservare, codice dopo codice, come i libri si convertono in tempo di esercizio.