Melodict is an ear training web app focused on melody dictation. The user listens to a melody and attempts to write it down via an interactive sheet music editor.

The backend side of Melodict is built using Ruby on Rails, and utilizes the following gems:

• Devise, for authentication
• Pundit, for authorization
• PostgreSQL, for database
• Cloudinary, for files cloud storage

On the frontend, Melodict uses

• Bootstrap and Sass for styling
• Stimulus, for user interactions
• vexflow to display the sheet music
• ToneJS for audio feedback

Sound is played when the user:

• listens to the question
• interacts with the sheet music
• plays back her own melody

Sound is generated using the JavaScript synthesizer ToneJS, and ToneJS/piano.

The user plays the game by inputing her answer on the sheet music using the keyboard keys. Keyboard shortcuts are accessible via the help button. The sheet music display is generated using VexFlow. VexFlow allowed us to generate an SVG representation of the sheet music. Then, we wrapped the SVG DOM inside a Stimulus controller. This controller allowed us to:

• handle user interactions (clicks and keyboard presses) with the SVG elements
• update and redraw the SVG as the user modifies the music
• apply CSS styling to SVG elements to reflect user interactions and audio-visual feedback