An interactive chord tutorial and reference app for worship musicians and keyboardists who want to learn piano chords using a formula-based (spatial / scale-degree) approach. Replaces staff notation with a visual, pattern-based system — each chord is a spatial shape on the keyboard.
Features
- Interactive Virtual Piano — clickable SVG keyboard with real-time highlighting
- Chord Reference Library — 13 core chord types + 29 extended variations, with formulas, intervals, spatial and scale-degree display modes
- Chord Detail Pages — inversions, variations, arpeggio patterns, worship voicing options, and related progressions for every chord
- Lesson Curriculum — 16 progressive lessons covering basic chords through polychords and slash chords
- 12-Week Guided Learning Plan — structured curriculum with 12 worship songs (Nepali + English CCM) in 4 phases
- Audio Engine — Web Audio API playback with sampled piano sounds (Splendid Grand Piano), pitch shifting, sustain with reverb, background preloading
- Ear Training — listen and identify chord tones by ear
- Worship Voicing Patterns — Triad Foundation, Dominant Support, Major 7th Color, Minor 7th Color with left/right hand splits
- Chord Progression Calculator — voice-leading optimization that minimizes hand movement
- Settings Persistence — volume, zoom, sustain, auto-play, playback speed, display mode saved to localStorage
- Search-as-You-Type — quick chord finder with keyboard navigation
- Responsive Design — desktop table layout and mobile card layout. aXe-tested accessibility, lazy-loaded keyboards, preloaded audio.
Tech
Astro, Tailwind CSS, Web Audio API, TypeScript. No framework — pure server-rendered HTML with vanilla JS hydration. Built with accessibility (aXe-tested) and performance (lazy-loaded keyboards, preloaded audio samples) in mind.