Blog, WordPress, WordPress Plugins, WordPress Shortcode

Embed ABC Musical Notation in WordPress with Shortcode (and ABCjs)

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:

... 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].

External .abc file stored as a hash of the source URL

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: 507
T: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:1
T: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

If the number passed is between zero and one, then the music is printed smaller, if above one, then it is printed bigger. Defaults to 1.

staffwidth

The width of the music, in pixels. Set in your shortcode to the default width of your post container. Defaults to 580.

paddingtop

The spacing that the music should have on the webpage. Defaults to 15,

paddingbottom

The spacing that the music should have on the webpage. Defaults to 30.

paddingright

The spacing that the music should have on the webpage. Defaults to 50.

paddingleft

The spacing that the music should have on the webpage. Defaults to 15.

editable

If true, then when a note is clicked, it is highlighted and a callback allows the editor to move the cursor. Defaults to false.

print

Pay attention to margins and other formatting commands that don't make sense in a web page. Defaults to false.

header_only

Only parse the ABC header. Defaults to false.

stop_on_warning

Only parse until the first warning is encountered. Defaults to false.

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.

<?php

Embed ABC Musical Notation in WordPress with Shortcode (and ABCjs)

http://www.beliefmedia.com/abc-notation-wordpress-abcjs

Conditionally load JavaScript

function beliefmedia_add_abcjs_js($posts) {

if (empty($posts)) return $posts;

$shortcode_abcjs_true = false;

foreach ($posts as $post) {

if (stripos($post->post_content, '[music') !== false) {

$shortcode_abcjs_true = true;

break;

}

if ($shortcode_abcjs_true) {

wp_enqueue_script('abcjs', 'http://www.YourDomain.com/path/to/abcjs_basic_latest-min.js', true);

}

return $posts;

}

add_filter('the_posts', 'beliefmedia_add_abcjs_js');

Shortcode function

Usage: http://www.beliefmedia.com/abc-notation-wordpress-abcjs

https://github.com/paulrosen/abcjs

function beliefmedia_abcjs_notation($atts, $content) {

extract(shortcode_atts(array(

'defaultdirectory' => '/home/public_html/path/to/abcnotation/storage',

'notation' => 0, /* something.abc */

'class' => 'abc-paper',

'align' => 'center',

/* engraverParams */

'scale' => '1',

'staffwidth' => '580',

'paddingtop' => '15',

'paddingbottom' => '30',

'paddingright' => '50',

'paddingleft' => '15',

'editable' => false,

'add_classes' => false,

/* parserParams */

'print' => false,

'header_only' => false,

'stop_on_warning' => false,

/* midiParams. Not relevant now.. */

'qpm' => '180',

'program' => '2' /* For MIDI generation */

), $atts));

if ($print) $parser .= 'print: true,';

if ($header_only) $parser .= 'header_only: true,';

if ($stop_on_warning) $parser .= 'stop_on_warning: true,';

$parser = '{ ' . rtrim($parser, ',') . ' }';

if ($scale) $engraver .= 'scale: ' . $scale . ',';

if ($staffwidth) $engraver .= 'staffwidth: ' . $staffwidth . ',';

if ($paddingtop) $engraver .= 'paddingtop: ' . $paddingtop . ',';

if ($paddingbottom) $engraver .= 'paddingbottom: ' . $paddingbottom . ',';

if ($paddingright) $engraver .= 'paddingright: ' . $paddingright . ',';

if ($paddingleft) $engraver .= 'paddingleft: ' . $paddingleft . ',';

if ($editable) $engraver .= 'editable: true,';

if ($editable) $engraver .= 'add_classes: true,';

$engraver = '{ ' . rtrim($engraver, ',') . ' }';

if ( ($notation) && (strpos($notation,'http://') !== false) && (!file_exists($defaultdirectory . '/' . md5($notation) . '.abc')) ) copy($notation, $defaultdirectory . '/' . md5($notation) . '.abc');

$abcsource = ( ($notation) && (strpos($notation,'http://') !== false) ) ? $defaultdirectory . '/' . md5($notation) . '.abc' : $defaultdirectory . '/' . $notation;

if ($notation) $return = nl2br(file_get_contents($abcsource));

$return = ($notation) ? str_replace("<br />", '', $return) : str_replace("<br />", '', $content);

$return = wp_specialchars_decode($return, ENT_QUOTES);

$return = str_replace("\r\n", "\x01", $return);

$return = str_replace("\n", "\x01", $return);

$return = str_replace('"', '\"', $return);

$return = str_replace("“", '\"', $return);

$return = str_replace("”", '\"', $return);

$return = str_replace("‘", "'", $return);

$return = str_replace("’", "'", $return);

$return = str_replace("″", '\"', $return);

$id = 'abc-paper-' . uniqid();

$output .= '<p><div id="' . $id . '" class="' . $class . '"></div></p>' .

'<script type="text/javascript">' .

'ABCJS.renderAbc("' . $id . '", "' . $return . '".replace(/\x01/g,"\n"), ' . $parser . ', ' . $engraver . ');' .

'</script>';

return $output;

100

}

101

add_shortcode( 'abcjs', 'beliefmedia_abcjs_notation' );

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, abcjs isn'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.js file (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.

Download

Title: Embed ABC Musical Notation in WordPress (WP Plugin)
Description: Embed ABC Musical Notation in WordPress with Shortcode (and ABCjs).
Download • Version 0.2, 144.8K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (1.4K)

■ ■ ■

Download our complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.