In a sense, musical composition can be thought of as code... making some of our earliest composers pioneer coders. Sheet music, or any musical notation, is a readable bunch of code-esque instructions and commands that is interpreted by a biological machine that produces an output. Certainly, digital music has almost mandated that some musicians have an understanding of code so that they can manipulate their online music, or have it shared or represented online in different ways. In working with our own music (and we write a lot) we've struggled with different ways of sharing it online. This is the first of a long series that'll deal with different ways of rendering musical notation... or having it rendered into MIDI files or converted into other formats.
Note: This code is due for a complete rewrite so please use with caution. This notice will be removed when the code is updated.
About ABCJS
There are a number of excellent libraries available for rendering musical notation, and Paul Rosen's abcjs 
is the first that we'll look at. Initially I initially wanted to use his own WP plugin for a project but I found it more suited to those that were familiar with his library rather than the average muso or music teacher (the latter group using ABC notation extensively)... not to mention that Paul's shortcode loads the extensive JavaScript library on every page by default which is a behaviour I wanted to avoid. Our own code is a complete replacement for Pauls. While we've provided shortcode, it might be best to install our plugin (download below) because the functionality will invariably be improved upon.
We've found that abcjs isn't ideal for larger and more complex musical scores, and it vacates the standard ABC Notation at times meaning that some files aren't compatible. While we've generally decided against using abcjs ourselves, it is worth looking at, and over time it'll likely be developed into the most definitive product for web based renderings.
What is ABC Notation?
ABC notation is a system designed to notate music in plain text format, and it's widely recognised as the most popular notation format on the Internet. What might differentiate ABC from some of the available notations (and packages) is that ABC can be read and played directly from the transcribed text. It's easy to write, easy to edit (in text files), and it's easy to read.
There's thousands of resources available that make pre-formatted music available for download, and there's a large number of traditional and online packages available that will convert the code into other formats or integrate it with musical hardware.
The Result
The shortcode of:
[abcjs]X:1<br />
T:The A team<br />
M:4/4<br />
L:1/8<br />
Q:1/4=152<br />
K:B<br />
f2 cf4-f|Bc2F3 zA/2c/2|fc gf4-f|e3/2d/2 c/2B3/2 c4|<br />
f3/2f/2 cf4-f|AB3/2zcF3-F/2|=A3/2B/2 =de4-e-|e8|<br />
e^d zB e2 d2|^A3/2B/2 cf4-f|cB/2z3/2F c2 B2|BA F=F ^F4|<br />
DD CD zC zD|zC zC G2 F2|DD CD zC zB,|zB, zB, C4|<br />
DD CD zC zD|zC zC G2 F2|DD CD zC z3/2B,/2-|B,/2zB,3/2B, A,4|<br />
E=D/2z3/2B, Ez E2-|E4 [/abcjs]... will return the following:
We can alter the size of the notes with an attributes as follows:
[abcjs staffwidth="580" scale="2.0"]X:1<br />
M: 4/4<br />
L: 1/8<br />
K: Emin<br />
|:D2|EB{c}BA B2 EB|[/abcjs]The result:
Because including ABC Notation into WordPress can be problematic - not to mention the potential for the visual editor to screw things up - we can use the attribute of notation to specify the filename of the .abc file. This might be a more efficient way of providing source ABC for a couple of reasons; it means we can share the .abc file with others via a direct link, and we can more easily create a working MIDI file from the data (more on our 'ABC to MIDI API' another time). The shortcode of [abcjs staffwidth="580" scale="0.8" notation="twinkle-twinkle-little-star.abc"][/abcjs] will return the notation below (note we've included the closing shortcode tags despite no content; this is because WP doesn't like mixing of opening and closing tags on the same page). To use this you must define a default directory where abc files are stored.
You may also define an external abc file as an attribute. The external abc will first be copied to your local WordPress installation before rendering in your posts. Subsequent engravings will be made using the locally stored copy; this is done to ensure that the music will be available after the source potentially removes it. You will need to consider any copyright that might apply. The following notation for Baa Baa Black Sheep, sourced from abcnotation.com 
, is rendered using the shortcode of [abcjs notation="http://abcnotation.com/getResource/downloads/text_/air-de-lopera-francoise-hsjj054.abc?a=www.atrilcoral.com/Partituras_ABC/a.zip/a/0299"][/abcjs].
There's no security here so you'll have to be certain that you don't import potentially nasty stuff. If it's just you that'll be using it, it should be fine.
Additional Examples
The difficulty with ABC Notation will have everything to do with learning the specifics of the notation, and because it's so extensive, it's well beyond the scope of this article. While there's a number of excellent websites with examples and tutorials, we've provided just a few examples below.
Mary Had a Little Lamb is always a good start for anything musical when learning. For the rendered result the following notation applies.
[abcjs]X: 507T:Mary Had A Little Lamb
M:4/4
L:1/8
Q:112
K:G
B2A2G2A2|B2B2B4|A2A2A4|B2B2B4|B2A2G2A2|B2B2B2B2|A2A2B2A2|G8||
[/abcjs]An example of Grace Notes:
[abcjs]X:1T:Grace notes
M:6/8
K:C
{g}A3 A{g}AA|{gAGAG}A3 {g}A{d}A{e}A|]
[/abcjs]The Result:
An example of chords. In this case we've referenced a local file: [abcjs notation="chords.abc"][/abcjs]
An example using Treble and Bass Clef. "Mazurka" by Chopin. Op33. No.1. Shortcode of [abcjs notation="mazurka.abc"][/abcjs] returns:
Shortcode Attributes
Paul's official documentation on Github page should be referenced for information on the parameters we provide.
scale
staffwidth
paddingtop
paddingbottom
paddingright
paddingleft
editable
header_only
stop_on_warning
The Shortcode Function
Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.
If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.
Considerations
- For complex compositions,
abcjsisn't quite as accurate as some of the other packages; in fact, in some cases, it doesn't render notation at all. However, it is in a constant state of development and is one of the easiest to use. - The shortcode we've provided above is quite basic and will likely be developed. For that reason, consider our plugin option and follow us on Facebook
for updates.
- Before you can use the shortcode you must first download the latest JavaScript library from Github and change the location of the script in the code. You should reference just the
abcjs_plugin_latest-min.jsfile (included in the download below). This isn't necessary with our plugin. - If you choose to include your ABC notation files in a directory you must also alter the path in the code (as a shortcode attributes) to your storage directory. This isn't necessary with our plugin.
