Show MIDI markers in the piano roll

[aik2mlj]

First, huge thanks to your great work!
I want to visualize the midi marker info (which is one of the midi meta infos) in the piano roll. For example, I want to show the chord labels for each bar, or show the phrase division when presenting a full-song midi. Could you please give me a hint about how it can be achieved?

[cifkao]

The piano roll is rendered via an SVG element, so as soon as it's initialized, you should be able to add any additional graphical elements you want. You should be able to compute the x coordinate of your marker by taking its time in seconds and multiplying it by pixelsPerTimeStep, which is 30 by default.

You can see how I added a grid as a background to the piano roll here (via pure CSS – I simply added a background gradient that repeats every 30 pixels).

As far as loading the markers from the MIDI file: @magenta/music loads only notes, control changes and some basic meta messages like tempo, but does not seem to load markers (see the midiToSequenceProto function). So you would need to load these yourself using @tonejs/midi.