An interactive web app for brass players learning to read notes and find the matching slide or valve positions on their instrument.
Pick an instrument, step through notes on the staff with the keyboard, mouse, or touch, and see which position or valve combination produces the pitch.
| Instrument | Clef |
|---|---|
| Trombone | Bass |
| Horn (in F) | Bass |
| Tuba | Bass |
| Trumpet in C | Treble |
Available in German (default) and English.
- SvelteKit 2 + Svelte 5
- TypeScript
- Tailwind CSS 4 + DaisyUI
- svelte-i18n
- Vitest (unit) + Playwright (e2e)
@sveltejs/adapter-nodefor production builds
npm install
npm run dev # start dev server
npm run dev -- --opennpm run build # production build
npm run preview # preview the production build
npm run lint # prettier + eslint
npm run format # auto-format with prettier
npm run check # svelte-check type-checking
npm run test:unit # vitest
npm run test:e2e # playwright (expects the built app on port 4173)
npm run test # unit + e2eRun a single Vitest file:
npx vitest run src/lib/components/StaffSystem.svelte.test.ts- src/lib/positionBase.ts — core types,
InstrumentandScoreSystemenums, staff/position helpers - src/lib/instrumentPositions.ts — note-to-position data for each instrument
- src/lib/components/StaffSystem.svelte — SVG renderer for the staff, clef, notes, and accidentals
- src/lib/i18n/ — locale setup and translations (
de.json,en.json) - src/routes/ — file-based routing: home,
/instrument/[instrument]/[system],/about
See CLAUDE.md for deeper architectural notes and the steps to add a new instrument.
A Docker image is built and published to ghcr.io/chrisingenhaag/brass-notehelper on every merge to main via GitHub Actions. Semantic Release drives versioning and the CHANGELOG from Conventional Commits.
The container runs the Node adapter on port 3000:
docker run --rm -p 3000:3000 ghcr.io/chrisingenhaag/brass-notehelper:latestCreative Commons BY-NC-ND 4.0 — attribution, non-commercial, no derivatives.