JavaScript Piano Application

Overview

This project is a JavaScript-driven piano application that provides an interactive virtual piano keyboard with information about scales, fingerings, and notes for 28 different scales in all keys. The application utilizes VexFlow JS for handling musical notes. The hope is to host this on my portfolio website as a free resource for people looking to learn piano scales.

Features

1. Interactive Keyboard: Users can change what key and scale is displayed on the virtual piano keyboard.
2. Scale Information: The application displays information about scales, fingerings, and notes.
3. VexFlow Integration: VexFlow JS is used to accomplish musical note rendering.

Scales Included

The application supports the following 28 scales, each providing a unique musical flavor:

1. Major Scale: The fundamental and widely used scale, known for its bright and happy sound.
2. Natural Minor Scale: A common scale with a more somber and melancholic feel than the major scale.
3. Harmonic Minor Scale: Features a distinctive minor scale with a raised seventh degree, creating tension and intensity.
4. Melodic Minor Scale: Alters the sixth and seventh degrees when ascending, creating a unique sound.
5. Dorian Mode: A minor scale with a major sixth degree, often used in jazz and blues.
6. Phrygian Mode: A minor scale with a lowered second degree, offering a mysterious and exotic vibe.
7. Lydian Mode: A major scale with a raised fourth degree, producing a dreamy and ethereal quality.
8. Mixolydian Mode: Similar to the major scale but with a lowered seventh degree, creating a bluesy sound.
9. Locrian Mode: A diminished scale with a lowered second, fifth, and seventh degrees, known for its dissonance.
10. Pentatonic Major Scale: A simple, widely used scale with five notes per octave, offering a pleasant and open sound.
11. Pentatonic Minor Scale: A minor version of the pentatonic scale, versatile and popular in various musical genres.
12. Blues Scale: A variation of the pentatonic scale with an added flattened fifth, commonly used in blues music.
13. Whole-Tone Scale: Consists entirely of whole steps, providing a unique and symmetrical sound.
14. Chromatic Scale: Includes all twelve pitches, offering maximum musical freedom and expressiveness.
15. Augmented Scale: A symmetrical scale with a major third followed by an augmented second, creating tension.
16. Diminished Scale: Alternates whole and half steps, often used for its symmetrical and ambiguous quality.
17. Prometheus Scale: A seven-note scale with a major third, augmented fourth, and augmented sixth.
18. Tritone Scale: Built on the tritone interval, known for its unstable and dissonant character.
19. Enigmatic Scale: A mysterious and unconventional scale with a unique pattern of intervals.
20. Double Harmonic Scale: A scale with augmented steps, producing an exotic and oriental sound.
21. Neapolitan Major Scale: A major scale with a lowered second degree, offering a distinctive flavor.
22. Neapolitan Minor Scale: A minor scale with a lowered second degree, creating a dark and rich atmosphere.
23. Major Blues Scale: Combines elements of the major scale and the blues scale for a soulful sound.
24. Minor Blues Scale: Melds elements of the natural minor scale and the blues scale, perfect for blues and jazz.
25. Exotic Scale: A unique and unconventional scale that adds flair and intrigue to compositions.

Code Structure

JavaScript

The JavaScript file handles note generation, scale highlighting, and VexFlow integration.

CSS

Styles are organized to achieve a visually appealing design.

HTML

The HTML structure includes the piano keyboard and scale information layout.

Usage

Setup

1. Clone the repository.
2. Open the index.html file in a web browser.

Dependencies

• VexFlow JS

Future Improvements

1. Enable the keyboard to display scales and fingerings for 1 and 2 Octaves (Implemented in Multiple-Octaves_After-Main-Refactor Branch Not merged into Main yet)
2. Adjust formatting and page layout of buttons, vexflow and piano for readability
3. Create Dark Mode toggle button
4. Add the ability to click the scales to hear the notes (Theoretical Improvement)
5. Host on profile website as a free resource for people learning piano.

Contributions

Currently, we are not accepting contributions to this project. This may change in the future. If you have suggestions or find issues, feel free to open an issue, but please note that we may not actively review or merge pull requests.

Thank you for your understanding.

Conclusion

Thank you for exploring our JavaScript piano application. We hope you enjoy experimenting with different scales and discovering the diverse world of musical possibilities!