<h1>WebMIDI Test</h1>

<p>This will find all the MIDI input/output devices connected to the system and update when message are received from the inputs.</p>

<h2>MIDI Inputs</h2>
<pre id="inputs"></pre>

<h2>MIDI Outputs</h2>
<pre id="outputs"></pre>

<h2>MIDI Messages</h2>
<pre id="messages"></pre>
body {
  font-family:system-ui;
}

#messages {
  height:12em;
  overflow-y:scroll;
}
navigator.requestMIDIAccess()
  .then((access) => {

    // Get lists of available MIDI controllers
    const inputs = access.inputs;
    const outputs = access.outputs;
   
    const inputText = [];
    const outputText = [];
  
    inputs.forEach((midiInput) => { 
      inputText.push(`FOUND: ${midiInput.name}`);
        midiInput.onmidimessage = function(message) {                  
          document.querySelector("#messages").innerText +=  `# ${midiInput.name}
${new Date()}
==================================
- Status: ${message.data[0]}
- Data 1: ${message.data[1]}
- Data 2: ${message.data[2]}
==================================\n\n`;
        }
    })
  
    outputs.forEach((midiOutput) => { 
      outputText.push(`FOUND: ${midiOutput.name}`);
    })
      
    document.querySelector("#inputs").innerText = inputText.join('');
    document.querySelector("#outputs").innerText = outputText.join('');  
 
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.