Display Sheet Music in WordPress With the ABC Notation Plugin

If you’re a musician or a music teacher and want to show sheet music in WordPress, you might be interested in a new plugin developed by Paul Rosen called ABC Notation. ABC Notation uses ABCjs, an open source ABC music notation JavaScript library that renders sheet music.

To render sheet music, simply add the string you’d like to render between the [abcjs] shortcode. If you’re not familiar with the proper syntax to use, ABCNotation.com has a good article that explains the basics. The string that is used in the shortcode is passed to the ABCjs library, which translates and renders it into an SVG element.

Here’s an example of ABC Notation in action. The first image shows the string while the second shows the rendered output.

This slideshow requires JavaScript.

ABC Notation is an excellent example of a plugin that might not have a large audience, but will come in handy to those who need it. I tested it on WordPress 4.2 beta 3 and didn’t encounter any issues. You can download it for free from the WordPress plugin directory.

4

4 responses to “Display Sheet Music in WordPress With the ABC Notation Plugin”

  1. Closely related (basically the same niche audience) but with a completely different approach is my Sheet Music Library plugin (complete, needs a few tweaks before publishing), which is a custom post type with several taxonomies that works primarily off of PDF sheet music and audio recording uploads. It’ll work better for larger pieces, whereas this plugin is likely very useful for short excerpts and ideas; gives me a few ideas for use cases, in fact!

    My plugin powers my sheet music library: http://celloexpressions.com/music/. I can send the beta version to anyone interested that contacts me, more details here: http://celloexpressions.com/blog/new-sheet-music-library-the-story/. IT used pdf to image conversion to display preview directly on the site, linking to PDF downloads for the whole thing.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.