Midi (#16)

* i can take in midi input ! * Added midi input and handling midi CC (that was so easy to code lmao)
HyperLan-git · Jun 21, 2024 · 9a5596c · 9a5596c
1 parent fbf7036
commit 9a5596c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 2 deletions.
diff --git a/scripts/FX.js b/scripts/FX.js
@@ -55,12 +55,14 @@ const CONST_NODE_TYPE = [
     "ENVELOPE",
     //"RANDOM",
     "EXT_PARAM",
-    "CONSTANT"
+    "CONSTANT",
+    "MIDI_CC"
 ];
 
 const CONST_EXTERNAL_PARAM = [
     "FREQUENCY",
     "NOTE",
+    //"PITCH_SHIFT",
     //"VELOCITY"
 ];
 
@@ -543,7 +545,6 @@ class FXGraph {
                         if(modulations[k2].in == this.defaultNodes[k] || modulations[k2].out == this.defaultNodes[k])
                             removeModulation(k2);
                     }
-                    //TODO delete modulation if one is present
                     return;
                 }
             }

diff --git a/scripts/FXUI.js b/scripts/FXUI.js
@@ -660,6 +660,9 @@ function drawConstantData(name, type, fx) {
                 'Decay <input type="range" id="decay_' + name + '" min="0" max="4000" step="1" value="' + data.decay + '" ' + upd + '></input><span id="decayval_' + name + '">' + data.decay + '</span> ms<br>' +
                 'Sustain <input type="range" id="sustain_' + name + '" min="0" max="1" step="0.01" value="' + data.sustain + '" ' + upd + '></input><span id="sustainval_' + name + '">' + data.sustain + '</span><br>' +
                 'Release <input type="range" id="release_' + name + '" min="0" max="4000" step="1" value="' + data.release + '" ' + upd + '></input><span id="releaseval_' + name + '">' + data.release + '</span> ms<br>';
+        case "MIDI_CC":
+            return "CC number <input type='number' min='0' max='127' id='constmidicc_" + name + "' onchange='updateConstant(\"" + name + "\")' value='" + data + "'></input>&nbsp;" +
+                "Auto-bind : <input type='checkbox' onclick='bindMIDICC(\"" + name + "\")' id='autobindcc_" + name + "'></input>";
     }
 }
 
@@ -682,6 +685,10 @@ function updateConstant(name) {
                 if(!(fx.node.data instanceof Envelope))
                     fx.node.data = new Envelope(10, 0, 1, 25);
                 break;
+            case "MIDI_CC":
+                if(!(fx.node.data instanceof Number))
+                    fx.node.data = 0;
+                break;
         }
         get("constdata_" + name).innerHTML = drawConstantData(name, newtype, fx);
         fx.node.type = newtype;
@@ -702,6 +709,9 @@ function updateConstant(name) {
             get("sustainval_" + name).innerHTML = get('sustain_' + name).value;
             get("releaseval_" + name).innerHTML = get('release_' + name).value;
             break;
+        case "MIDI_CC":
+            fx.node.data = Number(get("constmidicc_" + name).value);
+            break;
     }
 }
 

diff --git a/scripts/synth.js b/scripts/synth.js
@@ -16,6 +16,8 @@ let osc1 = null, adsr = null;
 let osc2 = null, fmfreq = null;
 let osc = {};
 
+let midi = null;
+
 function get(id) {
     return document.getElementById(id);
 }
@@ -111,6 +113,53 @@ function initAudio() {
     drawSynth();
 }
 
+function initMIDI() {
+    navigator.requestMIDIAccess().then((access) => {
+        midi = access;
+        access.inputs.forEach((e) => {
+            e.onmidimessage = onMIDIMessage;
+        });
+    });
+}
+
+let midiCCbind = null;
+
+function bindMIDICC(name) {
+    midiCCbind = name;
+}
+
+function onMIDIMessage(event) {
+    let str = `MIDI message received at timestamp ${event.timeStamp}[${event.data.length} bytes]: `;
+    for (const character of event.data) {
+        str += `0x${character.toString(16)} `;
+    }
+    console.log(str);
+
+    const nodes = fx.getAllNodes();
+    if(event.data[0] == 0xB0) {
+        if(midiCCbind != null) {
+            get("constmidicc_" + midiCCbind).value = event.data[1];
+            get("autobindcc_" + midiCCbind).checked = false;
+            midiCCbind = null;
+        }
+        for(let k in nodes) {
+            if(nodes[k].fxtype == "constant" && nodes[k].node.type == "MIDI_CC" && nodes[k].node.data == event.data[1]) {
+                nodes[k].setParam("offset", event.data[2] / 127.);
+            }
+        }
+    }
+
+    //TODO handle vel
+    if((event.data[0] & 0xF0) == 0x90) {
+        if(event.data[2] == 0)
+            stopOsc(event.data[1]);
+        else
+            playOsc(event.data[1]);
+    } else if((event.data[0] & 0xF0) == 0x80) {
+        stopOsc(event.data[1]);
+    }
+}
+
 function drawSynth() {
     if(AC === null) return;
     const canvas = get("synth");
@@ -325,6 +374,7 @@ function playOsc(note = 69) {
         else if(nodes[k].fxtype == 'constant') {
             switch(nodes[k].node.type) {
                 case "CONSTANT":
+                case "MIDI_CC":
                     break;
                 case "EXT_PARAM":
                     switch(nodes[k].node.data) {

diff --git a/synth.html b/synth.html
@@ -80,6 +80,7 @@
     </table>
     <div>
         <p>
+            <button id="midi" onclick="initMIDI(); this.disabled = true;">ENABLE MIDI INPUT</button><br>
             <button id="export" onclick="export_all()">EXPORT</button>&nbsp;
             <button id="import" onclick="import_all()">IMPORT</button>
         </p>