How to Customized midi-visualizer

[oneandonlyonebutyou]

@cifkao
Hey, what a great tool .. Really appreciate it ..
I wonder how can I develop my own ?

I am trying to develop an app for dyslexic people and Would like to add colors and a clean box plot

Could you please help me?

[cifkao]

Hi @joseph-vedadi! There are different ways to do that. I cannot give you a recipe, but I can share some tips and pointers.

You could try modifying one of the Magenta.js visualizers – the piano roll should be a good starting point. (Here is where it is used in html-midi-player.) It uses SVG, but in your case you might be able to just use an HTML table.

Showing measure boundaries is tricky in general because you need to calculate their time in seconds (see my answer here). But if you already know where they are (e.g. because your tempo and time signature is constant), it's easier. You could use a trick like in this demo where I know that beats happen every 15px, so I gave the SVG element a background gradient that makes a line 1px thick every 15px, something like:

midi-visualizer .piano-roll-visualizer svg {
    background: linear-gradient(90deg, #aaaaaa77 1px, transparent 1px) left/15px repeat;
}

Let me know if you have other questions!