See the Scale Generator website.
This is my code Louisville front end web project and first completely self made web project in which I came up with the concept and design on my own. It is inspired by similar resources, as well as a desire to teach music theory to my students. There are definitely similar resources out there and ones that are more comprehensive but this one served the inteded purpose as a learning experience for me and it may even offer a unique perspective to music students to showcase how scales work.
What this website does:
- Updates the DOM to display the musical alphabet of notes (the chromatic scale) from an array
- Reorders the array and updates the DOM based on user selected starting note.
- Allows users to select alternate scales -- major, minor, major pentatonic, and minor pentatonic -- and updates the DOM as follows
- Fades the notes that are not used in the scale allowing the user to see how the pattern of the chosen scale overlays the chromatic scale (musical alphabet)
- Displays a scale summary that includes only the notes used in the scale
- Displays the interval names (abbreviated) of the notes in the scale (compared to starting note) according to music theory naming conventions.
- Displays triads (all of the conventional groupings of three notes) within the scale.
Some ideas for additional features and increased functionality:
- Build functionality that will allow for future scale patterns to be added with greater ease
- Add more patterns - this would be easy but tedious unless I solve the above problem
- Add sounds to play the scale tones
- Add displays that would show fingerings/locations of notes on guitar and possibly other instruments
- Add a feature that would determine/display only the correct name of notes based on context driven note naming conventions