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!

Sign In or Register to comment.