Does this or will this support a MIDI Keyboard?

[rchrdnsh]

Dunno how else to ask that :-)

[kevinsqi]

Because there are a number of ways to use the MIDI API, I'm thinking to not have this lib be concerned with MIDI support, and instead let MIDI events change state which then change the piano UI.

I have this in my own app that uses react-piano, and it looks something like this (very roughly):

import WebMidi from 'webmidi';


state = {
  activeNotes: []
}

  componentDidMount() {
    WebMidi.enable((error) => {
      if (error) {
        console.warn('WebMidi could not be enabled.');
        return;
      }
      console.log('WebMidi enabled.');
      if (WebMidi.inputs.length === 0) {
        console.log('No MIDI inputs.');
        return;
      }
      const input = WebMidi.inputs[0];
      input.addListener('noteon', 'all', (event: MidiEvent) => {
        this.handlePlayNoteInput(event.note.number);
      });
      input.addListener('noteoff', 'all', (event: MidiEvent) => {
        this.handleStopNoteInput(event.note.number);
      });
    });
  }

  function handleMidiEvent(midiNumber: number, eventType: 'start' | 'stop') {
    this.setState((prevState: State) => {
      const { activeNotes } = prevState;

      if (eventType === 'start') {
        if (activeNotes.includes(midiNumber)) {
          return null;
        }
        return {
          ...prevState,
          activeNotes: activeNotes.concat(midiNumber),
        };
      } else if (eventType === 'stop') {
        return {
          ...prevState,
          activeNotes: activeNotes.filter((note) => midiNumber !== note),
        };
      }
    });
  };


function handlePlayNoteInput(midiNumber) {
  handleMidiEvent(midiNumber, 'start');
}
function handleStopNoteInput(midiNumber) {
  handleMidiEvent(midiNumber, 'stop');
}

<ControlledPiano activeNotes={this.state.activeNotes} onPlayNoteInput={handlePlayNoteInput} onStopNoteInput={handleStopNoteInput} />

onPlayNoteInput/onStopNoteInput allow you to define the behavior when shortcut keys are pressed or UI keys are clicked, and therefore also allow you to hook into the same behavior for MIDI events.

I can write up a quick working demo of this later, but perhaps this could help get you started.

[skavan]

very interesting. thx for the code. However -- it would be great to have a prop that prevented activeNotes from triggering playNote, stopNote, onPlayNoteInput, onStopNoteInput.

right now, I get an infinite loop because I use the keyboard to trigger connected midi devices, but I also want the keyboard to react to inbound events.

I think we need a prop called MidiThru. When false, there is no echo of activeNotes to playNote, stopNote, onPlayNoteInput, onStopNoteInputs. Alternatively, this could be handled by a second parameter to playNote, stopNote etc... that specified whether the trigger was an internal event (i.e. key press) or external (i.e. activeNotes).

Does this make sense?

As an added bit of functionality, would be great to encapsulate your handleMidiEvent code, above, into the component....and add two props, activeNoteOn and activeNoteOff, perhaps with an optional "timeout" that cleared the Note On to avoid stuck notes.

[christiaanwesterbeek]

I have made a custom hook based on the plain javascript that I found in the source on this website. It returns all the notes that are currently pressed on the midi device.

Update: I went a little overboard and implemented more cleanup and niche cases. Here's the whole code now.

import { useState, useEffect } from 'react';

const NOTE_ON = 144;
const NOTE_OFF = 128;

/**
 * `useMidiActiveNotes` is a React hook that provides an array of MIDI notes
 * currently being pressed (active). This hook only works in environments where
 * the browser supports the Web MIDI API.
 *
 * @hook
 * @returns {Array<number>} An array of MIDI note numbers that are currently active.
 * Each note number corresponds to a unique pitch. The array is empty if no notes
 * are being pressed.
 *
 * @example
 * const activeNotes = useMidiActiveNotes();
 * console.log(activeNotes); // e.g., [60, 62, 64] for C4, D4, and E4 being pressed simultaneously.
 *
 * @note
 * - Some MIDI devices might send a note-on message with zero velocity to indicate a note-off event.
 * - Make sure to check if the environment supports the Web MIDI API before using this hook.
 * - MIDI note statuses: NOTE_ON (144) denotes a keypress, whereas NOTE_OFF (128) denotes a key release.
 * - The MIDI velocity range is typically from 0 (minimum) to 127 (maximum). In some scenarios, like a computer keyboard or touch screen, the velocity is always 127.
 * - The MIDI note range for an 88-key piano is from 21 (A0) to 108 (C8). For example, middle C corresponds to note 60.
 * - Cleanup is implemented to ensure that all event listeners and references are properly removed when the hook/component is no longer in use. This prevents memory leaks and ensures efficient resource management.
 */
export const useMidiActiveNotes = () => {
    const [activeNotes, setActiveNotes] = useState([]);

    useEffect(() => {
        let isMounted = true;

        if (!('requestMIDIAccess' in navigator)) {
            console.warn("Browser doesn't support MIDI");
            return;
        }

        let midiAccess;
        let input;
        // let output;

        const refresh = (midi) => {
            // If there's an existing input, remove its onmidimessage listener
            if (input) {
                input.onmidimessage = null;
            }

            input = midi.inputs.size ? midi.inputs.values().next().value : null;
            // output = midi.outputs.size
            //     ? midi.outputs.values().next().value
            //     : null;

            if (input) {
                input.onmidimessage = (msg) => {
                    if (!isMounted) return;

                    setActiveNotes((previousNotes) => {
                        const [status, note, velocity] = msg.data;
                        if (
                            status === NOTE_OFF ||
                            (status === NOTE_ON && velocity === 0) // some MIDI devices do indeed use a note-on message with zero velocity to indicate a note-off event.
                        ) {
                            return previousNotes.filter(
                                (item) => item !== note
                            );
                        }
                        return [...previousNotes, note];
                    });
                };
            }
        };

        navigator.requestMIDIAccess().then((midi) => {
            midiAccess = midi; // Store as reference for the cleanup function
            if (!isMounted) return;

            refresh(midi);
            midi.onstatechange = (e) => refresh(e.target);
        });

        return () => {
            isMounted = false;

            if (input?.onmidimessage) {
                input.onmidimessage = null;
            }
            if (midiAccess?.onstatechange) {
                midiAccess.onstatechange = null;
            }
            midiAccess = null;
            input = null;
        };
    }, []);

    return activeNotes;
};

Then in the component where you have react-piano, you can do

import { Piano } from 'react-piano';
import { useMidiActiveNotes } from './useMidiActiveNotes';

const MyPiano = () => {
    const activeNotes = useMidiActiveNotes();

    return (
        <Piano
            activeNotes={activeNotes}
            ...
        />
    );
}