paulrosen / abcjs

javascript for rendering abc music notation
Other
1.9k stars 281 forks source link

Aligning Bars? #243

Open benlieb opened 5 years ago

benlieb commented 5 years ago

What are my options for aligning bars? I'm experimenting with using ABC for Jazz charts, that won't necessarily have melody.

The New Orleans grid chart is popular in early trad jazz communities and iRealPro renders these really well:

image

There seems to be a %%grid option in abc but I haven't seen a GUI that can support it.

Experimenting in EasyABC I got the following. Not great, but a start:

image

EasyABC responds to %%alignbars but not %%equalbars but abcjs doesn't seem to respond to either...

What are your recommendations?

paulrosen commented 5 years ago

abcjs doesn't currently support what you describe. Is your first choice the look of iRealPro? Without a staff at all, just chords? Or is the important thing for you having the bars line up?

I play in a trad jazz group and we've been using charts that are just 4 measures per line with chord symbols - the bar lines don't line up, but they pretty easy to read and no one minds them.

benlieb commented 5 years ago

I'm a developer and appreciate the power of text-based data and processing. I also enjoy playing different types of music (oldtime, french canadian, jazz, trad jazz, folk, blues, etc). I've tried over and over again to turn to abc to see if I can make it work for me. I end up spending days each time trying to get something versatile and useful, but always end up so frustrated and disappointed. The abc "community" seems so fractured, the tools so unreliable and unpredictable, and user-unfriendly (even to a software engineer) and the standards only partially implemented. When I saw your library in javascript and hosted on npm, my spirits lifted and I tried again. But again, I couldn't quite get what I wanted.

As for jazz charts, I really can't accept measures that don't line up. The cognitive dissonance and extra work required to parse the information, and the errors that it can lead to just aren't worth it. And I don't really need the staff most of the time, but can appreciate having it when needed. The most frustrating part is many of the things I want seem to be possible in the abc spec. There's even a tool abc2svg that claims to make chord grids, but I haven't been able to make it work:

image

Also, I've been interested in thinking about and representing music numerically in the last several years. I was hoping ABC would have an option for that (iReal pro does). I've made some progress recently trying to use a simple text format that I display on my personal chart app. It's just a mono font:

image

image

I was hoping to convert the charts on the app above to abc to be able to transpose and manipulate the charts, but I haven't come up with a rendering that I like better.

I'm just blathering on at this point, but I feel sad that I can't find a way to use abc more.

chrisfargen commented 4 years ago

I would like to +1 this request to support %%equalbars 1, currently supported in abc2svg.

Set the same width of all measures in a line

For jazz lead sheets, ~4 bars per line is most important, but having measures of equal width creates a great visual effect.

ABC code:

X: 001
T: After You've Gone
C: Creamer, Layton, 1918
M: 4/4
L: 1/4
R: swing
K: Gmaj
Q: 220
%%equalbars 1
%%stretchlast 0.6
%%partsbox 1
%
P: A
"C" E G A B- | B4 | "C-" z A B A | B A3 |
"G" B, D E F- | F4 | "E7" z E F E | F E3 |
"A7" E B2 B- | B4 | "D7" E A2 A- | A4 |
"G" z D E D | F D E D | "G7" G B,2 D- | D4 ||
P: B
"C" E G A B- | B4 | "C-" z A B A | B A3 |
"G" B, D E F- | F4 | "E7" z E F E | F E3 |
"A-" c4| "E7" B4 | "A-" A ^D E B- | "C-6" B2 A2 |
"G" z ^A B G | "B7" A ^G A F | "E-7" =G ^A, B, F- | "A7" F2 E2 |
"G" D E G B- | "E7" B4 | "A-7" z C D E | "D7" A2 B2 |
"G" B G3- | G4- | "G7" G4- | G4 |]

abc2svg rendering:

2020-06-16-131846_821x891_scrot

abcjs rendering:

2020-06-16-131732_847x917_scrot

The first chart above is just a little more legible in my opinion.

Incidentally, @benlieb, here is a way to style your ABC charts to look a bit more like iRealPro charts.

ABCjs rendering:

2020-06-13-145453_1148x546_scrot

ABC code:

