Fretboard and Chord diagrams using javascript, SVG, D3, Vue, React, Vexflow or Paper JS.
I am looking to build various guitar fretboard diagram views for chords and scales for a website. You should ideally have a basic understanding of music and a stringed instrument in particular. I would like a vertical view and horizontal view for chord diagrams (typically 5-7 frets), and a vertical and horizontal view for fretboard diagram (typically 12-17 frets).
First, we should start with being able to produce a diagram of a chord for an instrument with n-strings in any tuning. The database I currently have is built for 6-string guitar in standard tuning.
I have a chord database in Excel that looks like this.
Key,ChordType,Frets,Frets-join...Fingering,Fingering-join
A,maj7,x,0,2,1,2,0,x-0-2-1-2-0...
I also have a scale dictionary that looks something like this containing the intervals.
'Major', ['1', '2', '3', '4', '5', '6', '7']
'Melodic Minor', ['1', '2', 'b3', '4', '5', '6', '7']
'Natural Minor', ['1', '2', 'b3', '4', '5', 'b6', 'b7']
I want to easily be able to draw a tabular chord diagram by providing those details - key, chord type, frets. I will add fingering data later, which can just function as labels for now. Strings and frets will be drawn with simple lines, and fret positions will be drawn with dots that have the ability to hold a label.
A) I want to be able to provide a default tuning for the open strings, for example, standard tuning with open strings E-A-D-G-B-E, and for the javascript to either be able to calculate the note names, or look it up from the csv file, or a derivative thereof.
B) I would like the chord diagram to be able to display: Key + Chord Type, Note names, Intervals, and Fingerings, ideally depending on where I want to put them. As a header for the chord the Key + Chord Type should be displayed. Below that, for now, the default should be note names at the top of the chord diagrams. Intervals are to be shown on the dots given by the fret number. Below the diagram it should show the fingers to be used for each string. I want to be able to change the settings if I want to, for example, if I wanted to show the fingering on the dots, and the intervals on the open string section, and the notes on the bottom of the chord diagram.
C) There should be an option to show the first fret number either on the left or the right of the chord diagram.
D) There should be a 'lefty' option available which flips the chord diagram vertically, so the open strings are in reverse order.
E) The key should have a marker - a circle with another circle around it, or square - that makes it stand out and you should be able to modify the colour of the shape, a common default colour is red, but should be flexible. It might also be good to asign a colour to each of the 12 possible notes in Western music. We can experiment with different colour schemes later, based on user selection.
F) If a scale or chord formula is provided, those dots which are not the key should be marked in gray as a default, but also a modifiable colour.
G) Once we have some fingering information, it might also be good to be able to draw barre chords, which join consecutive spaces on the same fret if the finger number is the same. This is optional at the moment, as the finger information is indicative enough.
Keep in mind, I want it to be easy put multiple chord diagrams and fretboard diagrams side by side in an interactive way if possible. For example, I might want to select an ii-V-I progression, in the Key of C: Dm7-G7-Cmaj7 and filter those chords which are on the string set 4-3-2-1. It would be cool if you could drag and drop from a list of fret positions onto page.
If we advance far enough, I would like to set various filters for the search of chords - like the number of strings used, numbers of fingers required, type of voicing (eg drop 2, drop 3), smallest fret position, average fret position, largest stretch and so on)
For good examples of what I want to build check out the following websites and github repositories. We don't have to start from scratch if you are able to adjust the JS, css files etc.
About the recuiterMember since Sep 16, 2017 Aidenv Michael
from Nordjylland, Denmark