cifkao / html-midi-player

🎹 Play and display MIDI files on the web
https://cifkao.github.io/html-midi-player/
BSD 2-Clause "Simplified" License
663 stars 60 forks source link

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

Closed swampthang closed 2 years ago

swampthang commented 2 years ago

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...

Screen Shot 2022-04-27 at 11 40 00 AM

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...

Screen Shot 2022-04-27 at 11 45 12 AM

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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