How to transpose music - Githubissues

yangyangnote commented 3 years ago

Now I have added the webpage displaying the staff to the iOS project, and by passing midi data, use (var vrvToolkit = new verovio.toolkit(); ) vrvToolkit.loadData(mididata); to display the staff

How do I use on this basis -- transpose parameter to transpose this staff?

craigsapp commented 3 years ago

You cannot load MIDI data into verovio, only export it. So do you have an error when running vrvToolkit.loadData(mididata);?

yangyangnote commented 3 years ago

@craigsapp At the beginning I thought so too, but after practice, there is no error, and the staff can be displayed directly. I guess I completed the conversion of midi files into mei files in loaddata.

yangyangnote commented 3 years ago

@craigsapp Sorry I made a mistake. I loaded a MusicXml file, which may be converted into a mei file in loaddata, not a midi file. How can I transpose on this basis?

craigsapp commented 3 years ago

You are mentioning an iOS project, which I would assume is C++, but the example code you give is in Javascript, so here are examples of transposing using the Javascript toolkit. The testing webpage used to create the examples is at the bottom of this message.

To set the transposition for the music, add a transpose entry to the verovio options:


var vrvOptions = {
        transpose: "M2",
        scale: 60,
        header: "none",
        pageHeight: 6000,
        adjustPageHeight: 1,
        pageWidth: 2100,
        spacingStaff: 12,
        spacingSystem: 12
}

Here is the test example music with no transpose given (just C/Do major triad):

Setting transpose: "M2" will transpose the music up a major second from C/Do to D/Re:

To go down a minor second from C/Do to Si/B:

Common intervals: m3 = minor third, M3 = major 3rd, P4 = perfect fourth, P5 = perfect fifth, d5 = diminished fifth, A4 = augmented fourth.

You can also give semitone steps, with 1 being one semitone, 2 being two semitones, etc. This method is less precise, and the computer will make an automatic calculating to minimize the number of accidentals in the target key signature.

For example the integer transpostion "1" will display in D-flat major:

This is equivalent to going up a minor second:

If you need to transpose to C-sharp major, then you cannot use integers, but must use the full musical interval, which in this case is "A1" for an augmented unison:

(a1 and A1 are the same, but m2 and M2 are not equivalent).

You can also give the tonic note of the new key. For example "E" means to transpose to E major (or minor, since the mode will not be changed). This feature requires that the music contain key information which is not always present in MusicXML data. It can also be incorrect, which may cause problems, so use this option with care in an automatic situation.

F-sharp major:

Equivalent to a transposition of A4, and G-flat, which is equivalent to d5:

Notice that this method moves to the closest tonic. To force G-flat major above, add a +:

To go another octave above, add two ++:

Here is the test HTML file used to create the above example:

<html>
<head>
<title>Transposition test</title>
</head>
<body>

<div style="color:blue; font-size:2rem;" id="parameters"></div>
<div id="example"></div>

<script>
var vrvToolkit;
var Module = {
    onRuntimeInitialized: function() {
        vrvToolkit = new verovio.toolkit();
        prepareExample("example");
    }
};
</script>

<script src="https://verovio-script.humdrum.org/scripts/verovio-toolkit-wasm.js"></script>

<script>

var vrvOptions = {
    transpose: "++Gb",
    scale: 60,
    header: "none",
    pageHeight: 6000,
    adjustPageHeight: 1,
    pageWidth: 2100,
    spacingStaff: 12,
    spacingSystem: 12
}

function prepareExample(targetid) {
    var delement = document.querySelector("#musicxml-data");
    var data = delement.textContent;
    var svg = vrvToolkit.renderData(data, vrvOptions);
    var element = document.querySelector("#" + targetid);
    element.innerHTML = svg;
    var pelement = document.querySelector("#parameters");
    var output = 'transpose: "' + vrvOptions.transpose + '"';
    pelement.innerHTML = output;
}

</script>

