Virtual Guitar
Online guitar with chord finder
About this project
How to play
You can click/tap on the fretboard to play single notes, or hover/click the bridge to play multiple strings.
Playing on the fretboard will mark the frets, and playing on the bridge will play the strings as they are fretted. The arrow button on the bridge toggles the current strum direction (down or up). Strings can be muted with the buttons on the far left of the fretboard.
Chord finder
If the currently fretted strings match a chord, the chord name(s) are displayed in the upper left.
The chord finder is a work in progress. At the moment, the notation doesn't always follow conventions for naming guitar chords.
Motivation
Coming from a musical background that is strongly influenced by piano, I wanted to explore guitars in more detail, especially how to build a realistic fretboard layout.
Coding the chord finder is a particularly interesting challenge, requiring a deep dive into musical theory.
Tech
The app was built with ReactJS. Sounds are created with AudioSynth.
Repository: github.com/jsdisco/projects-guitar
Blog
A detailed description of how to build this project can be found in a 5-part-series of tutorial articles on my blog:
Build a Guitar with Reactjs (1): Intro, setup and guitar body
Build a Guitar with Reactjs (2): Guitar Sounds
Build a Guitar with Reactjs (3): Fretboard-SVG