A play-along practice studio that bends pitch and tempo in the browser

Context

The publisher makes method books for music students and wanted the printed method to come with a way to practise against the music — a play-along app where a student loads a piece, plays their part over the accompaniment, and bends the recording to their level: slow it down to learn it, or move it into a comfortable key. It had to run on whatever device a student already owns, without a download from an app store, and the library a student could open had to be tied to the book they actually bought.

Problem

The headline is an audio-engineering problem, not a media player.

• Change tempo and pitch independently, live. Slow audio down the naive way and it drops in pitch; speed it up and it rises — and changing key normally means re-recording. Doing either on its own, in a browser, while the audio is playing, is real-time signal processing, not a settings toggle.
• Many stems, one clock. A piece is several tracks — the student's instrument, the accompaniment — that have to start, stop, loop, and stay sample-accurately in sync. A few milliseconds of drift is audible as flam.
• It has to work where students are. No app-store gate, runs on a phone or a laptop, and keeps working when the practice-room Wi-Fi doesn't.
• Access tied to a physical book. The library a student can unlock has to match the method book they bought — redeemable, countable, and not a free-for-all.

Approach

The engine runs on the Web Audio API with SoundTouchJS doing the pitch-shift and time-stretch, so a student can slow a passage down without it going flat, or move it into another key without it speeding up — applied live as it plays. Every stem is scheduled against a single audio clock, so the tracks stay in sync no matter how the tempo is pushed and pulled, and a hard bar can be looped until it lands.

The whole thing is an Angular PWA: it installs to the home screen, runs on any phone or laptop without a store, and caches its audio in IndexedDB so a downloaded piece keeps playing offline in a practice room with no signal. The song catalogue is data, not code — each piece, its stems, and the keys it offers are described in a spreadsheet the publisher's editors maintain, so new repertoire ships without a release.

Access is gated by codes: a student redeems a code printed with their method book — scanned with the camera or typed in — to unlock the matching library, and an admin view counts redemptions (capped demo codes included) so the publisher can see how the books turn into practice. Firebase carries storage for the audio, auth, and hosting, so the publisher runs one system end to end.

Outcome

A student opens the app from the code in their book and practises against the actual music — slowing a passage to learn it, nudging it into their own key, looping the hard bars — on the phone or laptop they already have, online or off. A printed method becomes something students play with rather than read, and the publisher can watch, code by code, how the books convert into practice time.