25

Update: ABCjs is now enabled on the main site as well. If there are any problems, please report them the usual way - in a new post tagged . Thanks, and enjoy!


Y'all asked for ABCjs integration earlier, and I'm happy to announce that we have something ready to test out here.

First of all, no delimiters are needed - any code block that matches the ABC format should be replaced with the rendered version once ABCjs loads.

It looks like the ABC spec says tunes should start with X:, and have a key defined by K:, so this is what we're currently looking for within the code blocks.

I've tested this some, but I'm sure y'all will have better examples, so please use this post to try out ABC blocks as well as jTab blocks to make sure that everything works correctly and, more importantly, addresses the use cases you have in practice.

And, of course, let me know what's broken. Barring any major issues, my plan is to flip this on on the main site in a couple days.

11
  • Is jtab also enabled on the meta? Last time I checked it wasn't.
    – Dom Mod
    Jul 12, 2016 at 18:35
  • 1
    @Dom It is now by virtue of abcjs needing Raphael, which is also part of jtab.
    – Adam Lear StaffMod
    Jul 12, 2016 at 18:43
  • 1
    Adam, hi! This is a great addition to the site. Is there a plan to support MIDI creation on-the-fly / ability to listen to the snippet score inline?
    – xnakos
    Sep 18, 2016 at 12:20
  • 1
    @xnakos Not at the moment, no.
    – Adam Lear StaffMod
    Sep 18, 2016 at 23:47
  • 1
    Adam, can this be added to the Markdown help page please? Specifically, is there any particular formatting required to get it to work? Should code be automatically interpreted on the fly in the answer preview on a post? (It doesn't appear to be: is that expected?) Feb 7, 2017 at 17:26
  • 1
    @AndrewLeach Unfortunately we don't really have a way to do that (hence the lack of jTab documentation on the Markdown page as well). But to your question, no, it's not supposed to work live in the preview. It's also an unfortunate limitation at the moment.
    – Adam Lear StaffMod
    Feb 7, 2017 at 22:50
  • Although this is now implemented (which is great!), I feel that we still need support for simple inline formatting of symbols like asked for here to support simple access to sharps and flats etc (♭ ♮ ♯)
    – awe
    May 29, 2017 at 9:43
  • I have tried to start a "documentation page here. Would be nice if this could be source of help page for ABCjs. Maybe tag it as faq?
    – awe
    May 29, 2017 at 10:38
  • Only when I was linked with the abc documentation page, did I know this feature is possible.... A time saver! Note how music theory discussions suffer from unclear ASCII description of chord symbols... Jun 7, 2017 at 16:06
  • Any chance you could create a bookmarklet, like the Mathematics chatrooms now use for LaTeX (math rendering)? Aug 22, 2017 at 15:47
  • 1
    The editor on this site doesn't offer live previews, but you can use the demo page on abcjs.net for composing your snippets. Nov 25, 2017 at 7:02

11 Answers 11

14

Here's what a post might look like with sheet music embedded in it:

X: 1
T: Cooley's
M: 4/4
L: 1/8
R: reel
K: Emin
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|

Note that refreshing the page is required (same as with jTab), so if you edit posts with the inline editor, you'll need to refresh after submitting to see the changes.

6
  • hey... I know that piece..! obligatory +1 Jul 14, 2016 at 4:28
  • Nice! That looks really good. Thanks! Jul 19, 2016 at 17:32
  • Yes, plus one and thank you, this looks useful. So, could the theoreticians get asciimath to render analyses? \overbrace{\rm \Large{Fr^{{^{+6}}} \ I}^{_6 \atop _4} \ V _{\_\_} I}^{\LARGE{typical}} or can this be done with ABCjs. Dec 9, 2018 at 20:33
  • 1
    @RichardBarber I'm not 100% sure what you're referring to. We have MathJax enabled on math-related sites, though: math.stackexchange.com/help/notation.
    – Adam Lear StaffMod
    Dec 10, 2018 at 19:05
  • Was actually referring to that MathJax capability on the math exchange. I can type roman numeral analysis with Math Jax but I haven't figured out how to achieve that in ABCjs yet. Dec 10, 2018 at 19:16
  • 2
    @RichardBarber ABCjs is designed to display musical notation, so I wouldn't be surprised if numeral analysis isn't possible. I'm not that familiar with the syntax though, I just hooked it up to the site here. :)
    – Adam Lear StaffMod
    Dec 10, 2018 at 20:16
9

Thanks for the playground! let's seee...

X:1
C: J.S. Bach
T: BWV 1005 Largo extract
M: C
L: 1/16
K: Dm
([FA]Bc)"1"f (ge)(f"0"A) ("3"[dE]B)c2 z "4"B("4"~A~G) |
([DF]ED)F (G"0"A)(Bd) ("1"T[CEB]A)"4"A2 z "0"A(~B~c) |

Wow, this is actually great. I can pretty much do everything I can think of to express how to actually play the music!

minor

Apparently the engine breaks when trying to do a chord with a rest, [zF]. This may sound silly, but it actually is important to transmit the musical intention of different voices from composer to interpret.

It would be great to be able to write fingerings to all notes, not only the top one using the guitar chord notation.

The tildes would actually be tenuto markings.

reaaaaaally picky

It would be like heaven to be able to decide each notes beam direction. For exemple with a two notes chord, that the top one be pointed up and the bottom one down.


These things seem completely not related to SE's work in this, I'll head to the github repo and roam through documentation.

1
  • 6
    Yeah, unfortunately we don't really have any control over the notation and the parsing itself. That's all up to the abcjs folks.
    – Adam Lear StaffMod
    Jul 14, 2016 at 17:26
7

Let's see if it works for the kind of short snippets that are so interesting for posts on this site...

X: 1
M: C
K: Gmaj
L: 1/4
|G2FG|A2FA|Bcde|e2d2|

Nnnope. Ok, I see, you require T: in addition to X:...

X: 1
T: Ex2
M: C
K: Gmaj
L: 1/4
|G2FG|A2FA|Bcde|e2d2|

That really shouldn't be necessary. Snippets without title are certainly no problem for ABC, and titles won't usually be needed here.

But apart from that... it seems to work – thanks a lot!

Of course, it's a bit of a pity that you need to refresh to see the rendered output. With MathJax on the science SE sites, the quick feedback is really nice (especially for newbies), and for ABC this would be at least as helpful. I think it ought to be possible too, at least drawthedots.com renders immediately.
But this is not such a big deal.

Furthermore (even less critical) – I was never a fan of the way jtab just uses normal code blocks, since it interferes if you actually want to post verbatim source code. I reckon the ABC addition won't make this any more of an issue, but as was already discussed, I would prefer it if both ABC and jtab got dedicated delimiters and code blocks would become just code blocks again.

5
  • 1
    I hesitate to introduce delimiters since that just adds a lot of complexity. For one, now suddenly a single code block could contain multiple notation sections, and we would have a hard time rendering that sanely. For another, we could do some sort of $abc$ thing for abc.js since we trigger rendering manually and could strip it out of the input, but we don't have that level of control over jTab readily available, and I'd rather not have the two behave differently.
    – Adam Lear StaffMod
    Jul 13, 2016 at 22:43
  • 2
    I'm pushing a change that won't require the title to be specified, and I'll see what I can do about not needing a refresh to edit... not sure how involved that's gonna be, though, so no promises there. (As a side note, at least for abc, posting verbatim code is relatively easy since all you need to do is omit the X: line :))
    – Adam Lear StaffMod
    Jul 13, 2016 at 22:59
  • Well, I suppose the solution with code blocks starting with X: really will be just fine. I've just found it a bit annoying in the past when I wanted to post some monospace code and jTab would kick in and display some complete nonsense. But I've gotten rather used to it; literal code blocks aren't so important on this site and as you say, using the 4-space indent also for ABC won't exacerbate the issue further if it needs X:. (My personal choice would be to just ditch jTab – who needs tabs when you have notation? – and use $$ for ABC, but that opinion clearly isn't representative.) Jul 13, 2016 at 23:03
  • 2
    By the way, thanks for trying this out and leaving your feedback. I appreciate it!
    – Adam Lear StaffMod
    Jul 13, 2016 at 23:04
  • 3
    "Who needs tabs when you have notation?" Answer: 90% of those asking questions with the guitar tag. :-/ Jul 19, 2016 at 17:34
4

I have found ways to break it, I think. First thing is it seems to be unhappy with too small an excerpt (this is supposed to be one measure of Bs):

X: 1
K: C
M: 4/4
L: 1/8
B2 B2 B2 B2 |]

