Am adding interaction to visualizer - quick question

[swampthang]

In this codepen:

https://codepen.io/swampthang/pen/KKZjYge

In the player load event, I'm calling the following function that allows the user to click one of the note rect's in the visualizer's SVG.

const player = document.querySelector("midi-player");
const viz = document.getElementById("myPianoRollVisualizer");

const setNoteClickListeners = () => {
  viz.querySelectorAll(".note").forEach((note) => {
    note.addEventListener("click", () => {
      let i = note.dataset["index"];
      player.currentTime = player.ns.notes[i].startTime;
      note.classList.add("active");
    });
  });
};

It works but only if the play button is never clicked which must mean the svg is getting redrawn every time play runs. One glaring thing that seems to be missing from the Magenta docs is events like onRedraw, etc.

Is there any way to listen for redraws or anything else in the player/visualizer?

I can add setNoteClickListeners() to the stop event and that works but doesn't seem like the right thing to do.

[cifkao]

I think what is happening is that whenever the player starts playing, it assigns its note sequence to the visualizer element, which triggers a complete reinitialization (a brand new Magenta visualizer is created with a new SVG element). This is to allow multiple players to share a single visualizer, but it does mess up use cases like yours.

So for now adding your listeners on the stop event seems like the correct workaround. A cleaner solution could be adding logic to VisualizerElement to prevent reinitialization if the correct sequence is already in place.

[swampthang]

Thanks for the quick reply. Do you know if there are any visualizer events being generated by magenta?

[cifkao]

No, the Magenta library doesn't emit any events as far as I know. The only thing that seems to be provided are callbacks for when a note starts and when the player stops.

[cifkao]

This should now be fixed in v1.5.0. The visualizer now won't redraw when playback starts. @swampthang it would be great to know if this solves your problem.