See this project live via GitHub Pages
This is a playable browser-based 24-key Piano that includes tutorials on how to play the major chords in the Circle of Fifths.
- The tutorial button for each major chord highlights the keys that make up the chord.
- The reset button returns all of the keys to normal.
- Created using HTML, CSS, and JavaScript to control the audio and the tutorial mode functionality.
The original concept of the piano is based on a tutorial from WebDevSimplified. After doubling the amount of available piano keys compared to the original tutorial, I implemented the Circle of Fifths elements into this version by writing custom JavaScript functions to map highlighted keys to the different major chords and used custom CSS styling with accessible color contrasting for highlighting and labelling the keys with the corresponding notes.
Future possibilities for improvement:
- Making the Circle of Fifths tutorial mode more feasibly playable with the assistance of a screen reader.
- Updating the layout to be responsive for a landscape-oriented mobile device.
Credits: WebDevSimplified/JavaScript-Piano | u/SingleInfinity | "Here's some midi and mp3 files for individual notes. from a3-a6, inclusive." | Reddit