mirror of
https://github.com/9x/sheetmusictrainer.git
synced 2026-09-02 09:34:33 +02:00
49 lines
2.8 KiB
Markdown
49 lines
2.8 KiB
Markdown
# Technical Realization
|
|
|
|
## Architecture Overview
|
|
|
|
The **Sheet Music Trainer** is a client-side Single Page Application (SPA) built with **React** and **TypeScript**, powered by **Vite**. It is designed to run entirely in the browser without a backend server, allowing for low-latency audio processing and interactivity.
|
|
|
|
### Key Architectural Choices
|
|
|
|
1. **Component-Based UI**:
|
|
- The application is structured into reusable components (e.g., `SheetMusic`, `Fretboard`, `PianoKeys`, `Controls`) to maintain separation of concerns.
|
|
- State management is primarily handled via React's `useState` and `useReducer` at the `App` component level, with props drilling for simpler hierarchies.
|
|
|
|
2. **Audio Processing**:
|
|
- **Pitch Detection**: Utilizes the `pitchfinder` library (YIN algorithm) to detect pitch from the user's microphone in real-time. This processing happens in a dedicated hook/worker to keep the main thread responsive.
|
|
- **Audio Synthesis**: Uses standard Web Audio API for generating simple tones (sine/triangle waves) for playback and feedback.
|
|
|
|
3. **Music Rendering**:
|
|
- **VexFlow**: The standard library for rendering music notation on the web. It is used in the `SheetMusic` component to draw the staff, notes, clefs, and key signatures dynamically based on the current state.
|
|
|
|
4. **Responsiveness**:
|
|
- The application uses CSS variables and media queries to adapt to different screen sizes, with specific optimizations for mobile landscape mode to support instrument practice on tablets and phones.
|
|
|
|
## Frameworks and Libraries
|
|
|
|
### Core
|
|
* **[React](https://react.dev/)**: The library for web and native user interfaces.
|
|
* **[TypeScript](https://www.typescriptlang.org/)**: Strongly typed JavaScript for safer development.
|
|
* **[Vite](https://vitejs.dev/)**: Next Generation Frontend Tooling for fast development and building.
|
|
|
|
### Audio & Music
|
|
* **[VexFlow](https://www.vexflow.com/)**: A JavaScript library for rendering music notation and guitar tablature.
|
|
* **[Pitchfinder](https://github.com/peterkhayes/pitchfinder)**: A collection of pitch detection algorithms for Javascript. used for detecting the note played by the user.
|
|
|
|
### UI & Icons
|
|
* **[Lucide React](https://lucide.dev/)**: A clean and consistent icon library for the interface.
|
|
|
|
## Directory Structure
|
|
|
|
```
|
|
src/
|
|
├── components/ # Reusable UI components (SheetMusic, Fretboard, etc.)
|
|
├── hooks/ # Custom React hooks (usePitchDetector, useAudioPlayer, etc.)
|
|
├── music/ # Music logic, tuning definitions, and note utilities
|
|
├── styles/ # Global styles and component-specific CSS
|
|
├── assets/ # Static assets
|
|
├── App.tsx # Main application logic and layout
|
|
└── main.tsx # Entry point
|
|
```
|