mirror of
https://github.com/9x/sheetmusictrainer.git
synced 2026-11-03 22:03:54 +01:00
Jens Mohrmann
6e60ced477
- color-scheme per theme so native controls (selects, checkboxes, number inputs, sliders) render dark-native instead of black-on-black. - Themed .control-select text color; new .control-input class replaces hardcoded white-on-black inline input styles. - Tuner widget stays mounted when enabled: idle state (dimmed, needle parked, '—') instead of appearing/disappearing. Fully theme-var based (was hardcoded white — invisible in light mode). - Remove CSS transitions on per-frame values (tuner needle, level meter): transitions interrupted 60x/sec are left stuck by WebKit/Safari; the display EMA from the detection loop replaces them. - VexFlow notation: resolve CSS var() to concrete colors (SVG attributes can't resolve var(), silently fell back to black) and override VexFlow's hardcoded #444 ledger-line default; re-render on theme changes (useLayoutEffect so children read the updated attribute in time). - Themed switch toggles (were hardcoded #ddd / white — glowed in dark mode). - Fixed-height pitch readout so the layout stops jumping when a note starts or stops sounding. - Split SettingsContext into context/Provider/hook files (fast-refresh); memoized provider functions; typed webkitAudioContext; prefer-const; removed 'as any' casts. ESLint now passes clean.
Sheet Music Trainer
A web-based application designed to help musicians practice sight-reading and ear training. It listens to your instrument (or voice) via the microphone and gives real-time feedback.
Live Demo (If available)
Features
- Sight Reading Mode: Read notes from the interactive staff and play them on your instrument. The app listens and confirms when you hit the correct note.
- Ear Training Mode: Listen to a reference note and try to reproduce it.
- Real-time Pitch Detection: Uses your device's microphone to detect notes instantly.
- Instrument Support: Optimized for Guitar and Piano, with configurable tunings for guitar.
- Virtual Instruments: On-screen interactive guitar fretboard and piano keys for visual reference or touch input.
- Customizable: Adjust difficulty (range, accidentals), key signatures, rhythm/metronome settings, and more.
- Zen Mode: Distraction-free practice interface.
Getting Started
Prerequisites
- Node.js (v18 or higher recommended)
- npm
Installation
-
Clone the repository:
git clone https://github.com/9x/sheetmusictrainer.git cd sheetmusictrainer -
Install dependencies:
npm install -
Run the development server:
npm run dev -
Open your browser and navigate to the local URL provided (usually
http://localhost:5173).
Technical Details
100% vibe coded using Google Antigravity and Gemini 3 pro.
This project is built with:
- React + TypeScript
- Vite
- VexFlow (for music notation)
- Pitchfinder (for audio detection)
For more details on the architecture, see TECHNICAL_REALIZATION.md.
License
MIT