Guitar Chord Chart Fretboard

It’s a guitar chord fretboard widget: a quick reference tool designed to help you see and hear commonly used open-position chords in standard tuning. Use your computer keyboard for a more hands-on experience (as if you’re strumming) or just click around with your mouse/trackpad. The idea is to bridge gap between static chord diagrams and real sound.

There are two sections. On the left-hand side, you have a diagram of the current chord that clearly marks the five frets where each finger should go. To the right, you have a grid of nine popular chords: C, A, G, E, D, Am, Em, Dm, and F. Clicking on one of these cards will change the sound engine and the diagram actualy accordingly.

How to Use the Guitar Chord Widget

Just click on a dot representing a string marker or fret and you’ll hear the note of that particular string/fret. Clicking will play the pitch of each note individually which is great if you want to learn how to position your fingers, string-by-string, or just see inside a chord’s structure. The bottom status bar on the diagram show the frequency information and the note name of what you selected.

To hear the same chord played as an arpeggio, try using the Brush the chord button. All of the active strings are sounded quickly one after another starting on the low E string through to the high e string. Think of it like doing a quick downwards strum and hearing the resolution of the chord. The damp strings button will stop the sound at that moment. It clears the current audio buffer and mutes all active oscillators.

The slider that says Body resonance controls the volume. Pulling on this slider will increase or decrease the volume of what comes out of the widget. If you have the widget playing somewhere where other people might hear it, you can pull down the volume so others don’t hear it as well. If you want to pick up on the subtleties of the wave form, you can crank the volume up. It’s not going to jump sudden in volume or click, just a smooth progression from one to the other.

You can also use a keyboard to control it, so you don’t need to touch the mouse at all. Use the left and right arrow keys to go through the available chord shapes from the library. This means you can keep your hands on the keyboard and rapidly compare voicings. The Space bar is used to turn the strum effect on or off for the current chord selection. The D key will dampen the strings and silence the sound. The interface has some additional keyboard shortcuts that make controlling it easier.

There’s one (H) for opening and closing the help panel where you can get a quick rundown of the tunings and what all the controls do. There’s another (F) to go into and out of full-screen mode, which will take up more of your screen so you can see it better when studying the fretboard patterns. The idea is to let you work without interrupting your workflow.

You will notice that the chord diagrams includes finger numbers to guide your placement. These represent which finger goes on which string. The number 1 represents the index finger, 2 represents the middle finger, 3 represents the ring finger, and 4 represents the little finger. A circle indicates an open string while an X marks muted strings. This is how chords would be notated in common guitar tablature. You should easily be able to transfer what you read in this article onto your own instrument.

Isolate troublesome chords by clicking on each individual note instead. For the C chord, you could start with the E string at the top of the neck and hear what that sounds like. Then, jump down to the A string to hear the distance from one note to another. It is building your finger memory as well as developing ear training. Alternating the single note pluck and the brush strum will show you the way the notes mix.

Minor variations on major chords can be looked at in the library. Try a C major, then an Am for example; notice the change of root note but also that the basic shape is still there. Compare the dark tones of Em with the brighter G major. All this will begin to build the harmonic relationship between commonplace chords.

Underneath, there’s a straightforward audio engine that produces the sounds of the guitars. It’s built with oscillators and filters that produce the sound of an acoustic string, including its tone and decay. Although not a faithful imitation of any one instrument, the sound has been tuned to make it clear and educational, which in turn should help you pick out the notes in a more complicated voicing.

On small screens, fullscreen is especially nice because it clears away all the other stuff around the page. It puts the fretboard front and center so you can see and work with the diagram without distraction. To get out of fullscreen, simply press the F key or click on the button. That way you can use this wherever you like in whatever space you have available.

Begin with a simple major chord such as C or perhaps G, listen to it all strummed through, then pick it out note-by-note in order to get the layout of the chord in your head. You can also practice other chords and see which voicing(s) are easiest for you to picture. This is a learning sandbox widget, so go ahead and click around and see where they relate on the fretboard. You should of tried it out.