Visualizer Settings Attributes?

[majorcyto]

Hi,

I am having trouble understanding how to actually use the Visualize Settings Attributes. eg:

  visualizer.config = {
  noteHeight: 4,
  pixelsPerTimeStep: 60,
  minPitch: 30
};

Can this be used as an attribute within the embed code? eg:

<midi-player
<sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus"
  src="my.mid"
  sound-font visualizer="#myPianoRollVisualizer">
</midi-player>

<midi-visualizer type="piano-roll" config="configname: option" id="myPianoRollVisualizer" 
  src="my.mid">
</midi-visualizer>

Or if it is not used as an attribute option within the embed code, then how do I apply the config to it?

I am trying to make the note sizes bigger.

[cifkao]

Hi!

Currently, the only way to set the config is with JavaScript, so you would need to do something like:

<midi-visualizer type="piano-roll" id="myPianoRollVisualizer" src="my.mid">
</midi-visualizer>

<script>
document.querySelector("#myPianoRollVisualizer").config = {
  noteHeight: 4,
  pixelsPerTimeStep: 60,
  minPitch: 30
};
</script>

[cifkao]

I'm open to suggestions on how to enable to do this from HTML. I considered having separate attributes, e.g. config-note-height, config-pixels-per-time-step... Or indeed putting the whole JSON string inside a single attribute. Perhaps the most elegant way would be via custom CSS properties, e.g. style="--note-height: 4; --pixels-per-time-step: 60;"... but it doesn't seem to be possible to listen to their changes.

[majorcyto]

Oh,

The script snippet actually worked perfect for me! I actually tried to embed it in a script tag previously before making this issue but I forgot to do a document query selector on it LOL. So that was my fault, my bad.

I am currently working on implementing this on my website and once it is done I will share a link with you so you can use it as another example case if you like. If my testers find any bugs I will post them as separate issues.

Thank you so much for open sourcing this project, this is exactly what I was looking for!