Also padding with rests doesn't necessarily work:

X: 2
M: 4/4
K: C
L: 1/4
|B2-.Bz|F2-!>!F-F|FGAB| z8 |]
1

Oh, let me try…

MML → MusicXML → MuseScore → (edit) → MusicXML → xml2abc.js → prepend four spaces → here:

X:1
T:Loreley
C:Ph. Friedrich Silcher (1789–1860), 1837
Z:Heinrich Heine (1797–1856), 1824
Z:MML encoding & arrangement © 2016 mirabilos, published under The MirOS Licence; copyright for text, music, and piano arrangement has expired; music engraving by MuseScore
%%scale 0.83
%%pagewidth 21.01cm
%%leftmargin 1.00cm
%%rightmargin 1.00cm
%%score { ( 1 2 ) | ( 3 4 ) }
L:1/8
Q:1/4=76.00
M:6/8
I:linebreak $
K:C
V:1 treble nm="Piano"
V:2 treble 
V:3 bass 
V:4 bass 
V:1
"^Andante"!mf! G | ([EG]>[FA])[EG]!>(! ([F-c][FB])[FA] | [EG]3!>)! [DF]2 [DF] | %3
w: 1.~Ich|weiß nicht, was soll es be-|deu- ten, daß|
w: 2.~Die|schön- * ste Jung- * frau|si- tzet dort|
w: 3.~Den|Schif- * fer im klei- nen|Schif- fe- *|
 [CE]3/2 [CE]/ [CE] [B,D][A,C][B,D] | [CE]3- [CE] z G |$ ([EG]>[FA])[EG] ([F-c][FB])[FA] | %6
