Guitar Chord Scale Chart

The app is a virtual instrument that displays the major scale in any given key over a standard guitar fretboard. It also shows how to play chords, spesifically triads.

Clicking on the appropriate button or directly on the fretboard itself with the mouse let you interact with the chart. You can also navigate more quickly using your computer keyboard.

How to Use the App

To establish the main key of the session, choose one of the six major keys in the drop down box. These are F, E, A, D, G or C major. Selecting the key change the seven diatonic rungs in the harmony part of the widget. The widget then displays the chords named according to those Roman numerals. Above this is a list of the scale tones for the selected key, which will be the major scale for the key you have chosen.

The fretboard highlights the notes when you tap one of the seven chord buttons (each button displays the note content, chord quality and Roman numeral). The fretboard will highlight the rung that you’ve selected and indicate where the 1st, 3rd and 5th is positioned on the strings. The sidebar also updates with the exact name of the chord, quality and intervals used in the selected chord.

Pressing the strum button will then play the selected chord voicing using a synthesised guitar sound (that’s the six string arpeggio path now visible along the neck). There are no external audio files used to generate the sound as it employs the Web Audio API. Alternatively, you can press any of the dots on the fretboard to play the note individually, which helps with intonation and finger placement. There’s also a button to play the arpeggios that walk through the strings of the chosen chord. This can be helpful if you want to become more aware of the intervals within the triad (root, third, fifth) and build finger independence while playing arpeggios.

Automated: Press the walk button to automate a progression through all seven diatonic chords. From the I to the diminished seventh the widget will strum each rung in sequence. The slider controls the tempo, so that you can speed up or slow down as needed for performing or studying. It also allows you to experience how the quality of each chord work in the bigger setting of the key.

Moving the diagram around the neck by selecting a voicing zone can make this easier to see. Selecting a position on the lower part of the neck puts the shapes close to the nut. The higher parts of the neck (upper and centre) place them further up the fretboard. These can then be used as reference points to see where identical chord tones occur in other positions. This is perfect when learning to join fretted shapes to open-string chords.

Toggle the dot labels to switch from notes to chord roles. In the chord role view, you see 1, 3 and 5, which shows the purpose of each note in the triad. This can be especially useful when reviewing the fretboard position and use of strings with certain chords. When looking at the note names view, you get the letter names of each note which helps the memorization process for particular pitches on strings. Moving back-and-forth between these views strengthens your physical recall as well as your understanding of how the theory apply.

A volume slider lets you control how loudly the synthesised sounds come out. Ranging from no sound at all up to maximum volume, it gives you some control over balancing the widget against any other media playing on your page (useful if you’re practising alongside someone else) or if you want to focus more on the visual chart than the audio.

To pause playback, press the mute button which will reset your dot’s on/off status on the fretboard and silence everything that was playing/scheduled to play. Nice if you have a looping section you can’t get out of or need to pause while walking up a progression. No menu diving required.

To learn more, click the how to play button to expand the help panel. It will display a quick overview of basic navigation and keyboard controls. It provides tips on starting out with the chord-scale ladder and summarizes keyboard mappings. When you’re comfortable enough to try without the text on screen, simply toggle the panel closed.

Navigate between chords using the arrow keys of your computer keyboard: the right arrow key selects the next chord in the progression; the left arrow takes a step back to the previous chord. Strumming is done by pressing the space bar. That way, your hands stays on the keyboard, so you don’t have to use the mouse when practicing progressions with these keyboard shortcuts.

One of the most frequent types of harmonic movement is called the I; IV. V, so try walking out this progression. Begin with the tonic, follow it with the subdominant, and then finally return to the dominant. What do you notice about the change of quality? It’s major. Major (major in a major key). It is a neat little loop that will help you embed the sound of diatonic harmony into your brain.

Try moving around different voicings areas on the neck and discover where your hand feels most comfortable. Certain chords may feel more natural in the center of the fretboard, while others might be easier to visualize near the nut. It won’t change the notes, only their physical placement on the diagram. This can help you in bridging the gap between theoretical knowledge and real life guitar playing.

At the foot of the ladder, listen to the diminished chord. This creates tension and release as well as pulling us strongly back towards the tonic. By walking through each of the seven chords like this, we can easily hear the functional relationship. In the widget, the diminished quality is shown by its specific interval and Roman numeral.

To really make the most of the fretboard display, you can use fullscreen mode. This maximizes the view on your computer screen by removing all the other clutter around the page. This is great for those with small screens when the detailed diagram can be a bit cramped. Clicking on the button again or the usual exit key from your browser will exit fullscreen.

Select C major for example and try out the I chord. Strum it. Then run up the arpeggio to get each note played separately. Listen to the difference with the minor chords as you use the arrow keys to step around them.

The idea of the widget is that you can hear and see how chords are related in a key and make practising more engaging and intuitive.