How could I go about grabbing incoming midi data and manipulating it?

Hi all,

I've got this working:

input.addListener('noteon', 'all',
  function (event) {
    console.log(event.note.number);
  }
);

...which is great, but now I want to try and catch this data and send it to a Piano Keyboard component to display notes that are being played, like this one that I made using react:

...but I don't know how to get the note event data out of the event listener and put it into maybe an array or something. Do you have any recommendations on how I might do something like that? I'm relatively new to JS as well, so there is probably an easy way to do that, but I just don't know :-(

Comments

  • In your example, the note data is all inside event.note. So you could pass event.note to your component or add it to a previously created array.

  • I understand that, but HOW do I add it to an array? I don't know how to do that...what super basic JS code do I need to do to add that information to an array? I am new to programming and self-taught, so I have many holes in my understanding...

  • edited October 2020

    I suggest you start by getting some basic understanding of how JavaScript works. A good site to do that is JavaScript.Info. They have a section on arrays.

    In this case, this would be one way to do it:

    let myArray = [];
    
    input.addListener('noteon', 'all',
      function (event) {
        console.log(event.note.number);
        myArray.push(event.note);
      }
    );
    
  • The issue I run into these days is being self-taught and having many holes in my knowledge. I understand some things well, other things not so much, and some things not at all...but I never know until I run into an issue what that hole in my knowledge is...then I try to find answers, but I often don't even know what the question is that I'm trying to ask to figure out what it is that I am missing...it's lots of fun! (argh)

    My specific hole here was where to put the .push to add it to an array...nothing I did seemed to work...but what I did not understand was to put it inside the function after declaring the array outside the listener. I think it's where to put things and scoping and that kind of thing, specifically with listeners, which I know almost nothing about (started with frameworks first, where those kinds of things are rare, it would seem).

    Anyway, merci beaucoup, this makes sense and worked for me! XD

  • Yeah, scoping in JavaScript is a very central concept which might be confusing to newcomers. You should check out the chapter on Closures from JavaScript.info. It will help you understand how scope works.

    Au plaisir!