w: ich _ so trau- * rig|bin? _ Ein|Mähr- chen aus al- * ten|
w: o- * ben wun- * der-|bar, _ ihr|gold’- nes Ge- schmei- * de|
w: greift es mit wil- * dem|Weh, _ er|schaut nicht die Fel- * sen-|
 [EG]3 [DF]2 [DF] | [CE]3/2 [CE]/ [CE] [B,G][B,F][B,D] | C3- C z!mf! E |$ %9
w: Zei- ten, das|kommt _ mir nicht aus dem|Sinn. _ Die|
w: bli- tzet, sie|kämmt _ ihr gol- de- nes|Haar. _ Sie|
w: rif- fe, er|schaut nur hin- auf in die|Höh’. _ Ich|
 ([B,D]>[CE])[B,D] [B,DG][B,D][B,D] | [DGB]3 [CEA]2 [CEA] | [B,DG]2 [DG] [A,^F][B,G][CA] | %12
w: Luft _ ist kühl und es|dun- kelt und|ru- hig fließt _ der|
w: kämmt es mit gol- de- nem|Kam- me und|singt ein Lied _ da-|
w: glau- be die Wel- len ver-|schlin- gen am|En- de Schif- fer und|
 G3- G2 [FG] |$ [EG]>[FA]!<(![EG] ([F-c][FB])[FA] | (([EG]2 [Ge]))!<)! [Fd]2!>(! [Fd] | %15
w: Rhein; _ der|Gi- pfel des Ber- * ges|fun- * kelt im|
w: bei; _ das|hat ei- ne wun- * der-|sa- * me, ge-|
w: Kahn, _ und|das hat mit ih- * rem|Sin- * gen die|
 [Fc]3/2 [Fc]/ [Fc] ([F-B][FA])[FB] | [Ec]3-!>)! [Ec] z |] %17
w: A- * bend- son- * nen-|schein. _|
w: wal- ti- ge Me- * lo-|dei. _|
w: Lo- * re- ley _ ge-|than. _|
V:2
 x | x6 | x6 | x6 | x6 |$ x6 | x6 | x6 | x6 |$ x6 | x6 | x6 | (B,DE =FED) |$ x6 | x6 | x6 | x5 |] %17
