Add support for barres to renderChord()

[moonwave99]

Proposed signature:

renderChord(
  chord: string,
  barres: {
    fret: number;
    fromString: number;
    toString: number;
 }[];
): { ...}

[Aduffy]

I assuming that chords string would be something like "0,2,2,1,x,x"

I have seen a few different formats for the string, to accommodate above 9th fret, some using 123456789ABCD... others using the comma separated above. My preference would be comma separated.

It would be nice if the chord could also except a more detailed object as well

    notes: [
      { string: 6, fret: 3, finger: 1, note: 'G', interval: "P1" },
      { string: 5, fret: 5, finger: 3, note: 'D', interval: 'P5' },
      { string: 4, fret: 5, finger: 4, note: 'G', interval: 'P1' },
      { string: 3, fret: 4, finger: 2, note: 'B', interval: '3M' }, 
      { string: 2, fret: 3, finger: 1, note: 'D', interval: 'P5' }, 
      { string: 1, fret: 3, finger: 1, note: 'G', interval: 'P1' }
    ]

This way each dot could take advantage of the style() function to display fingering, note or interval ...

That said, I guess fretboard.js could automatically add the note and interval (assuming the root is provided) so maybe you just need string, fret, and finger?

I am contemplating building my own chord database as the existing ones out there are either not maintained and/or contain a lot of errors. There are some nice automated scripts to find potential chord shapes but none that add recommended fingerings as well. I also think there needs to be some level of human review for both fingerings and playability....

My thought was to use automated tools to generate all technically viable chord shapes, and then have some human review process to add fingerings and maybe playability score..

Here is my proposed structure.
https://github.com/Aduffy/Stringed-Chord-Structure

A few other comments;

1. a chord is made up of either individual fingered notes (dots) and / or barred notes. To use 'chord' to define only the individual notes with in the chord seems wrong to me. Perhaps use 'dots' as in the rest of fretboard or 'notes'?

2. Add optional root to calculate intervals

3. Probably need an (optional) Title and maybe starting position?

renderChord(
  title:string,
  root: string,
  dots: string or object,
  barres: {
    fret: number;
    fromString: number;
    toString: number;
 }[];
): { ...}

[moonwave99]

Well, the (existing) shorthand accepts x32010 as syntax. The use case was to enhance teaching material with diagrams on hover, because <span data-chord="x32010">C major</span> is easy to edit and maintain, as opposed as the verbose object structure.

For more complex cases, the existing setDots(dots).render()workflow is fine I think.

All in all, is there that much value in chord diagrams? If you are a beginner you can't play most of them, while if you are intermediate/advanced you should think less in shapes and more in actual notes you are playing and the relationships between them, and most of all about how to link to the next chord.

Actually I started this project to escape the chord/tab based material you find online, that is great for beginning / learning songs, but feels like a crutch when you want to develop your own independence.

TL;DR I do not plan to add much more support for chords (we are talking about rendering 4/5 dots ^^), but any contribution in form of a PR is mostly welcome of course!