This page feature an interactive chart for B-family guitar chord that works on any guitar in standard tuning. Simply click (or tap if using a track pad) and the chart will help you explore all shapes. It includes options for playing it back so you can hear what it sounds like in context too. It also show you where your fingers should go.
If you’d prefer a quicker workflow, you’ll be pleased to learn that you can play the chart using your computer keyboard. If you like navigating with your keyboard then that’s easy too. You simply use the left/right arrow keys to go backwards/forwards through available chords. So you can cycle through pretty quickly without having to grab your mouse.
How to Use the Guitar Chord Chart
Strumming all of the notes on an active string at a time happen when you hit the spacebar to hear what chord is playing. Alternatively, click the Arpeggio button to play one note after another. This will help with finger independence.
Here you have a diagram of your chosen chords shown on the main display screen. The horizontal lines are frets and the vertical ones are six strings on a guitar. The dot numbers shows where to place your fingers, with one being your index finger and four being your pinky. If there’s an open circle above a string then don’t press this string down, just let it ring out. If there’s an X then don’t sound this string either, mute it instead.
Beneath the main diagram, you’ll see another row of boxes showing what note is played on each string (in tablature form). This gives you the option of viewing your tabs both ways which will hopefully help you connect the two forms of notation.
There are a few additional buttons and sliders for controlling audio output. These include: A strum produces a single sound from the combined strings, like sweeping your hand along the neck of the guitar. An arpeggio breaks this string down to each note individually with a low-to-high-string sequence. Next to those playback controls is a volume slider. It lets you immediately dial the master output up or down depending on whether you need quiet practice at home or don’t want the audio to distract you while visually learning something new.
If you want an even bigger look at a diagram, there is a way to borrow some extra screen space. If you click on the Fullscreen button, it will expand the widget to take up whole monitor. This is perfect for a tablet or small laptop where the chord shapes are difficultly to see with other distractions going on. To get out of fullscreen just click the same button again and it will shrink back down to normal size.
There’s also a How to play button. If you’re not sure how to read notation, it toggles a help panel in the widget that explains what each symbol means and reminds you which number corresponds to which finger.
This is where it becomes important to both hear and see the change. If you choose a barre chord such as B major, see if you can hear the difference between the sound of that barre chord arpeggiated than being played as a strummed chord. Then try changing from a major shape to its minor counterpart and notice how it alter the mood instantly.
It may be useful to learn more about tension in progressions that cycle through suspended chords such as Bsus2 or Bsus4. And don’t forget to glance down at the tab row below for where your fingers should go; it will become invaluable once moving around more complicated shapes.
The styles are designed with dark mode in mind, and if you switch your system preference to dark mode then the chart will automatically adjust as well. So you can practice late at night or during day without straining your eyes.
Because it’s all in one cohesive interface, the interface remains consistent across devices, so your muscle memory for navigating the grid will translate perfectly from desktop to mobile screens. Everything works right in your browser window; there are no extra plugins or anything else necessary.
Once loaded with any given voicing in the lower section, simply tap around the grid of chord choices and listen to the audio clues for each one. Notice the variations include open string, partial barre and full barre techniques on certain chords. You’ll hear the difference between dominant sevenths, major sevenths and diminished variations.
Hearing these will solidify the theory behind these shapes, and each variation add a new color to your playing palette. Keep practicing each one until you’re happy with fingerings. If you are getting used to the layout, use the keyboard shortcuts which will speed up the process for you.
What you want to do is make the visual image on the screen relate to what sounds like in your ears. When this click happens, it makes it much simpler to move these ideas over to a guitars actual neck.