feat(midi): adds multi-channel midi support (#91)

* add function to receive cc messages from a controller * receive cc from controller * use channel of a note to send it through * use channel of a cc to set thannel without gui * fix notes off when playing more than one channel * feat(midi): adds program change for instrument selection (#89) * clean up before pull request Co-authored-by: umanema <[email protected]> Co-authored-by: Sam Wray <[email protected]>
2xAA · Sep 22, 2021 · 96b3b50 · 96b3b50
1 parent 79fb45d
commit 96b3b50
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 6 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -468,7 +468,7 @@ export default {
       } = e;
       const note = `${name}${octave}`;
 
-      let channel = this.channel;
+    let channel = e.channel;
 
       if (this.polyphonic) {
         channel = this.nextPolyphonyChannel(number);
@@ -488,8 +488,14 @@ export default {
 
       const { name, octave, number } = e.note;
       const note = `${name}${octave}`;
+      let channel;
+      if (this.polyphonic) {
+        channel = this.notesOn[number];
+      } else {
+        channel = e.channel;
+      }
 
-      this.outputPort.stopNote(note, this.notesOn[number]);
+      this.outputPort.stopNote(note, channel);
 
       delete this.notesOn[number];
     },
@@ -508,6 +514,19 @@ export default {
       }
     },
 
+    handleCC(e) {
+      this.$store.dispatch("setCCValuesOnChannel", {
+        [e.controller.number]: this.inverse
+          ? 127 - e.value
+          : e.value,
+        channel: e.channel
+      });
+
+      if (!this.outputPort) {
+        return;
+      }
+    },
+
     async handleProgramChange(e) {
       if (!this.outputPort) {
         return;
@@ -585,6 +604,8 @@ export default {
       // Listen for a pitch bend message on all channels
       input.addListener("pitchbend", "all", this.handlePitchBend);
 
+      input.addListener("controlchange", "all", this.handleCC);
+
       // Listen for a program change message on all channels
       input.addListener("programchange", "all", this.handleProgramChange);
     }

diff --git a/src/components/DraggableSelect.vue b/src/components/DraggableSelect.vue
@@ -122,7 +122,6 @@ export default {
       );
 
       this.internalValue = clampedNewIndex;
-
       this.$emit(
         "input",
         this.emitArrayValue ? values[clampedNewIndex] : clampedNewMIDIValue

diff --git a/src/components/MDMDial.vue b/src/components/MDMDial.vue
@@ -59,9 +59,9 @@ export default {
 
     this.storeUnsubscribe = this.$store.subscribe(mutation => {
       if (mutation.type === "SET_CC_VALUE") {
-        const { cc, value } = mutation.payload;
+        const { cc, value, channel } = mutation.payload;
 
-        if (cc === this.cc + this.ccOffset && !this.mouseButtonDown) {
+        if (cc === this.cc + this.ccOffset && !this.mouseButtonDown && channel === this.$store.state.channel) {
           this.movementValue = this.inverse ? -value + 127 : value;
           this.draw();
         }
@@ -165,7 +165,6 @@ export default {
 
       this.movementValue = clampedNewValue;
       this.downY = e.pageY;
-
       this.$store.dispatch("setCCValues", {
         values: {
           [this.cc + this.ccOffset]: this.inverse

diff --git a/src/store/index.js b/src/store/index.js
@@ -65,6 +65,34 @@ const store = new Vuex.Store({
       });
     },
 
+    setCCValuesOnChannel({ commit, state }, values = {}) {
+      Object.keys(values).forEach(key => {
+        if (parseInt(key, 10) === NaN) {
+          return;
+        }
+        const cc = parseInt(key, 10);
+
+        const value = values[cc];
+        const isGlobal = GLOBAL_CC.indexOf(cc) > -1;
+
+        if (state.polyphonic || isGlobal) {
+          for (let i = 1; i < 7; ++i) {
+            if (state[`channel${i}`][cc] === value) {
+              continue;
+            }
+
+            commit("SET_CC_VALUE", { cc, value, channel: i });
+          }
+        } else {
+          if (state[`channel${values.channel}`][cc] === value) {
+            return;
+          }
+
+          commit("SET_CC_VALUE", { cc, value, channel: values.channel });
+        }
+      });
+    },
+
     setChannel({ commit }, channel) {
       commit("SET_CHANNEL", channel);
     },