Turning any song into an interactive piano lesson
A browser-based piano tutor that takes an audio file or a MIDI file and turns it into falling notes, synced sheet music and real-time scoring — no install, no plugin.
- Client
- Compianion
- Industry
- Music education
- Year
- 2026
Audio + MIDI
accepted as lesson input
Real time
note-by-note scoring
0
installs — it is a web app
The challenge
Learning software for piano tends to fail in one of two ways: it locks you into a fixed catalogue of songs, or it runs as a heavy desktop install that never quite works with your keyboard.
The goal was a web application that accepts the music the learner actually wants to play, renders it accurately at a steady frame rate in the browser, and listens back closely enough to score a performance note by note — all while staying responsive on an average laptop.
The goal was a web application that accepts the music the learner actually wants to play, renders it accurately at a steady frame rate in the browser, and listens back closely enough to score a performance note by note — all while staying responsive on an average laptop.
What we built
Compianion is a Laravel application with a rendering layer built on PixiJS, so the note highway and the sheet music are drawn on the GPU rather than fighting the DOM. Audio and MIDI are analysed server-side into a timed note map, which the client then plays back, scrolls and scores against live input from the Web MIDI and Web Audio APIs.
Around the engine sits the part that keeps people practising: hands-separate mode, loop-a-bar for the passage that keeps going wrong, adjustable tempo, and an XP system that rewards returning rather than grinding.
Around the engine sits the part that keeps people practising: hands-separate mode, loop-a-bar for the passage that keeps going wrong, adjustable tempo, and an XP system that rewards returning rather than grinding.
The outcome
The result runs entirely in the browser on desktop and tablet, works with any USB or Bluetooth MIDI keyboard, and falls back to microphone pitch detection for learners on an acoustic piano.
Stack
Laravel
Vue 3
PixiJS
Web Audio API
Web MIDI
Vite
MySQL
LiteSpeed
More projects
View case study
LingoCard ·Language learning
Flashcards that fill themselves in
Type one word and the card completes itself: translation, pronunciation on both sides, part of speech and a real example sentence — assembled from free and open dictionaries, in any language pair.
Laravel
Blade
Tailwind CSS v4
Laravel Socialite
View case study
TradeSmart ·Financial technology
A multi-broker trading desk with a strategy engine behind it
One console across Questrade and Interactive Brokers: unified positions, a backtested strategy engine, and automated execution with the risk controls wired in front of the order, not behind it.
Laravel 13
PHP 8.4
Blade
Tailwind CSS v4