V:3
 z | (C,/G,/CG,) (C,/A,/DB,) | (C,/G,/CG,) (F,,/F,/A,F,) | (G,,/E,/G,E,) [G,,G,]2 [G,,G,] | %4
 ([C,G,]G,,E,, C,,2) z |$ (C,/G,/CG,) (C,/A,/DB,) | (C,/G,/CG,) (F,,/F,/A,F,) | %7
 G,,G,C, [G,,D,][G,,D,][G,,F,] | ([C,E,]E,,G,, C,,2) z |$ (G,,D,G,) (G,,D,G,) | %10
 (G,,D,G,) (C,,E,A,) | (D,,D,B,) z2 [D,^F,] | D,3- D,2 G, |$ (C,/G,/CG,) (C,/A,/DB,) | %14
 (C,/G,/C/) z/ z (F,,/A,/D/) z/ z | (G,,/G,/C/) z/ z [G,D][G,C][G,D] | ([C,G,]E,G, C,) z |] %17
V:4
 x | x6 | x6 | x6 | x6 |$ x6 | x6 | x6 | x6 |$ x6 | x6 | x6 | (G,,B,,C, D,C,B,,) |$ x6 | x6 | x6 | %16
 x5 |] %17

Hm, seems to not quite work yet for more complex pieces… let’s see what happens if I remove V:2 and V:4…

[…]

Not quite, either; it seems to confuse physical line breaks (LF) with logical ones (|$). Let’s make the physical breaks all the same (manually editing the auto-converted score):

[…]

This is only really useful if auto-conversion from MusicXML works, though :|

OK, next attempt: conversion with python xml2abc_v63/xml2abc.py -x -b 4 .MuseScore2/Scores/Loreley.xml >Loreley.abc:

X:1
T:Loreley
C:Ph. Friedrich Silcher (1789–1860), 1837
Z:Heinrich Heine (1797–1856), 1824
Z:MML encoding & arrangement © 2016 mirabilos, published under The MirOS Licence; copyright for text, music, and piano arrangement has expired; music engraving by MuseScore
%%score { ( 1 2 ) | ( 3 4 ) }
L:1/8
Q:1/4=76.00
M:6/8
I:linebreak $
K:C
V:1 treble nm="Piano"
V:2 treble 
V:3 bass 
V:4 bass 
V:1
"^Andante"!mf! G | ([EG]>[FA])[EG]!>(! ([F-c][FB])[FA] | [EG]3!>)! [DF]2 [DF] | [CE]3/2 [CE]/ [CE] [B,D][A,C][B,D] | %4
w: 1.~Ich|weiß nicht, was soll es be-|deu- ten, daß|ich _ so trau- * rig|
w: 2.~Die|schön- * ste Jung- * frau|si- tzet dort|o- * ben wun- * der-|
w: 3.~Den|Schif- * fer im klei- nen|Schif- fe- *|greift es mit wil- * dem|
 [CE]3- [CE] z G | ([EG]>[FA])[EG] ([F-c][FB])[FA] | [EG]3 [DF]2 [DF] | [CE]3/2 [CE]/ [CE] [B,G][B,F][B,D] | %8
w: bin? _ Ein|Mähr- chen aus al- * ten|Zei- ten, das|kommt _ mir nicht aus dem|
w: bar, _ ihr|gold’- nes Ge- schmei- * de|bli- tzet, sie|kämmt _ ihr gol- de- nes|
w: Weh, _ er|schaut nicht die Fel- * sen-|rif- fe, er|schaut nur hin- auf in die|
 C3- C z!mf! E | ([B,D]>[CE])[B,D] [B,DG][B,D][B,D] | [DGB]3 [CEA]2 [CEA] | [B,DG]2 [DG] [A,^F][B,G][CA] | %12
