Recently, I’ve gotten back into composing music, and my ancient iMac (from early 2009) just can’t keep up with MIDI software and music notation software anymore. So, I began to search for a replacement. I found Musescore, which I have quickly grown to love, but it’s not quite enough. I have always wanted a way to write music fragments and host them on my website, just like you can host markdown text and have it formatted. So I searched for a markup language for music notation, and found ABCjs.
The learning curve for ABCjs can be… steep, but I thought I’d document my process of learning how to write short pieces in ABCjs to host on my blog here.
Getting Started
To get started, I am using the free ABCjs Quick Editor, because it doesn’t require any accounts to set up, requires zero code (for now), and comes pre-built with an example to get you started.
Great, so there’s an example piece on the page, a little play button beneath the info box, and some footer information. Now I can start tinkering.
Because I know how to read music, I was able to figure out pretty quickly what the formatting looks like. So I’ll review the basics now. Here is a simple C-major scale for piano written in ABCjs notation:
T: Example
M: 4/4
L: 1/4
K: C
%%staves {V1 V2}
V: V1 clef=treble
V: V2 clef=bass
[V: V1]|:C D E F |G A B c|B A G F |E D C2 :|
[V: V2]|:C,D,E,F,|G, A, B, C|B, A, G, F, |E, D, C,2:|
Which, when run through abcjs’s parser, will look like this:
Looks pretty good! Let’s review what different parts of the markup mean.
- T: The title of the score
- M: The time signature (probably stands for “measure”, is my guess); i.e. 3/4 or 4/4
- L: The default length of a note. If you want a quarter note as the default, enter
1/4 - K: The key of the music, i.e A, E Minor, C Major, etc.
The next part I had to look up on various stackoverflow forums and in the Github documentation of abcjs, but basically, if you are writing for piano, you probably want to have two staves, one for treble clef and one for bass clef. You do that by “defining” them like so:
%%staves {V1 V2}
V: V1 clef=treble
V: V2 clef=bass
Then, when you go to write the music, you can use V1 and V2 to define which staff you are writing for.
Notating
Notating in abcjs is fairly simple, you just write the name of the note in the measure you want, and that’s basically it. There are some caveats though. Because music uses modular naming conventions for its notes (we reuse the same name for multiple notes across the range of music), we have to distinguish which specific note we are referring to. Writing a C note isn’t specific enough, we have to tell abcjs which C note we want to write.
ABCjs takes care of this in two ways: capitalization, and markers. Capitalization is the standard note. a C is different from a C and an E is different from an e, but what about the other C’s and E’s above and below those?
In ABCjs, capital C is middle C, or C4, and c is one octave up, or C5.
With markers, to go an octave up, you can also use the apostrophe symbol, like so: C', which is equivalent to c. You can chain apostrophes together to go up any number of octaves: C'' is equivalent to C6 on the piano.
To go down an octave using markers, use the comma , symbol. These can also be chained together: C,, which is equivalent to C2 on the piano.
Knowing this, let’s look at the notation for all C‘s on the piano using ABCjs:
T: Example
M: 4/4
L: 1/4
K: C
%%staves {V1 V2}
V: V1 clef=treble
V: V2 clef=bass
[V: V1]|C c c' C''' |]
[V: V2]|C C, C,, C,,, |]
Which will render sheet music that looks like this:
For some reason that I haven’t quite figured out, the above ABCjs notation works perfectly fine on the online editor, but on the WordPress plugin used here, it seems to have a really hard time getting that last high C note in position, which is throwing off the rest of the notation.
Alas, it’s still doing a good job overall.
Note Duration
Because we defined the standard note duration to be a quarter note (L: 1/4), we are limited to only using quarter notes in our measures. But what if you wanted to use a half note or an eighth, or sixteenth, or whole?
Whatever note you set as the default note, you simply “multiply” or “divide” that note by the duration you are looking for. If you want an eighth note, and you have a quarter note, divide the quarter note by half: C1/2. If your default is a whole note, and you want a sixteenth note, divide by 16: C1/16.
If you want an unusual duration, you can divide or multiply by uneven numbers. For instance, if your default is one quarter, and you want a dotted half note, you would multiply by 3, because a dotted half note in 4/4 time has 3 beats, when a quarter note has 1.
This method requires a bit of math, but it’s not math that is unfamiliar to a musician, or at least it shouldn’t be.
To connect the tails of the notes together, do not leave a space. To disconnect the tails, enter at least one space between the notes.
T: Example
M: 4/4
L: 1/4
K: C
%%staves {V1 V2}
V: V1 clef=treble
V: V2 clef=bass
[V: V1]|:C1/2C1/2 C C2 | C3 C | C4 | C1/4C1/4C1/4C1/4C1/4C1/4C1/4C1/4|]
This will render sheet music that looks like this:
Sharps, Flats, Naturals, and other Accidentals
Music in C-major can be fun. It’s easy to read, easy to write, doesn’t have the added complication of dealing with the black keys on a piano, but it can also be boring. So let’s figure out how to throw some accidentals into our music.
T: Example M: 4/4 L: 1/4 K: C [|C D E F | G A B c | C D _E F | G _A _B c | C D E ^F | G A B c|]
Here, to add flats, we prefix the note with an underscore _ and to add a sharp, we prefix the note with a karat ^. To do double flats and double sharps, simply double the modifier like __ or ^^.
The above output is the key of C in its natural major scale, its aeolian minor scale, and its lydian scale. Together the three of them make use of at least one flat and one sharp to test the notation with.
Ode to Joy in G-Major
So, with the notation standards outlined above in mind, let’s transcribe a basic version of Beethoven’s Ode to Joy theme in the key of G-Major. BUT WAIT! To make things more fun, since G Major only has one sharp, let’s just omit it from the key, and instead write it in as an accidental so that we can practice writing accidentals in.
T: Example
M: 4/4
L: 1/4
K: C
%%staves {V1 V2}
V: V1 clef=treble
V: V2 clef=bass
[V: V1]|: B, B, C D | D C B, A, | G, G, A, B, | B,3/2 A,1/2 A,2 |
B, B, C D | D C B, A, | G, G, A, B, | A,3/2 G,1/2 G,2:|
[V: V2]|: G, G, A, B, | B, A, G, ^F, | D, D, ^F, G, | G,3/2 ^F,1/2 ^F,2 |
G, G, A, B, | B, A, G, ^F, | D, D, ^F, G, | ^F,3/2 D,1/2 D,2:|
There you have it! The absolute basics of writing music with ABCjs. I will be exploring more of its capabilities in the near future, and writing and sharing snips of music here on the blog as I start to roll out my music more publicly. Enjoy!