digital sheet music renderer

Introducing OSMD Version 1.3.0.

Rendering Music XML with Open Sheet Music Display just landed on another level. Other than bugfixes, its latest release is packed with 4 major improvements. In this post, we’ll give you an overview, as well insights from our developer’s perspective.

Making the new release

This update is the culmination of the efforts of the last two months.
Other than bug fixing we wanted to deliver our community a better OSMD, spiced with new ideas from our side.

The improvements in this update were mostly by Simon (sschmidTU on Github).

New OSMD improvements

Here are the 4 major improvements of the new OSMD version and what makes them special.

Fingerings, rests and chord symbols no longer collide with notes

Fingerings were always a special case in OSMD because there were multiple ways to implement them with Vexflow. Unfortunately, Vexflow didn’t always give us correct bounding boxes and led to fingerings overlapping notes.
So we completely overhauled the system and now actually calculate fingerings as labels in OSMD without Vexflow’s help, and immediately have correct bounding boxes and positioning without overlaps.

We did a similar improvement for chord symbols and rests by the way, which also do not collide with notes anymore.

music xml fingerings
Improved fingerings without colliding notes
Rests don’t overlap notes anymore (before/after)
ChordSymbols don’t collide with notes anymore, and a default offset is now unnecessary
(before/after)

SVG manipulation

For SVG wizards, graphical labels now save their SVG node. This lets you e.g. change a fingering without re-rendering.

For most of the options and EngravingRules you can set in OSMD, you need to call the render function again, which takes some time. This makes it so that you can manipulate the SVG node of fingerings directly, and don’t need to call the render function. For example, you can instantly change a fingering, chord symbol, or lyric without any performance impact.

New Cursor utility method GNotesUnderCursor

Our cursor has a new method to return GraphicalNotes instead of Notes.
This is a utility function that makes it easier to get GraphicalNotes from the cursor, eg. so that you can get their SVGNode (via VexFlowGraphicalNote).

Improved performance

Better bounding box checks (especially for fingerings) boost performance.
With the fingering overlap improvement we mentioned above, we now immediately get correct bounding boxes, and don’t have to check fingerings pixel for pixel in our skyline calculations to find the highest colliding point per x coordinate, saving a lot of performance.

As a test, we called the render function on a score with many fingerings 20 times, and saved around 2 seconds (11 vs 9 seconds).

Future OSMD improvements

We are always looking for new improvements to OSMD. Especially those that our community needs and requests.

Feel free to take a look at our Github issues and pull requests. Currently, we are looking to integrate the brand new Vexflow 4. The new Vexflow allows sheet music devs to choose different music fonts, among them one that looks like hand-drawn music (Petaluma). It also comes with many other improvements and possibilities for score rendering. Looking at these benefits, the planned integration is the next logical step.

Performance improvements are also always on the lookout. Ideas like only rendering parts of the score, and starting to render the rest once the user scrolls it into view are in the works.

Let’s stay in touch

Other than new upgrades and plugins we’re very busy with making new content and screencasts about OSMD 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 like the audio player, or just try the OSMD demos.

Leave a Comment

Your email address will not be published.

Scroll to Top