w: Sinn. _ Die|Luft _ ist kühl und es|dun- kelt und|ru- hig fließt _ der|
w: Haar. _ Sie|kämmt es mit gol- de- nem|Kam- me und|singt ein Lied _ da-|
w: Höh’. _ Ich|glau- be die Wel- len ver-|schlin- gen am|En- de Schif- fer und|
 G3- G2 [FG] | [EG]>[FA]!<(![EG] ([F-c][FB])[FA] | (([EG]2 [Ge]))!<)! [Fd]2!>(! [Fd] | [Fc]3/2 [Fc]/ [Fc] ([F-B][FA])[FB] | %16
w: Rhein; _ der|Gi- pfel des Ber- * ges|fun- * kelt im|A- * bend- son- * nen-|
w: bei; _ das|hat ei- ne wun- * der-|sa- * me, ge-|wal- ti- ge Me- * lo-|
w: Kahn, _ und|das hat mit ih- * rem|Sin- * gen die|Lo- * re- ley _ ge-|
 [Ec]3-!>)! [Ec] z |] %17
w: schein. _|
w: dei. _|
w: than. _|
V:2
 x | x6 | x6 | x6 | %4
 x6 | x6 | x6 | x6 | %8
 x6 | x6 | x6 | x6 | %12
 (B,DE =FED) | x6 | x6 | x6 | %16
 x5 |] %17
V:3
 z | (C,/G,/CG,) (C,/A,/DB,) | (C,/G,/CG,) (F,,/F,/A,F,) | (G,,/E,/G,E,) [G,,G,]2 [G,,G,] | %4
 ([C,G,]G,,E,, C,,2) z | (C,/G,/CG,) (C,/A,/DB,) | (C,/G,/CG,) (F,,/F,/A,F,) | G,,G,C, [G,,D,][G,,D,][G,,F,] | %8
 ([C,E,]E,,G,, C,,2) z | (G,,D,G,) (G,,D,G,) | (G,,D,G,) (C,,E,A,) | (D,,D,B,) z2 [D,^F,] | %12
 D,3- D,2 G, | (C,/G,/CG,) (C,/A,/DB,) | (C,/G,/C/) z/ z (F,,/A,/D/) z/ z | (G,,/G,/C/) z/ z [G,D][G,C][G,D] | %16
 ([C,G,]E,G, C,) z |] %17
V:4
 x | x6 | x6 | x6 | %4
 x6 | x6 | x6 | x6 | %8
 x6 | x6 | x6 | x6 | %12
 (G,,B,,C, D,C,B,,) | x6 | x6 | x6 | %16
 x5 |] %17
1

This is a test to play around with ABC.js features and see how they look. Since it's a CW, feel free to edit it yourself!

X:2
T:Bonjour, le monde!
C:µeta
M:6/16
L:1/16
R:Gigue Français
K:Gm
I:linebreak @
[DG][D^F]!style=rhythm!!marcato!_GBAB | gfggab | GFGBAB | d3AFD |
G/2F/2G/2B/2A/2B/2G/2F/2G/2B/2A/2B/2 | gfggab | age edB |1 dBA AFD :|2 dBA ABd |:
|: efe edB | dBA ABd | efe edB | gdB ABd |
efe edB | d2d def | gfe edB |1 dBA ABd :|2 dBA AFD |]
1

This is a test, sorry.

X: 1
K: perc stafflines=1
L:1/4
"_some text below"B2B2"^some other text above"|B z B z|B1/2 z1/2 z B1/2 z1/2 z|B1/4 z3/4 z B1/4 z3/4 z|]

A following test:

X: 1
L:1/8
K: perc stafflines=1
z B z B|z B z B|]

And another:

X: 1
L:1/8
K: perc stafflines=1
B B - B B ||-B B2 B-|]

Final one:

X: 1
L:1/8
K: perc stafflines=1
B z B z|B z B z|]

Still trying to understand what's wrong with the above (see the related post).

EDIT:
Ok, it seems like the initial X: 1 is always required.

Still, it would really help if ABCjs would work within the editor preview too. Note that editing a previous post may give inconsistent result, and page refresh seems to be always required for some reason.

