ABC Notation Plugin

Anywhere that shortcodes are accepted. That is, on pages, post, and widgets. It will not work on comments.

The plugin includes the abcjs JavaScript library. The string that is put in the shortcode is passed to that library, which translates it and renders it in an SVG element that it places on the page instead of the shortcode.

There is much written about ABC Notation around the web. You can start here

The shortcode can take the same parameters as abcjs. See the documentation for details.

There is also an interactive way to play with the parameters: Configurator.

Here are some examples:

To make the music responsive:
[abcjs engraver="{ responsive: 'resize' }"]
... some ABC string ...
[/abcjs]

To set or override the tempo:
[abcjs-midi midi="{ qpm: 150 }"]
... some ABC string ...
[/abcjs-midi]

List of parameters to the [abcjs] shortcode:

[abcjs class="abc-paper"] etc... [/abcjs] puts the named class on the generated `<svg>` element. [abcjs options="{}"] etc... [/abcjs] passes the javascript objects straight through to `abcjs.renderAbc`. See the abcjs documentation for details. Note that you need to put quotes around the the options parameter. [abcjs file="https://url/to/abc/file"] loads the string from the specified file instead of the embedded string. You can upload this file using Add New Media or it can reside in any publicly available place. [abcjs number_of_tunes=2] if there are more than one tune in the ABC string, this specifies how many should be printed out. If this is set to more than the number of tunes in the string, that's ok, the additional places are ignored, so if you want to be sure you have all the tunes, then use a high number for this. 

List of parameters to the [abcjs-midi] shortcode:

[abcjs-midi class="abc-paper"] etc... [/abcjs-midi] puts the named class on the generated MIDI element. [abcjs-midi parser="{}" midi="{}"] etc... [/abcjs-midi] passes the javascript objects straight through to `abcjs.renderMidi`. See the abcjs documentation for details. [abcjs-midi file="https://url/to/abc/file"] etc... [/abcjs-midi] loads the string from the specified file instead of the embedded string. You can upload this file using Add New Media or it can reside in any publicly available place. [abcjs-midi number_of_tunes=2] etc... [/abcjs-midi] if there are more than one tune in the ABC string, this specifies how many should be printed out. If this is set to more than the number of tunes in the string, that's ok, the additional places are ignored, so if you want to be sure you have all the tunes, then use a high number for this. 

List of parameters to the [abcjs-audio] shortcode:

[abcjs-audio class-paper="abcjs-paper"] etc... [/abcjs-audio] puts the named class on the generated `<svg>` element. [abcjs-audio class-audio="abcjs-audio"] etc... [/abcjs-audio] puts the named class on the generated MIDI element. [abcjs-audio params="{}"] etc... [/abcjs-audio] passes the javascript objects straight through to `abcjs.renderAbc` and `abcjs.renderMidi`. See the abcjs documentation for details. [abcjs-audio file="https://url/to/abc/file"] etc... [/abcjs-audio] loads the string from the specified file instead of the embedded string. You can upload this file using Add New Media or it can reside in any publicly available place. [abcjs-audio number_of_tunes=2] etc... [/abcjs-audio] if there are more than one tune in the ABC string, this specifies how many should be printed out. If this is set to more than the number of tunes in the string, that's ok, the additional places are ignored, so if you want to be sure you have all the tunes, then use a high number for this. [abcjs-audio animate="false"] etc... [/abcjs-audio] If true, this will cause a cursor to follow the music as it is playing. [abcjs-audio qpm="undefined"] etc... [/abcjs-audio] If this is present, then it sets the beats per minute. If is not set, then the beats per minute is set by the `Q:` line in the ABC string. 

Use the “shortcode block” type block in the page editor. That will help keep the quotation marks and any other interpreted characters from being changed by WordPress.

This plugin uses the upload_mimes filter to allow files with the extension .abc to be uploaded. However, there are some other plugins that can cause this to break. If you get the security warning when trying to upload a file, try disabling other plugins to see if the problem goes away. You may be able to narrow down the problem.

If you can’t easily work around that, you can change the file extension to .txt.