What Player Event returns the notes being played.

[eyeke04]

Hi Cifkao, thank you so much for this amazing gift. I want to be able to display the notes played on a custom HTML and CSS model of the instrument (much like the midi-visualizer). Please which of the player event returns the current notes being played? I've tried player.addEventListener('note', listener) and player.addEventListener('playing', listener)but none of them works.

How do I achieve that?

[cifkao]

Hi, it is the note event as documented. It's a CustomEvent, so you have to access its detail property to get the actual note, e.g.:

player.addEventListener("note", (event) => console.log(event.detail.note));

If it's still not working, please share your code (your screenshot failed to upload).

[cifkao]

Interesting, for me it does work. Would you mind sharing a complete example e.g. on codepen, including the HTML? (Your code works when I paste it into my example.) Also, what is your browser (version) and OS? Have you tried it in other browsers?

[eyeke04]

Oh wow, I'm using Mac Monterey 12.2.1. I tried it on Safari and it works perfectly but it's still failing on Chrome v 101.0.4951.41. And it throws all these warning on chrome that aren't on Safari.

[cifkao]

Hmmm... working for me in Chrome 101.0.4951.41 on macOS Monterey 12.3.1... (But I also get these warnings, they seem to be normal.)

[eyeke04]

wow, ok. Let me figure out what is happening. Thank you. Also thank you for being so responsive. Do you have a community for this that I can join or it's just here?

[eyeke04]

@cifkao I've found the problem. It's this webmidi script <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>. I use it to read input from Midi devices. When it's present, the eventListener doesn't bind. But this is happening only on chrome