Music XML transposition plugin released!

COMMUNITY DEMAND FOR AUDIO TRANSPOSITION

It’s always important to listen to community feedback. Our community was asking for a transposition solution (even to the point where some members started to make it themselves). It only made sense, as the ability to transpose on the fly is one of the key features of any application that utilizes sheet music rendering. When making apps, demand often pushes you in the right direction – audio transposition was the obvious next upgrade of our repository.

SEMITONE IN MUSIC XML

Our goal was to make a solution that enables the user to specify the number of semitones to transpose the entire piece of sheet music up or down. It was a challenging task, but now we’re stoked to say that we did it. This plugin can be used in any scenario where the user requires transposing so they can play a musical piece not originally written for their instrument (or their vocal range if we’re talking about singing).

PROBLEM SOLVING AND IMPLEMENTATION

To take on the challenge of making the plugin we used the same tools as for developing OSMD. It was written in Typescript while the IDE was Visual Studio Code. If you’re unfamiliar with OSMD – all the essentials, frameworks, and setups on this are covered on this screencast. Basically, the plugin can be used in two ways:

• Using a recent build of OSMD + the transpose plugin file: Include both the OSMD javascript library and plugin file on the page.
• Using a build of OSMD with the transpose plugin ‘built-in’ (compiled with it). Include just the build file

Both of these options have the following steps to use the plugin:

1. Initialize OSMD normally (as outlined in our wiki), e.g.:

    var osmd = newopensheetmusicdisplay.OpenSheetMusicDisplay("div-container");var loadPromise = osmd.load("Beethoven_AnDieFerneGeliebte.xml");loadPromise.then(function(){

2. After you’ve loaded the MusicXML, instantiate your OSMD objects’ property  “TransposeCalculator” to a new

   TransposeCalculator:osmd.TransposeCalculator = new TransposeCalculator();

3. Set the “Transpose” property on the sheet property of the OSMD object to a number of semitones up (positive) or down (negative) you want to

   transpose:osmd.sheet.Transpose = 7;

4. Update the graphic, and re-render the sheet. It will be

   transposed:osmd.updateGraphic(); osmd.render();

Here’s a full code example:

//init osmd

var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay("div-container");

//load file

var loadPromise = osmd.load("Beethoven_AnDieFerneGeliebte.xml");

 

//wait for file to download

loadPromise.then(function(){

//initialize the transpose calculator

osmd.TransposeCalculator = new TransposeCalculator();

//Sheet doesn't exist until we load it, so need to do this in the promise result

osmd.sheet.Transpose = 7;

//Recalculate the graphical positions before we transpose, necessary

osmd.updateGraphic();

//Rerender the sheet music transposed up

osmd.render();

});

At the moment, the plugin is only available exclusively to our GitHub Sponsors. They also get other awesome perks and goodies.

There’s also the Discord channel for all topics related to digital sheet music and Music XML. Accept the invite and hang out with other sheet music developers. As for anything related to OSMD follow our blog for frequent updates.