🎹 MIDI Bridge Demo

This demo shows the MIDIBridge component in action:

  1. Select your MIDI input device - Connect your MIDI keyboard or controller
  2. Select your MIDI output device - Choose where to send the processed MIDI
  3. Play some notes - The component will record your input
  4. Wait 5 seconds - After inactivity, the recording is sent for processing
  5. Listen to the result - Notes are transposed up by 2 semitones and played back

Output to speakers

Tick the "Output to speakers" checkbox (next to MIDI Output) to hear the result through your computer speakers instead of a hardware MIDI device. When enabled, the processed MIDI is rendered to a .wav on the backend with FluidSynth and played automatically in the Speaker Output player below (each new result replaces the previous one). Leave it unchecked to route the output to the selected MIDI output device as usual.

Requires the fluidsynth CLI installed on the host and a SoundFont (.sf2) passed via MIDIBridge(soundfont=...).

How it works

  • The frontend uses the Web MIDI API to capture live MIDI input
  • After 5 seconds of inactivity, the recording is converted to a MIDI file using @tonejs/midi
  • The backend receives the MIDI file and can process the midi however you like.
  • In this case it uses mido to transpose all notes by +2 semitones
  • The processed MIDI is sent back and played on your selected output device
  • If Output to speakers is on, the processed MIDI is instead rendered to audio with FluidSynth and auto-played in the browser