RéMusic is a high-fidelity, client-side virtual grand piano built with React and Tone.js. It leverages the renowned Salamander Grand Piano sample set (48kHz, 24-bit) to provide an authentic studio-quality experience directly in the web browser.
Unlike standard web instruments, RéMusic focuses on harmonic accuracy and extensible music theory, featuring an intelligent chord engine that allows for complex voicing with a single interaction.
-
Studio Quality Audio: Uses the full 24-bit Salamander Grand Piano sample library (~2GB) for authentic studio-quality sound.
-
88-Key Range: A fully mapped virtual keyboard from A0 to C8, powered by the
Pianocomponent. -
Intelligent Chord Engine:
- Diatonic Mode: Automatically plays the correct Major, Minor, or Diminished chord based on the selected scale (see
ChordEngineinsrc/utils/). - Advanced Voicings: Extendable support for
maj7,maj9,sus4,min11, and more.
- Diatonic Mode: Automatically plays the correct Major, Minor, or Diminished chord based on the selected scale (see
-
Pure Client-Side: No backend required. Audio processing and sample pitching happen entirely in the browser using the Web Audio API (Tone.js).
-
Velocity Sensitive Simulation: Leverages the multiple velocity layers of the Salamander set for expressive playback.
-
Customizable UI: Theme persistence via
ThemeToggle, with utility-first styling usingcn()for consistent design. -
Modular Architecture: Built with reusable components (e.g.,
Piano,Key,ChordSelector) and scalable music theory logic.
- Framework: React (via Vite) for fast, modular UI development.
- Audio Engine: Tone.js for high-fidelity audio processing and pitch-shifting.
- Music Theory: Tonal.js for chord/scale calculations (used in
src/utils/chordEngine.ts). - Styling: TailwindCSS with
cn()utility for consistent, theme-aware UI components. - Routing: React Router for seamless navigation between features.
- Developer Experience: AI-assisted development with Agent Guidelines for codebase navigation and contributions.
git clone https://github.com/TheSmoothRere/ReMusic.git
cd ReMusic
pnpm install
The Salamander Grand Piano samples are included in this repository for immediate use.
pnpm dev
For AI-assisted development, refer to the Agent Guidelines for:
- Codebase navigation (e.g.,
graphifyfor architecture queries). - Component management (e.g.,
shadcnfor UI components). - Contribution workflows.
RéMusic is built with reusable, modular components:
Piano: The core 88-key virtual piano (src/components/Piano.tsx).Key: Individual piano keys with velocity-sensitive interactions.ThemeToggle: Persists user theme preferences across sessions.cn(): Utility function for consistent TailwindCSS class merging.
The app uses a Tone.Sampler to map high-resolution files. To optimize memory, we map the piano in minor thirds (C, D#, F#, A), allowing Tone.js to perform high-quality pitch-shifting for the intervals between.
The chord engine (src/utils/chordEngine.ts) is scale-aware and transforms root notes into harmonic voicings:
-
Major:
$[0, 4, 7]$ -
Minor:
$[0, 3, 7]$ -
Maj9:
$[0, 4, 7, 11, 14]$
Uses react-router-dom for seamless transitions between features (e.g., piano view, settings).
This project is licensed under the MIT License. The Salamander Grand Piano samples are provided under the Creative Commons Attribution 3.0 license by Alexander Holm.
- Release Samples: Implement mechanical damper samples for realistic decay.
- Sustain Pedal: Add Spacebar support for sustain functionality.
- Web MIDI API: Enable physical keyboard integration.
- Custom Effects: Add reverb and room resonance settings.
- MIDI Export: Allow users to export performances as MIDI files.
- Roadmap items are designed to extend the existing
PianoandChordEnginecomponents. - Theme persistence (
ThemeToggle) will apply to new UI controls (e.g., reverb settings).