OSMD is a tool library for displaying and rendering Music XML in the browser. As WordPress is one of the most popular CMS’ we decided to make an out-of-the-box solution that users could easily plug in their WP websites. In this post, we’ll give you a breakdown of the OSMD plugin features, the installation process and give you a sneak peek of the things we have in store.
Crafting the plugin
This wasn’t an easy build, lucky for us OSMD provided all the tools for the job. To make this happen we relied heavily on the latest OSMD release and bundled it with the plugin. To add the “out-of-the-box features” and get it working we used WordPress’s framework/library – Javascript and PHP.
Features and rendering sheet music on your website
The plugin enables the user to fully customize how the Music XML is rendered. Some of the key features include:
1. Selecting media
This control shows the currently selected score above it (if there is one).
The button ‘Select Media’ opens your WordPress Media Library in a modal window, which allows you to select previously uploaded MusicXML, or to upload one to select for rendering in the block.
NOTE: Selecting a new file will always trigger a render of the new file, no matter if “Automatically Rerender on Change” is selected or not.
2. Changing width
Number Input, Default: 100
This control translates directly to the CSS width of the sheet music.
What this means is that it controls the percentage of the parent container that the sheet music will take up.
Example:
- If you have the OSMD block in a post set to 100%, it will fill the entire width of the post
- If you have the OSMD block in a column layout of a post set to 100%, it will fill the entire width of that column
3. Adjusting the container aspect ratio
Dropdown/Number Input, Default: Auto (No Scrollbar)
This dropdown sets the aspect ratio of the sheet music container – The height in relation to the width. Practically, this adds a scrollbar, which is useful with very long pieces that you don’t want to extend all the way down the page.
- Auto (No Scrollbar) will render the full sheet music as-is, taking up as much room as needed.
- The landscape makes the height 0.667x the width. Or, put another way, the width will be 1.5x the height (3:2)
- Portrait sets the height to 1.778x the width. Width being 0.5625x the height (9:16)
- Custom allows you to set your own value of what the width will be divided by to get the height.
NOTE: This control does not trigger or require a re-render since it is merely a CSS property of the sheet music container. It will be reflected immediately.
4. Zooming
Number Input, Default: 100
This input allows you to control the zoom level of the rendered sheet music.
5. Drawing options
These are additional OSMD drawing options – Whether to render certain parts of the sheet music. The plugin enables you to draw:
- Title – render the sheet music title
- Subtitle – render the sheet music subtitle
- Composer – render the sheet music composer
- Lyricist – render the sheet music Lyricist
- Metronome marks – render the tempo markings
- Part names – render the part names before each stave
- Part abbreviations – render the part abbreviations on subsequent music systems
- Measure numbers – render measure numbers
- Measure numbers only at system start – render measure numbers just at the start of new music systems.
- Draw time signatures – render time signatures on the staves
Free download and easy installation
Installing the plugin doesn’t require any development knowledge – you just need to know your way around the WordPress editor.
Installing the plugin
The plugin is free to download at the WP marketplace. Install the plugin via the WordPress Plugin installer.
Activating the plugin
Activate the plugin in 3 simple steps:
- In the WordPress admin sidebar, navigate to Plugins -> Installed Plugins
- Locate the “OpenSheetMusicDisplay” plugin in this list
- Select “Activate” beneath it
Who can use the plugin
This plugin is an ideal out-of-the-box solution for any kind of WP website that’s in need of (responsive) sheet music rendering. This goes for sheet music shops, online music courses, composers/arrangers, and so on.
Next steps (premium build)
Our job isn’t done yet- We’re still busy with some bug fixes and the base plugin as stable across WordPress installations and versions as possible. As mentioned above, we’re working on a premium version – the release is very soon. The premium plugin will be an extension to the OSMD plugin – So users will be able to install it alongside the base plugin and don’t need to do any uninstall or upgrade process. It will be a seamless upgrade.
Other than new upgrades and plugins we’re very busy with making new content and screencasts on OSDM and sheet music in general. Join our Discord channel to meet other sheet music devs or showcase your projects. You can also become a sponsor to get exclusive goodies and early releases to our builds.
