Piano Teacher
Sep 2025 - May 2026 - Personal Project
GitHub Repo: https://github.com/Callum-OP/Piano-Teacher
View GitHub Pages website: https://callum-op.github.io/Piano-Teacher
JavaScript, HTML, CSS
An interactive way to learn piano using a visual piano interface. Load a preset piece or a MIDI file, then watch autoplay light up the keys to show you exactly how it's played, with full control over the speed.
The app has been published on Itch.io, the Microsoft Store and the Google Play Store.
Features:- Play a piano directly on screen using touch.
- Visual autoplay that lights up the keys for preset pieces or uploaded MIDI files.
- Select from a preset list of music, upload a MIDI file or enter notes directly.
- Search and filter the preset and saved music lists.
- Save music to your own custom list stored in local storage.
- Isolate hands by silencing the left or right hand during playback.
- Limit notes to the piano size to discard any out-of-range notes.
- Pause, rewind or fast forward, change tempo or volume, and use spacebar to play/pause during autoplay.
- Extend the piano to use even more keys or use a smaller piano and change the octaves used.
- Settings panel with options to customise the app and accessibility features.
- Editable note grid aligned to the piano keys.
- Tools for left/right hand note placement and an erase function.
- Customise note length, drag notes to move them and drag their edges to resize.
- Scroll to scrub through the timeline for a preview.
- Enter notes directly in letter format, with support for rests and simultaneous notes.
Screenshots of the app:
