index.html

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebMidi.js Quick Start</title>
    <script src="https://cdn.jsdelivr.net/npm/webmidi@latest/dist/iife/webmidi.iife.js"></script>
</head>

<body>
<h1>WebMidi.js Quick Start</h1>
</body>
<script type="module">

    // Enable WEBMIDI.js and trigger the onEnabled() function when ready
    WebMidi
        .enable()
        .then(onEnabled)
        .catch(err => alert(err));

    // Function triggered when WEBMIDI.js is ready
    function onEnabled() {

        // Display available MIDI input devices
        if (WebMidi.inputs.length < 1) {
            document.body.innerHTML += "No device detected.";
        } else {
            WebMidi.inputs.forEach((device, index) => {
                document.body.innerHTML += `${index}: ${device.name} <br>`;
            });
        }

    }

</script>
</html>