mute/solo indicators

components/sequencer.js

@@ -107,7 +107,10 @@ class Sequencer extends LitElement {
                 patch: null,
                 length: defaultLength,
                 sequence: [],
-                algorithm: this.algorithms[0]
+                algorithm: this.algorithms[0],
+
+                mute: false,
+                solo: false
             };
         }
 
@@ -130,6 +133,14 @@ class Sequencer extends LitElement {
         return this.sequence[this.selectedTrack];
     }
 
+    setMute(trackIndex, state) {
+        this.sequence[trackIndex].mute = state;
+    }
+
+    setSolo(trackIndex, state) {
+        this.sequence[trackIndex].solo = state;
+    }
+
     switchTrack(trackIndex) {
         this.selectedTrack = trackIndex;
 
@@ -189,6 +200,8 @@ class Sequencer extends LitElement {
             tab.innerText = trackIndex + 1;
 
             if (trackIndex === this.selectedTrack) tab.classList.add("active");
+            if (this.sequence[trackIndex].mute) tab.classList.add("mute");
+            if (this.sequence[trackIndex].solo) tab.classList.add("solo");
 
             tab.addEventListener("click", () =>
                 this.switchTrack(trackIndex));

main.js

@@ -37,7 +37,7 @@ document.addEventListener("DOMContentLoaded", () => {
     let sequencer = document.querySelector("ui-sequencer");
     let arpeggiator = document.querySelector("ui-arpeggiator");
 
-    const mixer = new Mixer(sequencer.numTracks);
+    const mixer = new Mixer(sequencer);
 
     for (let trackIndex = 0; trackIndex < sequencer.numTracks; trackIndex++) {
         let patch = new Patch(

mixer.js

@@ -1,11 +1,12 @@
 import * as Tone from "tone";
 
 class Mixer {
-    constructor(numTracks) {
+    constructor(sequencer) {
         this.gainNodes = [];
         this.soloChannel = null;
+        this.sequencer = sequencer;
 
-        for (let track = 0; track < numTracks; track++) {
+        for (let track = 0; track < sequencer.numTracks; track++) {
             let gainNode = new Tone.Gain(1).toDestination();
             this.gainNodes.push(gainNode);
         }
@@ -16,8 +17,10 @@ class Mixer {
     }
 
     toggleMute(channel) {
-        let gain = this.gainNodes[channel].gain.value;
-        this.gainNodes[channel].gain.value = gain === 0 ? 1 : 0;
+        let toggle = this.gainNodes[channel].gain.value === 0;
+        this.gainNodes[channel].gain.value = toggle ? 1 : 0;
+        this.sequencer.setMute(channel, !toggle);
+        this.sequencer.requestUpdate();
     }
 
     toggleSolo(channel) {
@@ -26,6 +29,7 @@ class Mixer {
         // i.e. if you solo twice, you unmute all
         if (this.soloChannel === channel) {
             this.unmuteAll();
+            this.sequencer.setSolo(this.soloChannel, false);
             this.soloChannel = null;
             return;
         }
@@ -34,17 +38,26 @@ class Mixer {
         for (let channelIndex = 0;
             channelIndex < this.gainNodes.length;
             channelIndex++) {
-            if (channelIndex === channel) this.gainNodes[channel].gain.value = 1;
-            else this.gainNodes[channelIndex].gain.value = 0;
+            if (channelIndex === channel) {
+                this.gainNodes[channel].gain.value = 1;
+                this.sequencer.setSolo(channel, true);
+            } else {
+                this.gainNodes[channelIndex].gain.value = 0;
+                this.sequencer.setSolo(channelIndex, false);
+            }
         }
+        this.sequencer.requestUpdate();
     }
 
     unmuteAll() {
         for (let channelIndex = 0;
             channelIndex < this.gainNodes.length;
             channelIndex++) {
             this.gainNodes[channelIndex].gain.value = 1;
+            this.sequencer.setMute(channelIndex, false);
+            this.sequencer.setSolo(channelIndex, false);
         }
+        this.sequencer.requestUpdate();
     }
 }
 

styles/sequencer.styl

@@ -13,6 +13,12 @@
     color #fff
     border-color primary-color
 
+  .solo
+    color #81C784
+
+  .mute
+    color #E57373
+
 .trackTab
   background #111
   height 100%