index.html

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/webmidi@2.5.3"></script>
</head>

<body>
    <script>
    const voltage_change_time = 10; // milliseconds

    // YOU NEED TO EDIT THESE NUMBERS TO
    // GET THE CORRECT PITCH
    var currentVoltage = 0;
    var voltageMap = {
        "C": 0,
        "C#": 0.7,
        "D": 0.9,
        "D#": 1.2,
        "E": 1.45,
        "F": 1.8,
        "F#": 2.1,
        "G": 3.3,
        "G#": 2.6,
        "A": 3.0,
        "A#": 0,
        "B": 0,
    }

    function sendVoltage(volts) {
        console.log(volts);
        fetch(`/msg?msg=voltage${volts}`)
            .then(response => response.json())
            .then(data => console.log(data));
    }

    var inputs = [];
    WebMidi.enable(function(err) {
        if (err) {
            console.log("WebMidi could not be enabled.", err);
        }
        for (var i = 0; i < WebMidi.inputs.length; i++) {
            inputs[i] = WebMidi.inputs[i];
            inputs[i].addListener('noteon', "all",
                function(e) {
                    console.log(e);
                    var newVoltage = voltageMap[e.note.name];
                    var voltageDiff = newVoltage - currentVoltage;
                    var steps = Math.floor(Math.abs(voltageDiff / 0.1));
                    for (var j = 0; j < steps; j++) {
                        setTimeout(sendVoltage, voltage_change_time * j, voltageDiff / steps * j + currentVoltage);
                    }
                    setTimeout(sendVoltage, steps * voltage_change_time, newVoltage);

                    currentVoltage = newVoltage;
                }
            );
        }
    });
    </script>
</body>

</html>