MENU


Web MIDI API

MIDI (Musical Instrument Digital Interface)is a communications protocol that describes how to connect a wide variety of electronic musical instruments, computers, and related audio devices for playing, editing, and recording music.The Web MIDI API lets your browser communicate with MIDI devices connected to your computer.

A simple loopback: this example loops all input messages on the first MIDI input port to the first MIDI output port.
RESETRUNFULL
<!DOCTYPE html><html>
<body style="height:10px">
   <script>
      function onMIDISuccess( midiAccess ) {
         var input = midiAccess.inputs.values().next().value;
         var output = midiAccess.outputs.values().next().value;
         input.onmidimessage = event =>{
            output.send( event.data, event.timestamp );
         };
      }
      function onMIDIFailure(msg) {
         console.log( "Failed to get MIDI access - " + msg );
      }
      navigator.requestMIDIAccess().then( onMIDISuccess, onMIDIFailure );
   </script>
</body></html>
Listen to the audio coming out of your MIDI output device.
RESETRUNFULL
<!DOCTYPE html><html>
<body style="height:30px">
   <button onclick="sendMidiMessage(60,100,100)">Play</button>
   <script>
      function sendMidiMessage(pitch, velocity, duration) {
         const NOTE_ON = 0x90;
         const NOTE_OFF = 0x80;
         const device = midiAccess.outputs.values().next().value;
         const msgOn = [NOTE_ON, pitch, velocity];
         const msgOff = [NOTE_ON, pitch, velocity];
         device.send(msgOn);
         device.send(msgOff, Date.now() + duration);
      }
      var midiAccess;
      navigator.requestMIDIAccess().then( ma=>{midiAccess=ma;});
   </script>
</body></html>