How do I access individual midi notes inside of the useMIDINotes hook...

[rchrdnsh]

Hi Nick,

I'm trying to make a piano that lights up individual (or multiple at the same time) notes as they are pressed on a MIDI keyboard. This is me trying to make a simple proof of concept but I cannot seem to figure out how to make it work. What I want is for each <div> to light up with a different background color when a specific midi note is pressed, but also have multiple <div>'s light up at the same time when multiple notes are pressed. Don't know how to do that, however. This is what I have so far, but it does not work. Have any idea how one might go about doing that? As a bonus I would also like the saturation of the note to be lighter or darker depending on the velocity of the note(s) as well. Burt on and off is the first goal. The approach below worked with the useMIDINote hook, but would only light up one note at a time, hence why I'm trying to do this with the useMIDINotes hook:

const MIDINotesLog = ({ input }) => {
  const notes = useMIDINotes(input, { channel: 1 })
  return (
    <div style={{display: `flex`, border: `1px solid black`}}>
      {
        notes.note === 60 ?
          <div style={{width: '2rem', height: '4rem', border: `1px solid black`, background: 'red'}}></div>
        :
          <div style={{width: '2rem', height: '4rem', border: `1px solid black`, background: 'white'}}></div>
      }
      {
        notes.note === 61 ?
          <div style={{width: '2rem', height: '4rem', border: `1px solid black`, background: 'red'}}></div>
        :
          <div style={{width: '2rem', height: '4rem', border: `1px solid black`, background: 'white'}}></div>
      }
      {
        notes.note === 62 ?
          <div style={{width: '2rem', height: '4rem', border: `1px solid black`, background: 'red'}}></div>
        :
          <div style={{width: '2rem', height: '4rem', border: `1px solid black`, background: 'white'}}></div>
      }
      </div>
  )
}

[rchrdnsh]

k, it took me a minute, but I came up with a two part approach...

1. map all the notes from the hook into an array, using your example:

const noteNumbers = notes.map((n) => n.note).join(', ')

2. Check if the array included certain notes. In this example, doing it with styled-components:

${props => props.noteNumbers.includes(24 + (12 * props.octave)) && css`${MIDINote}`};

so, yeah...got it working now :-)