pnpm dlx shadcn@latest add @audio-ui/use-midi-input
import { useMidiInput } from "@/hooks/use-midi-input";| Files | hooks/use-midi-input.ts |
|---|---|
| Depends on | Nothing |
| npm | @audio-ui/engine |
| Used by | block-drum-synth, block-electric-piano, block-fm-synth, block-guitar, block-mono-synth, block-organ, block-piano-roll, block-poly-synth, block-sampler, block-string-machine, block-tape-keys, midi-connect-control, piano-size-default-demo, spectrum-analyzer-demo |
| Export | Kind | What it is |
|---|---|---|
UseMidiInputOptions | interface | |
UseMidiInputReturn | interface | |
useMidiInput | function | The notes of the page's MIDI input. |
Usage
useMidiInput hears the page's MIDI input: every component that calls it hears the same devices, and connecting from one connects them all. Browsers ask for permission, so connect from a click, with requestAccess or with the ready-made button (npx shadcn@latest add @audio-ui/midi-connect-control).
import { useMidiInput } from "@/hooks/use-midi-input";
const midi = useMidiInput({
onNoteOff: (pitch) => voices.releaseNote(pitch, envelope),
onNoteOn: (pitch, velocity) => voices.triggerNote(pitch, envelope, velocity),
onPitchBend: voices.setPitchBend,
});
<button onClick={midi.requestAccess} type="button">Connect MIDI</button>
<Piano activeNotes={midi.activeNotes} maxPitch={72} minPitch={48} />activeNotes lights the keys held on the device, on a Piano or a Piano roll.
Options · 3
A key was pressed, with its velocity from 0 to 1.
A key was released.
The pitch bend wheel moved: ±2 semitones at its ends, 0 at rest.
Returns · 8
Connects the page's MIDI input. Call it from a click.
Stops listening, for the whole page. Notes already sounding keep sounding: release them yourself.
The pitches held on the device.
Whether the browser has Web MIDI, and whether the page listens.
The names of the connected devices.
The names of the devices switched off with
setInputEnabled: their keys are not heard.Switches a device off by its name, for the whole page, or on again. It holds before the device connects.
Why connecting failed, such as a refused permission.
Without React, @audio-ui/engine/midi reads the messages themselves and the MIDI files.