# useMidiInput

> The notes of the page's MIDI input, with velocity and pitch bend: every component that calls it hears the same devices.

```bash
npx shadcn@latest add @audio-ui/use-midi-input
```

```ts
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`).

```tsx
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](/docs/components/base/piano) or a [Piano roll](/docs/components/base/piano-roll).

**Options**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onNoteOn` | `(pitch, velocity) => void` |  | A key was pressed, with its velocity from 0 to 1. |
| `onNoteOff` | `(pitch) => void` |  | A key was released. |
| `onPitchBend` | `(semitones) => void` |  | The pitch bend wheel moved: ±2 semitones at its ends, 0 at rest. |

**Returns**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `requestAccess` | `() => void` |  | Connects the page's MIDI input. Call it from a click. |
| `disconnect` | `() => void` |  | Stops listening, for the whole page. Notes already sounding keep sounding: release them yourself. |
| `activeNotes` | `number[]` |  | The pitches held on the device. |
| `isSupported, isConnected` | `boolean` |  | Whether the browser has Web MIDI, and whether the page listens. |
| `inputNames` | `string[]` |  | The names of the connected devices. |
| `mutedInputs` | `string[]` |  | The names of the devices switched off with `setInputEnabled`: their keys are not heard. |
| `setInputEnabled` | `(name: string, enabled: boolean) => void` |  | Switches a device off by its name, for the whole page, or on again. It holds before the device connects. |
| `error` | `string \| null` |  | Why connecting failed, such as a refused permission. |

Without React, `@audio-ui/engine/midi` reads the messages themselves and the MIDI files.