Musischolar (WIP)

Web application meant to store interactive conservatory notes.

Check the demo!

Table of Contents

1. About The Project
   • Built With
2. Roadmap
3. See Also

About The Project

ReactJS app meant to store interactive conservatory notes using Chakra-UI. The music sheets are rendered into SVG with Verovio using custom MEI files (XML-based music encoding). Verovio is also capable of producing MIDI files that are played using Tone.js.

This is still a work in progress.

Built With

• 
• 
• 
• 
• 
• 
• 
• 
• 

(back to top)

Release Roadmap

• Basics
  • Render MEI files into SVG using Verovio
  • Create basic components for music SVG and relevant information display
  • Render MEI files into MIDI
  • Play MIDI files using jzz.js library
  • Visualize MIDI playing on sheet
• User Preferences
  • Create global Dark/Light mode toggle
  • Create global tempo selector as slider
  • Create global tonality selector
• Navigation
  • Responsive App Shell
  • Implement React Router
  • Nested Routing algorithm
• Quality
  • Grant responsiveness
  • Verify accessibility
  • Migrate from JZZ to Tone.js
  • Improve Performance
  • Improve on-sheet MIDI visualization (currently disabled)
  • Re-implement playback speed modified (currently disabled)
  • Change playback synthetizer into more realistic instrument
  • Progressively hydrate page
  • Review adherence to React/JS patterns
  • Automate testing (Vitest/JEST)
• Hosting
  • Set up GitHub Pages
  • Automate build deployment

• Low Priority features and Enhancements (Post-release):
  • Match mouse coordinates and note id (for on-demand midi playback repositioning or highlighting).
  • Enable marking cards as favourites to see all of the selected ones in a single page.
  • Conditionally display an additional single-lined staff with ghost notes representing beats.
  • Change mode toggler's hover and click animations to give proper sunset and sunrise appearance.
  • Tonality selector as wheel menu (fifths circle).
  • AppShell fixed footer as piano keyboard, showing played notes acording to MIDI.
  • Sinusoidal chart with note frequencies in Harmony class' notes.
  • Multi-language support.

(back to top)

See Also

• Music Encoding Initiative (MEI) - About the Music Encoding Initiative
• Project's MEI file repository - Custom MEI files used in the app.
• W3C Quick reference - Web Content Accessibility Guidelines (WCAG)
• Dyslexia friendly style guide - Guidelines to facilitate ease of reading from the British Dyslexia Association
• patterns.dev - Design, rendering, and performance patterns for React and vanilla JavaScript

(back to top)