%%gchordfont 16
%%musicspace 20
%%partsfont 20 box
T: Cottage For Sale P Alt
C: Willard Robison
L: 1/8
R: (Medium Swing)
M: 4/4
K: C clef=none stafflines=0
P: A
|:"C^7"x2x2 "C6"x2x2 | "Bø"x2x2 "E7"x2x2 | "Eø"x2x2 "A7"x2x2 | "D-7"x2x2 "Dø"x2x2 |
|"C^7"x2x2 "Db°"x2x2 | "F6"x2 "/"x2 "F-6"x2 "Eb7"x2 | "D7"x2 "D7b5"x2 "G7"x2 "G7b5"x2 | [1 "C^7"x2 "C6"x2 "D-7"x2 "G7"x2 :|
| [2 "C6"x2x2x2x2 ||

More cool features from abc2svg:

Add chord grids (grilles) to the top of the page using %%grid directive (PDF):

2020-06-27-153656_853x392_scrot

X: 001
T: After You've Gone
C: Creamer, Layton, 1918
M:
L: 1/4
R: swing
Q: 220
%%scale 1
%%equalbars 1
%%partsbox 1
%%stretchlast 1
%%staffsep 40
%%grid 8
K:Cmaj
%%scale 1
P: A
"C" E G A B- | B4 | "C-" z A B A | B A3 |
"G" B, D E F- | F4 | "E7" z E F E | F E3 |
"A7" E B2 B- | B4 | "D7" E A2 A- | A4 |
"G" z D E D | F D E D | "G7" G B,2 D- | D4 ||
P: B
"C" E G A B- | B4 | "C-" z A B A | B A3 |
"G" B, D E F- | F4 | "E7" z E F E | F E3 |
"A-" c4| "E7" B4 | "A-" A ^D E B- | "C-6" B2 A2 |
"G" z ^A B G | "B7" A ^G A F | "E-7" =G ^A, B, F- | "A7" F2 E2 |
"G" D E G B- | "E7" B4 | "A-7" z C D E | "D7" A2 B2 |
"G" B G3- | G4- | "G7" G4- | G4 |]

Turn the score into a chord chart using %%grid2 directive (PDF):

2020-06-27-154401_780x834_scrot

X: 001
T: After You've Gone
C: Creamer, Layton, 1918
M:
L: 1/4
R: swing
Q: 220
%%staffsep 15
%%scale 1.2
%%equalbars 1
%%notespacingfactor 2
%%partsbox 1
K:Cmaj
V:1 % (needed after the first K:)
%%grid2 1
%
P: A
|"C" E G A B- | B4 | "C-" z A B A | B A3 |
|"G" B, D E F- | F4 | "E7" z E F E | F E3 |
|"A7" E B2 B- | B4 | "D7" E A2 A- | A4 |
|"G" z D E D | F D E D | "G7" G B,2 D- | D4 ||
P: B
|"C" E G A B- | B4 | "C-" z A B A | B A3 |
|"G" B, D E F- | F4 | "E7" z E F E | F E3 |
|"A-" c4| "E7" B4 | "A-" A ^D E B- | "C-6" B2 A2 |
|"G" z ^A B G | "B7" A ^G A F | "E-7" =G ^A, B, F- | "A7" F2 E2 |
|"G" D E G B- | "E7" B4 | "A-7" z C D E | "D7" A2 B2 |
|"G" B G3- | G4- | "G7" G4- | G4 |]
benlieb commented 4 years ago

@chrisfargen @paulrosen Thanks for the info. Actually when the quarantine hit, I took some time to turn the text-based chart system I mentioned above in to a fully data-driven system, that allows for transposition, lyrics, numeric notation, etc. I'm mostly just using it with myself and some friends, but I wonder if it would be useful for others at some point. I did it with rails/react. I think I've given up on using ABC for the moment, though I'll probably look back into it some time. Especially to represent some melodic elements for use in charts.

image

image

benlieb commented 4 years ago

@chrisfargen this %%grid2 options looks promising. That's enough to give the tool another look. Is there any way to get rid of those tie marks and change chord sizes?

chrisfargen commented 4 years ago

@chrisfargen this %%grid2 options looks promising. That's enough to give the tool another look. Is there any way to get rid of those tie marks and change chord sizes?

Update: The creator of abc2svg has fixed the tie problem.

(Just to clarify, we're talking about abc2svg now.)

@benlieb, Yes, apparently %%gchordfont doesn't affect chord size when %%grid2 is activated. But you can change chord size using the %%scale directive. I think the default is 0.75, so you could try %%scale 1 or %%scale 1.5.

No way to get rid of the ties, as far as I know. Hopefully there will be an option to do that at some point. I've just been deleting them from the ABC code when I go to render.

benlieb commented 3 years ago

@chrisfargen Could you share a screenshot?

chrisfargen commented 3 years ago

Code above pasted into abc2svg editor yields this chord chart (link below).

https://user-images.githubusercontent.com/2993720/101188339-923a9480-3623-11eb-9af0-e28a67e1be75.png

Editor: http://moinejf.free.fr/js/edit-1.xhtml

On Tue, Nov 24, 2020, 1:36 AM Benjamin Lieb notifications@github.com wrote:

@chrisfargen https://github.com/chrisfargen Could you share a screenshot?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/paulrosen/abcjs/issues/243#issuecomment-732633974, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAW24OCSV56XD6MU5ZSJ3IDSRNH6LANCNFSM4IK2Z37Q .