Guitar tab/chord diagram

[zhouhao27]

Is abcjs support guitar tab and chord diagram? Thanks.

[paulrosen]

I'm sorry, not yet.

It would be a bit of work, but you could hack the chords yourself:

• Set the gchord font to something large that takes up the amount of space you want.
• After the music renders, look for elements with .abcjs-chord and get their innerText. That will be the chord, and replace that element with your diagram.

I'd love to have this implemented, but it will be a while before I get around to it.

[chrisfargen]

Is abcjs support guitar tab and chord diagram? Thanks.

I agree that supporting tab and chord diagrams would be a great feature. For others seeking to use abcjs for tablature, here's a hacky workaround: use the ABC-native w: keyword reserved for song lyrics. Note: normal hyphens (-) have special meaning when following the w:, but you can use en dash (–), em dash (—), or tilde (~) to fill the space between notes.

Using en dash (preferred method):

%%vocalfont 14
K: Cmaj transpose=-12
% STANDARD NOTATION
B,CEG Bceg | b_bag ecAG
% GUITAR TAB
w: – – – – – – – 3 | 7 6 5 – – – – –
w: – – – – – – 5 – | – – – 8 5 – – –
w: – – – – 4 5 – – | – – – – – 5 – –
w: – – 2 5 – – – – | – – – – – – 7 5
w: 2 3 – – – – – – | – – – – – – – –
w: – – – – – – – – | – – – – – – – –

[chrisfargen]

I've been working on this problem some more. If I were a more ambitious coder, I might try to integrate a parser that could read Jtab. The solutions here would involve a more succinct tab notation system than the ready-made, plain-text solutions in my previous post, but they would take more work to implement.

ABC + Jtab (popular tab notation system):

%%vocalfont normal
K: Cmaj transpose=-12
% STANDARD NOTATION
B,CEG Bceg | b_bag ecAG
% GUITAR TAB (Jtab notation)
w: $5.2 3 $4.2 5 $3.4 5 $2.5 $1.3 7 6 5 $2.8 5 $3.5 $4.7 5

Rendered ABC:

Rendered Jtab string (see live Jtab editor):

---

ABC + Marktab (less robust notation system)

%%vocalfont normal
K: Cmaj transpose=-12
% STANDARD NOTATION
B,CEG Bceg | b_bag ecAG
% GUITAR TAB (Marktab notation)
w: 5:2 3 4:2 5 3:4 5 2:5 1:3 7 6 5 2:8 5 3:5 4:7 5

Rendered ABC:

Rendered Marktab string (see live Marktab editor):

[paulrosen]

That's an interesting approach. You could also include {use_classes: true} in the call to abcRender and have the css:

.abcjs-lyric {
  display: none;
}

[chrisfargen]

Update: As of this month, abc2svg natively supports the syntax below using %%strtab. See here.

FYI, here's how abc2xml does tablature.

X:
T:
%%score [ 1 | 2 ]
L:1/8
M:4/4
K:Cmaj
%
% STANDARD NOTATION
V:1 treble transpose=-12
B,CEG Bceg | b_bag ecAG ||
%
% GUITAR TAB
V:2 tab octave=-1 nostems
!5!B,"^⚓"!5!C!4!E!4!G !3!B!3!c!2!e!1!g | !1!b!1!_b!1!a!2!g !2!e!3!c!4!A!4!G ||

For tab written in this way, note pitches are specified via classic ABC. The command line utility abc2xml calculates the proper string/fret for each note, and the algorithmic string/fret decisions can be overridden using !1! - !6! for strings 1 - 6, respectively.

Just thought I'd share this clever solution.

(Image generated via abc2xml → xml2abc → abc2svg)

[chrisfargen]

Another great feature from abc2svg is the ability to include chord diagrams. There are default chord grips for most chord symbols, but the fingerings and shapes are user-configurable. You can include chord diagrams manually by using %%deco to bind the postscript function responsible for drawing a chord diagram (e.g., /C7) to a decoration (e.g., !C7!; example here). Or you can use %%diagram 1 to auto-populate the score with chord diagrams, as in the example below.

Code for sample image here.

Original code here.

[chrisspen]

@chrisfargen That looks really interesting. Have you seen any way to also include finger numbers? An incredibly useful notation I've seen is to put finger numbers in circles underneath the tabs. That removes all ambiguity from tablature.

[chrisfargen]

Hi @chrisspen,

I would use w: and the special characters that are numbers in circles, but that might not work everywhere.

You could do that in abcjs with the hack described above.

%%vocalfont 14
K: Cmaj transpose=-12
% STANDARD NOTATION
B,CEG Bceg | b_bag ecAG ||
% GUITAR TAB
w: – – – – – – – 3 | 7 6 5 – – – – –
w: – – – – – – 5 – | – – – 8 5 – – –
w: – – – – 4 5 – – | – – – – – 5 – –
w: – – 2 5 – – – – | – – – – – – 7 5
w: 2 3 – – – – – – | – – – – – – – –
w: – – – – – – – – | – – – – – – – –
w: | |
w:① ② ① ④ ③ ③ ③ ① | ④ ② ① ④ ① ① ③ ①

Here is how i would do it in abc2svg:

%%strtab
X:
T:
%%score [ 1 | 2 ]
L:1/8
M:4/4
K:Cmaj
%
% STANDARD NOTATION
V:1 treble transpose=-12
B,CEG Bceg | b_bag ecAG ||
%
% GUITAR TAB
V:2 tab octave=-1 strings=E2,A2,D3,G3,B3,E4 nostems 
!5!B,!5!C!4!E!4!G !3!B!3!c!2!e!1!g | !1!b!1!_b!1!a!2!g !2!e!3!c!4!A!4!G ||
w:① ② ① ④ ③ ③ ③ ① | ④ ② ① ④ ① ① ③ ①

[leocaseiro]

Seems that tabs are implemented https://paulrosen.github.io/abcjs/visual/tablature.html

[janvainer]

Hi @paulrosen, are there possibly any plans to give official support to the chord diagrams in the near future?