use-web-midi

Access MIDI devices with the Web MIDI API.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useWebMIDI } from "@vizejs/composable/use-web-midi";

Try it

List MIDI controllers

Ask for MIDI access and show the connected keyboards and controllers.

Open the interactive example

What to observe: Allow MIDI access asks for permission where Web MIDI exists; the inputs appear once access is granted.

onMessage receives note and control messages. Request sysex only when you need it, because it asks for more permission. Every example renders a neutral message until it mounts, so server and client markup match, and then explains what to do when the browser lacks the API.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { useMounted } from "@vizejs/composable/use-mounted";
import { useWebMIDI } from "@vizejs/composable/use-web-midi";

const mounted = useMounted();
const { supported, status, inputs, request } = useWebMIDI();
</script>

<template>
  <div class="composable-example">
    <p>List MIDI keyboards and controllers after the reader allows access.</p>
    <button type="button" :disabled="!mounted || !supported" @click="() => request()">
      Allow MIDI access
    </button>
    <ul aria-label="MIDI inputs">
      <li v-for="input in inputs" :key="input.id">{{ input.name }}</li>
    </ul>
    <output aria-live="polite">{{
      !mounted
        ? "Checking browser support…"
        : supported
          ? `MIDI access: ${status}`
          : "Web MIDI is not available in this browser."
    }}</output>
  </div>
</template>

Runtime contract

API

useWebMIDI

Access MIDI devices with the Web MIDI API. Nothing is requested until request() is called. Once granted, inputs and outputs follow statechange events, and onMessage receives messages from every input. Failures land in error. Listeners are removed when the owning reactive scope stops; outside a scope call stop(). Server rendering: supported is false, status stays "idle" and no access is requested.

function useWebMIDI(options: UseWebMIDIOptions = {}): WebMIDIControls

const midi = useWebMIDI({ onMessage: ({ data }) => console.log(data) });
await midi.request();
midi.send(midi.outputs.value[0]!.id, [0x90, 60, 127]);

Types

MIDIPortLike

Minimal MIDIPort read by useWebMIDI.

MIDIOutputLike

Minimal MIDIOutput used by useWebMIDI.

MIDIAccessLike

Minimal MIDIAccess used by useWebMIDI.

MIDIRequestFlags

Access request flags of navigator.requestMIDIAccess.

MIDIHost

Navigator-like capability used by useWebMIDI.

MIDIPortInfo

Plain description of one MIDI port.

MIDIInputMessage

A message received on an input port.

UseWebMIDIOptions

Options for useWebMIDI.

WebMIDIControls

Reactive state and actions returned by useWebMIDI.