any way to tap into other magenta settings ie, quantize?

[swampthang]

I'm loving what you've done with this! Thanks so much for putting this out there.

I created a simple melody in MuseScore (All notes were entered using the mouse so weren't played in) and exported it as a midi file. In MuseScore it principally contains quarter and eighth notes with only one sixteenth note. When I load that midi file and use the visualizer "staff" type, I see this...

I zoomed the page to show that each quarter note is converted into a dotted eighth and a 64th note rest. Here's what I see in MuseScore for the first two bars...

I noticed that your Visualizer and Player element classes extend the HTMLElement and I see that the noteSequence is a Magenta note sequence. Magenta is a bit of a beast but I wondered if there might be away to tap into more of the Magenta sequence class settings?

I wondered if use a quantize setting might resolve that issue.

Thanks again for the library!

[cifkao]

Yes, you can take a NoteSequence (either you retrieve it from player.noteSequence or you load it yourself using urlToNoteSequence), manipulate it in any way you want, then assign the result to player.noteSequence.

The player cannot really work with quantized sequences (with integer time steps) directly, but you should be able to use unquantizeSequence to convert a quantized sequence back to a "normal" one that the player supports.

As for how to actually access all the Magenta functions, if you are using the Magenta bundle in your page as suggested in the readme, the @magenta/music/core module will be loaded simply under the name core. So you can call e.g. core.sequences.quantizeNoteSequence.

[cifkao]

Just to be completely clear, quantization is not really a setting in Magenta, it's a function that you can call to quantize your note sequence. The documentation for it is here.

html-midi-player doesn't support this out of the box, so you have to call the function yourself. Though it would be a cool feature to add (as a new HTML attribute).

[swampthang]

Thanks for the reply! Didn't know that the core module was exposed in that way. Very helpful!

[swampthang]

The midi file has tempo of 80 but I noticed that player.noteSequence.tempos[0].qpm was === 79.99978666723555. I'm wondering if this has something to do with the weird thing that happens when multiplying decimals in javascript. For example, 0.2 * 0.2 results in -> 0.04000000000000001.

I have this function in several apps:

const roundDecimals = (number, precision) => {
  let factor = Math.pow(10, precision);
  let tempNumber = number * factor;
  let roundedTempNumber = Math.round(tempNumber);
  return roundedTempNumber / factor;
}

[swampthang]

I found out that MuseScore exports midi with those shortened note values even though they show to be full quarter notes, etc. Used this to see what was happening. https://tonejs.github.io/Midi/

[tomboul]

Hello!

To try to understand this quantize problem, I made this function called on load the dom:

function htmlMidiPlayer(midiFile) {

$('#htmlPlayer').show();
var tabNote = ['C', 'C#', 'D', 'Eb', 'E', 'F', 'F#', 'G', 'Ab', 'A', 'Bb', 'B'];
var MP = $('<midi-player sound-font></midi-player>').appendTo('#htmlPlayer')[0];
var MV = $('<midi-visualizer type="staff" id="myStaffVisualizer"></midi-visualizer>').appendTo('#htmlPlayer')[0];
var INFO = $('<div></div>').appendTo('#htmlPlayer');
var loaded = 0;

for (const event of ['load', 'start', 'stop', 'loop']) {
    MP.addEventListener(event, function(ev) {
        if(event == "load") {
            var note = [];
            var ns = MP.noteSequence.notes
            
            if(!loaded) {
                // perhaps with a integer value for the tempo you have better result, bur it's note the case.
                MP.noteSequence.tempos[0].qpm = Math.round(MP.noteSequence.tempos[0].qpm);
                // when setting noteSequence it's dispatch an event "load"
                MP.noteSequence = core.sequences.quantizeNoteSequence( MP.noteSequence, 120);
                loaded ++;
            }
            else if(loaded == 1) {
                INFO.html('');
                $.each(ns, function(k, v) {
                    v.oStart = v.startTime;
                    v.oEnd = v.endTime;
                    if(v.instrument == 2) { // quantize only the bass
                        v.startTime = quantize(v.startTime, 3); // its a waltz 3/4
                        v.endTime = quantize(v.startTime + 0.92, 3); // to have white dotted
                        INFO.append("<br> note = " + v.pitch + "/" + tabNote[v.pitch % 12] + " start = " + v.oStart + " Q-> " + v.startTime + " end = " + v.oEnd + " Q-> "  + v.endTime)
                    }
                    note.push(v);
                });
                MP.noteSequence.notes = note;
                MP.noteSequence = core.sequences.quantizeNoteSequence( MP.noteSequence, 120);
                loaded ++;
            }
            else { // load with quantized note, you can add your visualizer
                MP.addVisualizer(MV);
                MV.config = {
                    instruments: [2] // basse instrument
                };
            }
        }
        function quantize(val, nbt, q) {
            return( Math.round(val * 100) / 100)
            // defaut quantize on quarvers
            if(!q) q = 2;
           // I thought an integer value pointed to pule at the beginning of the measure, but it is not the case
            var vr = Math.round(val); 
            var pos = val - vr;
            var div = Math.round((1 / (nbt * q)) * 100) / 100;
            var tdiv = [];
            for(var i = 0; i < nbt * q; i++) {
                if(pos < i * div) {
                    pos = Math.max(0, (i-1)*div);
                    break
                }
            }
            return(vr + pos)
        }
        console.log(ev);
    })
}
$(MP).attr('src', midifile);

}

When i did'nt quantize (comment the two line calling the function quantize) the visualizer staff displaying :

When i quantize the note with my code, it's much better, i got this:

But it is difficult to find the right values to have a better placement of notes
Here, for the value of endTime, y got this correct quantize only with +0.92, i try with 0.9 and 0.95 but it was not good,

here it is simple because we have only white dotted notes, but when you have quavers or triplets, it is impossible to understand how to do to have the best quantize value.