Music Maestro

Web app

React

Vite

Vercel

Web application designed to help teach those new to sight reading and music theory.

More about this project

Built using libraries such as Vexflow and Webmidi to handle staff generation and reading external MIDI inputs from compatible devices.

Sight reading drills were made using Zustand to handle rapidly changing game state in a graceful and percise way. Zustand stores are used to handle states such as score, options, timers, and input devices

Using the browsers native AudioPlayer API and piano samples, midi playback can be turned on in the app to allow for the corresponding piano sound to play in the sight-reading drill

User config can be used to customize sight reading drills as well as allowing and modifying the MIDI playback option.

Used Resources

Vex Flow: https://www.vexflow.com/

Web Midi: https://webmidijs.org/

Zustand: https://github.com/pmndrs/zustand

Salamander Piano Samples: https://github.com/darosh/samples-piano-mp3