<script type="text/x-musicxml" id="musicxml-data"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE score-partwise PUBLIC "-//Recordare//DTD MusicXML 3.1 Partwise//EN" "http://www.musicxml.org/dtds/partwise.dtd">
<score-partwise version="3.1">
  <work>
    <work-title>Title</work-title>
    </work>
  <identification>
    <creator type="composer">Composer</creator>
    <encoding>
      <software>MuseScore 3.4.2</software>
      <encoding-date>2020-10-21</encoding-date>
      <supports element="accidental" type="yes"/>
      <supports element="beam" type="yes"/>
      <supports element="print" attribute="new-page" type="yes" value="yes"/>
      <supports element="print" attribute="new-system" type="yes" value="yes"/>
      <supports element="stem" type="yes"/>
      </encoding>
    </identification>
  <defaults>
    <scaling>
      <millimeters>7.05556</millimeters>
      <tenths>40</tenths>
      </scaling>
    <page-layout>
      <page-height>1683.36</page-height>
      <page-width>1190.88</page-width>
      <page-margins type="even">
        <left-margin>56.6929</left-margin>
        <right-margin>56.6929</right-margin>
        <top-margin>56.6929</top-margin>
        <bottom-margin>113.386</bottom-margin>
        </page-margins>
      <page-margins type="odd">
        <left-margin>56.6929</left-margin>
        <right-margin>56.6929</right-margin>
        <top-margin>56.6929</top-margin>
        <bottom-margin>113.386</bottom-margin>
        </page-margins>
      </page-layout>
    <word-font font-family="FreeSerif" font-size="10"/>
    <lyric-font font-family="FreeSerif" font-size="11"/>
    </defaults>
  <credit page="1">
    <credit-words default-x="595.44" default-y="1626.67" justify="center" valign="top" font-size="24">Title</credit-words>
    </credit>
  <credit page="1">
    <credit-words default-x="1134.19" default-y="1526.67" justify="right" valign="bottom" font-size="12">Composer</credit-words>
    </credit>
  <part-list>
    <score-part id="P1">
      <part-name>Piano</part-name>
      <part-abbreviation>Pno.</part-abbreviation>
      <score-instrument id="P1-I1">
        <instrument-name>Piano</instrument-name>
        </score-instrument>
      <midi-device id="P1-I1" port="1"></midi-device>
      <midi-instrument id="P1-I1">
        <midi-channel>1</midi-channel>
        <midi-program>1</midi-program>
        <volume>78.7402</volume>
        <pan>0</pan>
        </midi-instrument>
      </score-part>
    </part-list>
  <part id="P1">
    <measure number="1" width="265.51">
      <print>
        <system-layout>
          <system-margins>
            <left-margin>0.00</left-margin>
            <right-margin>811.98</right-margin>
            </system-margins>
          <top-system-distance>170.00</top-system-distance>
          </system-layout>
        </print>
      <attributes>
        <divisions>1</divisions>
        <key>
          <fifths>0</fifths>
          </key>
        <time>
          <beats>4</beats>
          <beat-type>4</beat-type>
          </time>
        <clef>
          <sign>G</sign>
          <line>2</line>
          </clef>
        </attributes>
      <note default-x="83.07" default-y="-50.00">
        <pitch>
          <step>C</step>
          <octave>4</octave>
          </pitch>
        <duration>4</duration>
        <voice>1</voice>
        <type>whole</type>
        </note>
      <note default-x="83.07" default-y="-40.00">
        <chord/>
        <pitch>
          <step>E</step>
          <octave>4</octave>
          </pitch>
        <duration>4</duration>
        <voice>1</voice>
        <type>whole</type>
        </note>
      <note default-x="83.07" default-y="-30.00">
        <chord/>
        <pitch>
          <step>G</step>
          <octave>4</octave>
          </pitch>
        <duration>4</duration>
        <voice>1</voice>
        <type>whole</type>
        </note>
      <barline location="right">
        <bar-style>light-heavy</bar-style>
        </barline>
      </measure>
    </part>
  </score-partwise>
</script>

</body>
</html>

yangyangnote commented 3 years ago

Thank you very much for your help, I have realized the transposition function by passing in the value of transpostion, -12...1...12 @craigsapp

rism-digital / verovio

How to transpose music #1769