[{"name":"OpenSheetMusicDisplay","slug":"opensheetmusicdisplay","version":"1.4.0","author":"opensheetmusicdisplay.org","author_profile":"https://profiles.wordpress.org/opensheetmusicdisplay/","requires":"5.6.0","tested":"6.4.5","requires_php":"7.0.0","requires_plugins":[],"rating":0,"ratings":{"1":0,"2":0,"3":0,"4":0,"5":0},"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"downloaded":5399,"last_updated":"2024-02-22 1:56pm GMT","added":"2021-02-19","homepage":"","sections":{"description":"

This Gutenberg block brings OpenSheetMusicDisplay seamlessly to your WordPress site!
\nThis will allow you to render responsive MusicXML live in your visitors’ browser.

It enables uploading of .xml, .musicxml and .mxl files to your WordPress Media Library, which can then be selected in the block for rendering.

We have also added a shortcode in this plugin for those who do not use the Gutenberg editor.

Additionally, as of 1.3.0 we have added another block: PracticeBird Deeplink. This block allows you to deeplink your musicXML directly into our PracticeBird app via QR code, mobile icon, or both!

OpenSheetMusicDisplay Block Options

The block has a number of options in the sidebar (Inspector Controls) described here.

Rendering

The section immediately below the block heading contains two controls related to re-rendering the sheet music.

Automatically Rerender on Change

Toggle, Default: Off
\nWhen this is on, any change to the lower settings (except for ‘Container Aspect Ratio’) will trigger a re-render of the sheet music in the editor.

This is not recommended for larger pieces of sheet music, as rendering can take time.
\nIt is best to do ‘batch’ updates with the settings and use the ‘Rerender’ button to manually preview the changes.

Rerender

Button
\nThis button is used to trigger a manual rerender of the sheet music in the currently selected OSMD block.
\nThis is particularly useful for updating the settings of larger pieces of sheet music that take longer to render.

Basic Options

This section contains basic options for the block: the musicXML file to render as well as some display options.

Select Media

Button/File Select, Default: None Selected
\nThis control shows the currently selected score above it (if there is one).
\nThe 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.

Width (%)

Number Input, Default: 100
\nThis control translates directly to the CSS width of the sheet music.
\nWhat this means is that it controls the percentage of the parent container that the sheet music will take up.
\ne.g.
\n– If you have the OSMD block in a post set to 100%, it will fill the entire width of the post
\n– 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

Container Aspect Ratio

Dropdown/Number Input, Default: Auto (No Scrollbar)
\nThis dropdown sets the aspect ratio of the sheet music container – The height in relation to the width.
\nWhat this does pratically is add a scrollbar, which is useful with very long pieces that you don’t want to extend all the way down the page.
\n– Auto (No Scrollbar) will render the full sheet music as-is, taking up as much room as needed.
\n– Landscape makes the height 0.667x the width. Or, put another way, the width will be 1.5x the height (3:2)
\n– Portrait sets the height to 1.778x the width. Width being 0.5625x the height (9:16)
\n– 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.

Zoom (%)

Number Input, Default: 100
\nThis input allows you to control the zoom level of the rendered sheet music.

Drawing Options

These are additional OSMD drawing options – Whether to render certain parts of the sheet music.

Draw Title

Toggle, Default: On
\nWhether to render the sheet music title.

NOTE: Draw Subtitle must be off for this to be reflected in the sheet music (currently).

Draw Subtitle

Toggle, Default: On
\nWhether to render the sheet music subtitle.

Draw Composer

Toggle, Default: On
\nWhether to render the sheet music composer.

NOTE: There seem to be some rendering issues in OSMD with this option if ‘Draw Lyricist’ is not off as well. We are working on this.

Draw Lyricist

Toggle, Default: On
\nWhether to render the sheet music Lyricist.

Draw Metronome Marks

Toggle, Default: On
\nWhether to render the tempo markings.

Draw Part Names

Toggle, Default: On
\nWhether to render the part names before each stave.

Draw Part Abbreviations

Toggle, Default: On
\nWhether to render the part abbreviations on subsequent music systems.

Draw Measure Numbers

Toggle, Default: On
\nWhether to render measure numbers

Draw Measure Numbers Only at System Start

Toggle, Default: Off
\nWhether to render measure numbers just at the start of new music systems.

Draw Time Signatures

Toggle, Default: On
\nWhether to render time signatures on the staves

New Systems From XML

Toggle, Default: Off
\nThis determines whether system breaks specified in the MusicXML will be honored.

OpenSheetMusicDisplay Shortcode Options

The shortcode has the same options as above, though as attributes written in camelCase.

In the shortcode any Toggle attribute values are specified with true or false.
\nNumeric values can be specified as float or integers.

To specify the musicXML you need to provide a URL; This can be copied from your Media center in WordPress when viewing the details of a file.

The shortcode is “opensheetmusicdisplay”. Example given with full set of attributes:
\n [opensheetmusicdisplay musicXmlUrl=\"http://url.com/wp-content/uploads/sites/2/2021/02/Beethoven_AnDieFerneGeliebte.xml\" zoom=\"0.75\" width=\"75\" \n drawTitle=\"false\" drawSubtitle=\"false\" drawComposer=\"true\" drawLyricist=\"true\" drawMetronomeMarks=\"false\" drawPartNames=\"false\" drawPartAbbreviations=\"false\" \n drawMeasureNumbers=\"true\" drawMeasureNumbersOnlyAtSystemStart=\"true\" drawTimeSignatures=\"true\"]

It’s important to note that zoom is out of 1: so 1 = 100%, 0.75 = 75%, 2 = 200%, etc.

PracticeBird DeepLink Block Options

This block also has a number of options in the sidebar (Inspector Controls) described here (as well as via info menus available in the sidebar).

Basic Options

This section contains basic options for the block: the musicXML file to deep link as well as how to render the deeplink.

Select Media

Render Behavior

Radio Button, Default: Responsive – QR and Icon
\nThese are full descriptions of what each option does:
\nResponsive – QR and Icon: Both a QR code and icon for mobile devices will be generated. Which one is displayed will depend on the device screen size: greater than 991px for QR code, less than 992px for linked icon.
\nQR Code Only: Only a QR code will be generated and displayed regardless of device size or type.
\nIcon Only: Only a icon w/ a link will be generated and displayed regardless of device size or type.
\nSmart Detect – QR or Icon: The device will attempt to be detected. If iOS or Android is detected, a mobile icon will be generated. For all other platforms, a QR code will be generated.

QR Code Options

Scale

Slider, Default: 1
\nThis is the scale of the QR code and changes it’s rendered size. (the Default scale of 1 is 256px x 256px)

Icon Options

Auto-redirect to App Store

Toggle Button, Default: On
\nOn: If the mobile deep-link icon is displayed and the deep-link fails on click, an attempt will be made to detect the mobile platform and redirect to the proper PracticeBird app store link (Android or iOS).
\nOff: No attempt to redirect will be made, and if the deeplink fails, it will fail silently with the page not reacting.

Additionally, the icon can be resized via the block editor when it is rendered. If you select “Icon Only” while rendering, you will see resize toggles available on the corners of the icon.

PracticeBird DeepLink Shortcode Options

The shortcode has the same options as above, though in some cases are named differently.

the musicXML url is defined by the ‘target’ attribute.
The icon size is defined (in px) by the ‘iconSize’ attribute.
The QR scale is defined by the ‘qrScale’ attribute.
the ‘generateBehavior’ attribute is a string with the following possible values, which correspond to the values mentioned above:\n
- QR_AND_MOBILE
- QR_ONLY
- MOBILE_ONLY
- DETECT
\n

In the shortcode any toggle or Toggle attribute values are specified with true or false.
\nNumeric values can be specified as float or integers.

To specify the musicXML you need to provide a URL; This can be copied from your Media center in WordPress when viewing the details of a file.

The shortcode is “pb-deep-link”. Example given with full set of attributes:
\n [pb-deep-link target=\"https://staging.opensheetmusicdisplay.org/wp-content/uploads/sites/2/2021/09/thescale.musicxml\" generateBehavior=\"QR_AND_MOBILE\" iconSize=\"50\", qrScale=\"1.5\", autoRedirectAppStore=\"false\"]

About Us

We have developed the open-source OpenSheetMusicDisplay: A library for rendering MusicXML in the browser using Vexflow.
\nWe created this plugin to make it as easy as possible for WordPress users to use our library to render sheet music on their site.
\nWe hope you find this plugin useful, and if so, please consider sponsoring us or donating at our link above.
\nThank you!

\n","installation":"

Install the plugin via the WordPress Plugin installer.\n
1. In the WordPress admin sidebar, navigate to Plugins -> Add New.
2. WordPress Automatic Installation\n
  1. Search for its listing near the top of this page: “OpenSheetMusicDisplay”.
  2. Review the plugin information, reviews, details, etc.
  3. Click “Install Now” and WordPress will automatically install it.
  \n
3. or Manual Upload\n
  1. At the very top towards the left, select the “Upload Plugin” button.
  2. Select the zip file for this plugin.
  3. Click “Install Now”
  \n
\n
Activate the Plugin\n
1. In the WordPress admin sidebar, navigate to Plugins -> Installed Plugins
2. Locate the “OpenSheetMusicDisplay” plugin in this list
3. Select “Activate” beneath it
\n

This plugin should also be available via the Gutenberg Block directory:
\n1. Navigate to a post where you want to add sheet music.
\n2. Click the “+” icon to add a new block
\n3. Select “Browse all” at the bottom of the block selection pop-up
\n4. in the search bar at the top of the side panel, type “musicxml”
\n5. Click “Add Block” on the “OpenSheetMusicDisplay” result

NOTE: If updating to version 1.0.0 from previous versions, you will need to “Attempt Recovery” on anywhere the block has been included.
\nWe have switched to server-side rendering, and this should now not happen with future updates.

\n","faq":"\n

\nWhere can I receive support for this block?\n\n

Please contact us at support@opensheetmusicdisplay.org

\nIs feature x, y, or z available? Will it be available?\n\n

We now have a premium add-on to our plugin available here: https://opensheetmusicdisplay.org/wp-plugin/pricing/
\nIf you’d like:
\n-Audio Player
\n-Transposition
\n-Performance Mode Rendering
\n-Brand coloring (for playback buttons)
\n-Premium Support

Please consider subscribing!

\n\n","changelog":"

1.4.0

Encode attributes via hex for HTML
UI Tweaks (add spacing)
Bugfixes for PHP deprecation ($ string templating syntax)
isset check for PHP server variable warnings (https://wordpress.org/support/topic/php-warning-476/#post-17445960)
Update to the latest OSMD version: 1.8.5.
\nSee changelog for all updates:
\nhttps://github.com/opensheetmusicdisplay/opensheetmusicdisplay/blob/develop/CHANGELOG.md

1.3.9

Update some deprecated WordPress lib calls
Test with 6.4

1.3.8

Update to the latest OSMD version: 1.8.4.
\nSee changelog for all updates:
\nhttps://github.com/opensheetmusicdisplay/opensheetmusicdisplay/blob/develop/CHANGELOG.md

1.3.7

Update to the latest OSMD version: 1.8.3.
\nSee changelog for all updates:
\nhttps://github.com/opensheetmusicdisplay/opensheetmusicdisplay/blob/develop/CHANGELOG.md

1.3.6

Update to the latest OSMD version: 1.8.0.
\nSee changelog for all updates:
\nhttps://github.com/opensheetmusicdisplay/opensheetmusicdisplay/blob/develop/CHANGELOG.md

1.3.5

Minor CSS bugfix with unintended elements being hidden
\n-We use a small responsive shim CSS sheet to imitate some basic bootstrap classes (hiding, display, size hiding, etc.)
\n-Other plugins (e.g. WooCommerce) use the hidden classes and don’t remove them from elements when they are intended to be displayed
\n-This caused those elements to be hidden from the user when both plugins are Activate
\n-Removed the !important flag from these classes to accept the element level styling to take effect

1.3.4

Updated to latest OSMD Version (1.7.5, from 1.7.1) See changelog for all updates: https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/blob/develop/CHANGELOG.md
Tested with WP 6.2

1.3.3

Updated to latest OSMD Version (1.7.1, from 1.4.3) See changelog for all updates: https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/blob/develop/CHANGELOG.md
Tested with WP 6.1.1

1.3.2

Bugfix for rewrite rules:
\nOn certain WP instances (specific mix of plugins/configuration) flushing the rewrite rules caused issues tied to specific permalink structures.
\nNo longer flush the rewrite rules to resolve this issue.

1.3.1

Minor bugfix with attribute filtering (would not work correctly with certain WordPress hosts)

1.3.0

*Fixes for Default Settings:
\nDefault settings changes will no longer overwrite existing blocks. This was due to how WordPress handles default block attributes.
\n*Add PracticeBird Deeplink block
\nNow an additional block is included to deep-link music sheets into our free PracticeBird app for practice!
\n*Updated to latest OSMD version:
\n-More performant rendering! 30-60% faster rendering times!
\n-Misc. bugfixes

1.2.0

*Add Default Settings Page:
\nNow an OSMD settings page will appear in the admin menu. These are to specify default settings that will apply to all new OSMD blocks as well as blocks that have not had their settings values updated from the default.

1.1.8

*Add resize threshold calculation to prevent OSMD from continuously re-rendering (on front-end).
\nThis would occur in rare instances based on a sites’ CSS combined with specific user screen sizes.

1.1.7

*Updated to latest OSMD Version (1.4.3)

1.1.6

Updated to the latest OSMD version (1.2.+)
Process options filters before render on the front-end (already occurred for the admin facing block)

1.1.5

** A notice will appear once for each editing user in the admin section for this – After this update the Gutenberg block will no longer re-render automatically on resize. **
\n* Remove rerender on resize from editor completely. The block will no longer automatically rerender on resize. This is because opening other panes in the editor would trigger a resize, making it very annoying to work with.
\n* Update rerender button to always be available. Since automatic resizing is disabled, you can now re-render anytime you choose with the rerender button.
\n* Add support for additional CSS classes: Will now allow other plugins/the user to add CSS classes to the block.

1.1.4

Add resize threshold – Fixes some of the issue with re-rendering too often.

1.1.3

Add line break option – Use XML line breaks

1.1.2

Fix for plugin framework

1.1.1

Bugfix for Vexflow incompatibility with PrototypeJS (Made plugin incomaptible with jTab plugin)

1.1.0

Update to OSMD release 1.0.0. All changes here: https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/discussions/1021
Added shortcode functionality
Bugfixes for quote syntax issues

1.0.1

Minor updates for plugin extensions
\n* Allow more than one queueable attribute at a time
\n* Add additional filter hooks
\n* Fixes for resize on block editor

1.0.0

Updates to this version may require all OSMD blocks to be ‘Attempt Recovery’. This will not cause any issues and it is fine to recover the blocks.
\n* Refactor code to include WP filters
\n * Allows plugin extensions easily
\n* Switch to dynamic server-side rendering
\n * When new attributes are added in updates/plugins, won’t flag the block as invalid
\n* Do no include scripts on other admin pages
\n * Now checks page before including OSMD Javascript to prevent conflicts on other admin pages
\n* Fix bug for width not changing with certain themes

0.9.4

Update to latest OSMD version
Fixes for user-facing loading spinner\n
- Will no longer take up whole Screen, just sheet music area
\n
Fixes for re-render trigger\n
- Will only re-render when width of sheet music container is actually updated (fixes Chrome mobile issue on scroll)
\n
Attempts to reload sheet music 5 times before showing user error

0.9.2

Initial Release

\n","screenshots":"

$\"This$
This is a two-column post example with the OSMD block in the second column with zoom level set. Shows Basic options to the right.
$\"This$
This shows the previous post on the public-facing side.
$\"This$
This shows the media selector where you can choose MusicXML.
$\"This$
This shows another post with various options set (75% width, no draw title, Portrait aspect ratio)

"},"short_description":"Block or shortcode to render MusicXML in the browser as sheet music using OSMD.","download_link":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.4.0.zip","screenshots":{"1":{"src":"https://ps.w.org/opensheetmusicdisplay/assets/screenshot-1.png?rev=2477993","caption":"This is a two-column post example with the OSMD block in the second column with zoom level set. Shows Basic options to the right."},"2":{"src":"https://ps.w.org/opensheetmusicdisplay/assets/screenshot-2.png?rev=2477993","caption":"This shows the previous post on the public-facing side."},"3":{"src":"https://ps.w.org/opensheetmusicdisplay/assets/screenshot-3.png?rev=2477993","caption":"This shows the media selector where you can choose MusicXML."},"4":{"src":"https://ps.w.org/opensheetmusicdisplay/assets/screenshot-4.png?rev=2477993","caption":"This shows another post with various options set (75% width, no draw title, Portrait aspect ratio)"}},"tags":{"block":"block","music":"music","osmd":"osmd","sheet-music":"sheet music","shortcode":"shortcode"},"versions":{"0.9.2":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.0.9.2.zip","0.9.4":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.0.9.4.zip","1.0.0":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.0.0.zip","1.0.1":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.0.1.zip","1.1.0":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.1.0.zip","1.1.1":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.1.1.zip","1.1.2":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.1.2.zip","1.1.3":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.1.3.zip","1.1.4":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.1.4.zip","1.1.5":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.1.5.zip","1.1.6":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.1.6.zip","1.1.7":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.1.7.zip","1.1.8":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.1.8.zip","1.3.0":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.3.0.zip","1.3.1":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.3.1.zip","1.3.2":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.3.2.zip","1.3.3":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.3.3.zip","1.3.4":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.3.4.zip","1.3.5":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.3.5.zip","1.3.6":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.3.6.zip","1.3.7":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.3.7.zip","1.3.8":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.3.8.zip","1.3.9":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.3.9.zip","1.4.0":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.1.4.0.zip","trunk":"https://downloads.wordpress.org/plugin/opensheetmusicdisplay.zip"},"donate_link":"https://OSMD.org/Donate","icons":{"1x":"https://ps.w.org/opensheetmusicdisplay/assets/icon.svg?rev=2477993","svg":"https://ps.w.org/opensheetmusicdisplay/assets/icon.svg?rev=2477993"}}]

osmd

OpenSheetMusicDisplay

Get New Themes & Resources