Queeeeeestions.... XD

[rchrdnsh]

This is pretty rad, NGL.

Had a few Q's however...

1. How is the grid of notes being rendered? Trying to look through the code but I can't seem to find anything related to actually rendering note blocks on the screen. Is it html canvas? svg? something else?
2. Is there a way to add grid lines to the note grid, as it is hard to see where the notes start and stop relative to musical note values, etc...
3. Is there any way to zoom in or out of the note grid built in to the component?

It's very chill, just wanna know some stuff is all :-)

[cifkao]

Thanks for reaching out! 🙂

1. How is the grid of notes being rendered? Trying to look through the code but I can't seem to find anything related to actually rendering note blocks on the screen. Is it html canvas? svg? something else?

All the rendering is done using PianoRollSVGVisualizer from the @magenta/music library. So it's an SVG.

2. Is there a way to add grid lines to the note grid, as it is hard to see where the notes start and stop relative to musical note values, etc...

There is no built-in or straightforward way. You could just draw your own grid using SVG over/underneath the visualizer (or perhaps even inside the same SVG element). The problem is that Magenta uses time in seconds and not musical values, so you don't know the beat locations. You can compute them though, and that's exactly what I do here (to show the beat "ruler" in the "advanced" version of my demo).

3. Is there any way to zoom in or out of the note grid built in to the component?

Again, there is no built-in way, but you could play around with the CSS zoom property.

[majorcyto]

Wow the advanced mode on that page that lets you load a midi is amazing with the measure bars and it showing the instruments for each track that can be turned off or on. Is this something that can be brought over to html-midi-player or are there different limitations between that player and this one?

[majorcyto]

Oh sorry, you kind of answered the beat ruler one already. Is it possible to grab the instrument name from the track for html-midi-player as well like you do in the demo for that one?

[cifkao]

Everything is possible, I just don't think I will have time to work on any big features in the near future. 🙁

Regarding the checkboxes, they should work fine with html-midi-player, I just can't think of a good way to implement them within the library. My solution is a bit dirty because you actually have to store the original sequence and every time the check boxes change, you have to filter it to keep only the notes you want and then make the player load this filtered sequence. (A side-effect of this is that you cannot turn instruments on or off during playback without stopping it.)

About the instrument names, I'm using the instrumentByPatchID function from @tonejs/midi to grab the program (patch) name given the number.

[majorcyto]

Hmm, I don't think your method is dirty / bad. I can see how some people would see value in being able to check or uncheck the boxes in real time. But even a lot of software programs for midi editing and such require you to stop and start playback again to hear the changes so I don't think it would be necessary to have it in real time.

Maybe you should add the bounty board add-on so people can request features and put a monetary incentive on it. Then over time when you have time available and complete them you get to claim the money from it. 👍🏻

Of course you are not beholden to complete any requests even if there is a bounty request on it.