Can I send MIDI info to two components at the same time?

[rchrdnsh]

Hi @nickroberts404! XD

I have a component that looks like this:

const Piano = (props) => {

  const { inputs } = useMIDI()

  return (
    <Container>
      <PianoUI>
        <MIDINotesInfo input={inputs[0]}/>
        <KeyboardBox>
          <PianoKeyboard
            octaves={[`0`,`1`, `2`, `3`, `4`, `5`, `6`]}
            notes={['']}
            input={inputs[0]}
          />
        </KeyboardBox>
      </PianoUI>
    </Container>
  )
}
export default Piano

...which contains a <PianoKeyboard>' component and a ' component, both using the useMIDINotes hook within themselves, and they both work individually if I turn one off by commenting it out, but if I try to send MIDI to both of them at the same time only the first component that is receiving an input is working. Is it possible to send the same MIDI data from the same channel to two or more useMIDINotes components in the same view/page?

They both work great individually, but only one seems to work at a time, not both...

It seems as if I can do this if I am not using the same hook twice in the same component. If I use useMIDINote and useMIDINotes together they do not seem to step on each others toes. But if I use useMIDINotes twice in tow different child components then that seems to be where the incompatibility lies. Not sure if that is ultimately the issue, but I can indeed have the two different hooks co-exist, but not the same hook twice, it would seem...

These two components work together if used in the same parent component. This one:

const MIDINoteInfo = (props) => {

  const event = useMIDINote(props.input, { channel: 1 })

  const { on, note, velocity, channel } = event

  return (
    <div>
      <p>Status: {on ? 'on' : 'off'}</p>
      <p>Note: {note}</p>
      <p>Velocity: {velocity}</p>
      <p>Channel: {channel}</p>
    </div>
  )
}

...and this one:

const MIDINotesInfo = (props) => {

  const info = useMIDINotes(props.input, { channel: 1 })

  const noteNums = info.map((event) => event.note).join(', ')
  const noteVelos = info.map((event) => event.velocity).join(', ')
  const noteOn = info.map((event) => event.on).join(', ')

  return (
    <MIDIInfo>
      <MIDILabel>MIDI</MIDILabel>
      <MIDIStatus
        style={noteOn ? {background: `#87ffc5`, boxShadow: `0px 0px 4px #87ffc5`} : {background: `black`} }
      />
      <MIDILabel>Name(s)</MIDILabel>
      <MIDIValue></MIDIValue>
      <MIDILabel>Number(s)</MIDILabel>
      <MIDIValue>{noteNums}</MIDIValue>
      <MIDILabel>Velocit(ies)</MIDILabel>
      <MIDIValue>{noteVelos}</MIDIValue>
      <MIDILabel>Harmony</MIDILabel>
      <MIDIValue></MIDIValue>
    </MIDIInfo>
  )
}

...but the previous one and this following one do not work together in the same parent component:

const Keyboard = (props) => {

  const notes = useMIDINotes(props.input, { channel: 1 })
  const noteNumbers = notes.map((event) => event.note).join(', ')

  // const Octaves = [...Array(parseInt(props.octaves, 10)).keys()]

  const Octaves = props.octaves

  return (

    <Container {...props}>

        {Octaves.map((octave) => {
          return (
            <>
              <Zone1Grid {...props}>
                <Zone1WhiteKeyGrid {...props}>
                  <C {...props} octave={octave} noteNumbers={noteNumbers}>
                    {
                      (
                        props.notes.includes(`b#${octave}dim`) ||

// ...and a whole lot more...this component is big...

I wonder if it's the case that the useMIDINotes hook needs to use the UniqueID thing that the useMIDINote hook uses...not sure how that would be added, though. Maybe two or more instances of the useMIDINotes hook are stepping on each other in the same parent component because of that 🤔