=== OpenSheetMusicDisplay === Contributors: opensheetmusicdisplay, fredmeister77 Donate link: https://OSMD.org/Donate Tags: block,shortcode,osmd,music,sheet music,musicxml,opensheetmusicdisplay Requires at least: 5.6.0 Tested up to: 6.4.3 Stable tag: 1.4.0 Requires PHP: 7.0.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html
Block or shortcode to render MusicXML in the browser as sheet music using OSMD.
== Description ==
This plugin provides two blocks for MusicXML usages:
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.)
The block has a number of options in the sidebar (Inspector Controls) described here.
The section immediately below the block heading contains two controls related to re-rendering the sheet music.
Toggle, Default: Off When 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. It is best to do 'batch' updates with the settings and use the 'Rerender' button to manually preview the changes.
Button This button is used to trigger a manual rerender of the sheet music in the currently selected OSMD block. This is particularly useful for updating the settings of larger pieces of sheet music that take longer to render.
This section contains basic options for the block: the musicXML file to render as well as some display options.
Button/File Select, Default: None Selected 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.
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. e.g.
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. What 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.
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.
Number Input, Default: 100 This input allows you to control the zoom level of the rendered sheet music.
These are additional OSMD drawing options - Whether to render certain parts of the sheet music.
Toggle, Default: On Whether to render the sheet music title.
NOTE: Draw Subtitle must be off for this to be reflected in the sheet music (currently).
Toggle, Default: On Whether to render the sheet music subtitle.
Toggle, Default: On Whether 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.
Toggle, Default: On Whether to render the sheet music Lyricist.
Toggle, Default: On Whether to render the tempo markings.
Toggle, Default: On Whether to render the part names before each stave.
Toggle, Default: On Whether to render the part abbreviations on subsequent music systems.
Toggle, Default: On Whether to render measure numbers
Toggle, Default: Off Whether to render measure numbers just at the start of new music systems.
Toggle, Default: On Whether to render time signatures on the staves
Toggle, Default: Off This determines whether system breaks specified in the MusicXML will be honored.
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. Numeric 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:
[opensheetmusicdisplay musicXmlUrl="http://url.com/wp-content/uploads/sites/2/2021/02/Beethoven_AnDieFerneGeliebte.xml" zoom="0.75" width="75"
drawTitle="false" drawSubtitle="false" drawComposer="true" drawLyricist="true" drawMetronomeMarks="false" drawPartNames="false" drawPartAbbreviations="false"
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.
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).
This section contains basic options for the block: the musicXML file to deep link as well as how to render the deeplink.
Button/File Select, Default: None Selected 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 for deep linking.
Radio Button, Default: Responsive - QR and Icon These are full descriptions of what each option does: Responsive - 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. QR Code Only: Only a QR code will be generated and displayed regardless of device size or type. Icon Only: Only a icon w/ a link will be generated and displayed regardless of device size or type. Smart 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.
Slider, Default: 1 This is the scale of the QR code and changes it's rendered size. (the Default scale of 1 is 256px x 256px)
Toggle Button, Default: On On: 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). Off: 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.
The shortcode has the same options as above, though in some cases are named differently.
In the shortcode any toggle or Toggle attribute values are specified with true or false. Numeric 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:
[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. We created this plugin to make it as easy as possible for Wordpress users to use our library to render sheet music on their site. We hope you find this plugin useful, and if so, please consider sponsoring us or donating at our link above. Thank you!
== Installation ==
This plugin should also be available via the Gutenberg Block directory:
NOTE: If updating to version 1.0.0 from previous versions, you will need to "Attempt Recovery" on anywhere the block has been included. We have switched to server-side rendering, and this should now not happen with future updates.
== Frequently Asked Questions ==
= Where can I receive support for this block? =
Please contact us at support@opensheetmusicdisplay.org
= Is feature x, y, or z available? Will it be available? =
We now have a premium add-on to our plugin available here: https://opensheetmusicdisplay.org/wp-plugin/pricing/ If you'd like: -Audio Player -Transposition -Performance Mode Rendering -Brand coloring (for playback buttons) -Premium Support
Please consider subscribing!
== Screenshots ==
== Changelog ==
= 1.4.0 =
= 1.3.9 =
= 1.3.8 =
= 1.3.7 =
= 1.3.6 =
= 1.3.5 =
= 1.3.4 =
= 1.3.3 =
= 1.3.2 =
= 1.3.1 =
= 1.3.0 = Fixes for Default Settings: Default settings changes will no longer overwrite existing blocks. This was due to how Wordpress handles default block attributes. Add PracticeBird Deeplink block Now an additional block is included to deep-link music sheets into our free PracticeBird app for practice! *Updated to latest OSMD version: -More performant rendering! 30-60% faster rendering times! -Misc. bugfixes
= 1.2.0 = *Add Default Settings Page: Now 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). This 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 =
= 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.
= 1.1.4 =
= 1.1.3 =
= 1.1.2 =
= 1.1.1 =
= 1.1.0 =
= 1.0.1 = Minor updates for plugin extensions
= 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.
= 0.9.4 =
= 0.9.2 =