前言介紹
- 這款 WordPress 外掛「OpenSheetMusicDisplay」是 2021-02-18 上架。
- 目前有 100 個安裝啟用數。
- 上一次更新是 2024-02-22，距離現在已有 437 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.6.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.0.0 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
fredmeister77 | opensheetmusicdisplay |
外掛標籤
osmd | block | music | shortcode | sheet music |
內容簡介
這個 Gutenberg 區塊可以讓你在 WordPress 網站無縫使用 OpenSheetMusicDisplay！
這可以讓你在訪客的瀏覽器上展示即時響應的 MusicXML。
這個外掛讓你可以將 .xml、.musicxml 與 .mxl 檔案上傳至 WordPress 媒體庫，並在區塊中選擇展示。
我們也在這個外掛中加入了短代碼，供不使用 Gutenberg 編輯器的使用者使用。
此外，從版本 1.3.0 開始，我們也加入了另一個區塊：PracticeBird Deeplink。此區塊可以透過 QR 碼、手機圖標或二者都有來直接將你的 musicXML 深層鏈接至我們的 PracticeBird 應用程式！
OpenSheetMusicDisplay 區塊選項
這個區塊有一些選項可以在側邊欄（Inspector Controls）設定，以下是其說明：
Rendering
區塊標題下方的區塊包含兩個跟重新渲染樂譜相關的控制項。
Automatically Rerender on Change
核取方塊，預設：關閉
當此功能開啟時，任何一個設定條目（除了「容器長寬比率」）的變動都會觸發在編輯器中重新渲染樂譜。
這在樂譜較大時不太建議使用，因為渲染可能需要一定時間。
最好還是批量更新設定，並使用「重新渲染」按鈕手動預覽變更。
Rerender
按鈕
這個按鈕可以手動觸發當前選取的 OSMD 區塊進行重新渲染。
這特別適用於更新較長樂譜的設定，因為這些樂譜的渲染時間比較長。
基本選項
這個區塊含有區塊的基本選項：用於渲染的 musicXML 檔案以及一些顯示選項。
Select Media
按鈕/選擇檔案，預設：未選取
這個控制項會在其上方顯示當前選取的曲譜檔案（若已選取）。
按下「選擇媒體」按鈕會開啟 WordPress 媒體庫的視窗，這可以讓你從先前上傳的 MusicXML 中選擇一個檔案來展示，或上傳一個新檔案以供區塊使用。
注意：選取新的檔案會始終觸發檔案的重新渲染，不論「自動在變更時重新渲染」是否開啟。
Width (%)
數值輸入框，預設：100
此控制項會直接影響樂譜的 CSS 寬度。
這表示它控制的是樂譜區塊在父容器中所佔的百分比。
例如：
- 如果你在文章中的 OSMD 區塊設為 100%，它將佔據整個文章的寬度。
- 如果你在文章的欄位佈局中的 OSMD 區塊設為 100%，它將填滿該欄位的整個寬度。
Container Aspect Ratio
下拉選單/數值輸入框，預設：自動（無捲軸）
這個下拉選單用於設定樂譜區塊的長寬比率，亦即高度與寬度的比例。
實際上，這會加入一個捲軸並且非常適合應用在很長、你不想要一路延伸到頁面底部的樂譜之上。
- Auto（無捲軸）會原封不動地展示整個樂譜，並且需要多大空間就佔多大空間。
- Landscape 會讓高度為寬度的 0.667 倍。換句話說，寬度為高度的 1.5 倍（3:2）。
- Portrait 會將高度設定為寬度的 1.778 倍，寬度為高度的 0.5625 倍（9:16）。
- Custom 讓你可以自定義用寬度除以什麼數值可以得到高度。
注意：這個控制項不會觸發或需要重新渲染。
原文外掛簡介
This Gutenberg block brings OpenSheetMusicDisplay seamlessly to your WordPress site!
This 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
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.
Rerender
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.
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
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.
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.
e.g.
– 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
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.
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.
– Auto (No Scrollbar) will render the full sheet music as-is, taking up as much room as needed.
– 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.
Zoom (%)
Number Input, Default: 100
This 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
Whether 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
Whether to render the sheet music subtitle.
Draw Composer
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.
Draw Lyricist
Toggle, Default: On
Whether to render the sheet music Lyricist.
Draw Metronome Marks
Toggle, Default: On
Whether to render the tempo markings.
Draw Part Names
Toggle, Default: On
Whether to render the part names before each stave.
Draw Part Abbreviations
Toggle, Default: On
Whether to render the part abbreviations on subsequent music systems.
Draw Measure Numbers
Toggle, Default: On
Whether to render measure numbers
Draw Measure Numbers Only at System Start
Toggle, Default: Off
Whether to render measure numbers just at the start of new music systems.
Draw Time Signatures
Toggle, Default: On
Whether to render time signatures on the staves
New Systems From XML
Toggle, Default: Off
This 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.
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.
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
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.
Render Behavior
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.
QR Code Options
Scale
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)
Icon Options
Auto-redirect to App Store
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.
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:
QR_AND_MOBILE
QR_ONLY
MOBILE_ONLY
DETECT
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!
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「OpenSheetMusicDisplay」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
0.9.2 | 0.9.4 | 1.0.0 | 1.0.1 | 1.1.0 | 1.1.1 | 1.1.2 | 1.1.3 | 1.1.4 | 1.1.5 | 1.1.6 | 1.1.7 | 1.1.8 | 1.3.0 | 1.3.1 | 1.3.2 | 1.3.3 | 1.3.4 | 1.3.5 | 1.3.6 | 1.3.7 | 1.3.8 | 1.3.9 | 1.4.0 | trunk |
延伸相關外掛（你可能也想知道）
Sheet Music Libary 》這個樂譜庫外掛是借助WordPress框架以有條理的方式在線上發布樂譜的工具。使用自定義的樂譜文章類型和作曲家、流派、難度和編曲等分類法，您可以上傳、組織和...。