View digital sheet music with the WordPress block editor – WordPress Tavern


OSMD plugin released on the front-end.

PhonicScore, a Vienna-based company, recently released its OpenSheetMusicDisplay plug-in (OSMD). This is a WordPress block designed for rendering digital sheet music in the browser.

The OSMD plugin is built on the JavaScript library of the team of the same name, a project officially released in 2016. It is a bridge between VexFlow and MusicXML. VexFlow is a JavaScript API for rendering music notation, and MusicXML is an open standard format for exchanging digital sheet music.

“As WordPress is one of the most popular CMS, we decided to create an out-of-the-box solution that users could easily connect to their WP websites,” Marin Jurcic wrote in the announcement message. “It wasn’t an easy build, luckily for us OSMD provided all the tools for the job. To do this, we relied heavily on the latest version of OSMD and integrated it into the plugin. To add the “out-of-the-box features” and make it work, we used the WordPress framework / library – Javascript and PHP. “

This is the type of plugin that allows the beauty of the block editor to shine. A few years ago, such a feat would only have been possible via the shortcode system. Users should have manually typed in all of the shortcode’s arguments – assuming they could all remember everything – and preview the message to see what it would look like. Today, they can interact and make changes directly to their score display from the editor.

OSMD was never a first WordPress project. It is a stand-alone library that the company has decided to make available to WordPress. With the power of the block system, they were able to do it. One can only hope that we see investments in our community from similar projects now that the block editor has become more stable.

We are barely digging below the surface for what will be possible over time. Blocks like OSMD build on the optimism I had when the system was first unveiled.

To use the plugin, users simply need to insert the OpenSheetMusicDisplay block into their content canvas. It is located in the Integrate category. From there, they have to select or download an XML file through the blocking options sidebar (.xml, .musicxml, and .mxl files are supported). Dragging and dropping a file does not work in this version – maybe a feature request for 2.0?

Insertion and customization of the OSMD block in the WordPress editor.
OSMD block in the editor.

The “Basic options” tab has several width and aspect ratio settings. For the most part, it’s probably best to leave these defaults. However, it will depend on your theme and the space it offers.

The block does not currently support the standard wide alignment system. Instead, it has a width option, allowing users to determine the front output. Since this is a non-standard option, it may not work well with all themes. Depending on how the user’s active theme handles the width of the content, they can achieve very different results.

The “Drawing Options” tab is where users have more control over customizing the output. These settings allow users to determine what is “drawn” in the digital score. One option is whether to draw the composer’s name. Another is to produce time signatures. With 10 settings in total, there is a lot to tinker with.

The biggest problem I encountered with the plugin was the editor freezing every now and then. It appeared that the block was trying to recharge, even when I was working outside of it. This happened even though you cleared the “Render automatically on change” check box.

Overall, this plugin should serve those users who want to display sheet music well. It is simple to use and offers plenty of customization options. The team has a OSMD library demo in action on their site.

For those who are not inclined to share digital sheet music, well, we can all appreciate the genius of JS Bach. Air:



Source link

Comments are closed.