12
  • I've heard that some percussionist prefer stems up on single line parts. If you want this: V: voice-one stem=up Nov 15, 2023 at 10:09
  • @ElementsInSpace Thanks. In reality, I just wanted to ensure that everything I needed for my post was also working here on SO too. Is there any chance that ABC embedding would eventually work on post previews too (including post editing)? I normally use the editor from drawthedots, but it would greatly help to have it right here. Nov 16, 2023 at 1:30
  • 1
    That's a very reasonable request. I'll look into it. Nov 16, 2023 at 1:50
  • @ElementsInSpace Sorry to bother you. After further testing, I realized that there seems to be a discrepancy with the way text is shown using the Annotation syntax. According to the docs, above/below prefixes (^ and _) should use the following content (note/rest or bar line). This seems to be reflected in the abcjs.net editor too. My first snippet should at least show the second text along the second bar (no matter the notes), and the abc editor does the same for the first one. But I can only see the first text, with a wrong note displacement. Nov 23, 2023 at 1:57
  • I don't know what's going on there, but it looks like you had it working in revision 4. Nov 23, 2023 at 2:25
  • @ElementsInSpace Uhm, that's not what I'm getting: interestingly enough, in the revision review, the last edit isn't consistent with the actual post: what I see in the post is this, what I see in the last revision is this, and what I see in revision 4 (this) shows all the contents but ignoring the note alignment shown in the abcjs website, which should "bleed" the text beyond the first note, instead of placing the following note/rest after the end of the text. Nov 23, 2023 at 2:49
  • Oh, I see this for revision 4 — no bleed, but otherwise okay. Nov 23, 2023 at 2:51
  • BTW I'm putting together a feature-request about fixing the problems with ABC on our site, and it's almost done. If you want to edit it or add an answer documenting this/other issues that would be great. Nov 23, 2023 at 2:57
  • @ElementsInSpace Well, this is becoming interesting. I had the revision page opened in another tab for a few minutes. I switched back to it, and it actually showed the proper alignment (what I was trying to achieve). I refreshed that page, and now it's back to the "non-bleeding" state. I'm using a quite old browser in this current machine (~3-4 years, but I can't update it right now for other reasons), so it is possible that there's some issue related to the javascript engine. Still the non-bleeding issue is present on a newer browser (Chrome 99, ~1yo). Nov 23, 2023 at 3:04
  • @ElementsInSpace That's good to know, thank you for these efforts! But, uhm... Maybe you forgot the link in that comment? [btw, thanks for your bounty!] Nov 23, 2023 at 3:05
  • 1
    I've been studying orchestration somewhat for the last 5 years or so. Most of the books/teachers regard percussion as a bit of a ~mystery~. It's great to have a well written post about percussion from someone with experience. My first instrument was a drum kit, and I still play the triangle every day (it lets the cat know it's dinner time). Nov 23, 2023 at 3:21
  • @ElementsInSpace Well, it's sometimes a mystery to us too: despite probably being the oldest family of instruments (voice excluded), its "academic evolution" only began ~150 years ago, which is a very short time for a family that includes virtually infinite instruments and their variants; it's still under continuous evolution, and I've seen huge changes in "standard" naming, techniques and repertoire within less than 10-15 year periods. So, good luck with your studying... Too bad that your cat will never appreciate (nor care, being it a cat) your efforts ;-) Nov 23, 2023 at 3:34
0

A test for the pianists:

X:1
T:test
K:Am
M:3/8
L:1/16
V:1 clef=treble
z ee' zz ^d | e2 z ^ded |
V:2 clef=treble
e) zz ^de z | z ^de z z2 |
1
  • Yay! Thanks for implementing this, I think it will be extremely useful.
    – Bacs
    Jul 28, 2016 at 8:58
0

Just a quick test, if that's OK

X: 1
T: Test
O: Akiva
M: 4/4
L: 1/8
K: C
[| [^F6A6d6] [F^Ad]([EGc] | [E8G8c8]) | [_E6G6_B6] [_EG_B]([^CEA] | [C8E8A8]) |
| [^F6A6d6] [F^Ad]([EGc] | [E8G8c8]) | [D6G6B6] [DGB]([EA^c]|[EAc]) |]
0

asdfasdf

X:1
T:test
K:Am
M:3/8
L:1/16
V:1 clef=treble
z ee' zz ^d | e2 z ^ded |
V:2 clef=treble
e) zz ^de z | z ^de z z2 |

asdfasdf df sdfvsd sds

0

Test

X:2
T:Exercise 1
M:4/4
L:1/8
K:G
| "heh"G "heh"G "teh"G "teh"G "teh"G4 | G/"etc"G/G/G/

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .