Add toggles to each source

package-lock.json

@@ -2423,6 +2423,11 @@
         "wnumb": "^1.2.0"
       }
     },
+    "@vueform/toggle": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vueform/toggle/-/toggle-2.0.1.tgz",
+      "integrity": "sha512-Hx26jK+hJUndP4zUBXdScYnTlDwXhkRl+sPW1srkOHqImAcyV2932LzavZQIqK1MhBBukKt+X0wkR5cJL7duYw=="
+    },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.nlark.com/@webassemblyjs/ast/download/@webassemblyjs/ast-1.9.0.tgz?cache=0&sync_timestamp=1625473420080&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40webassemblyjs%2Fast%2Fdownload%2F%40webassemblyjs%2Fast-1.9.0.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@vueform/slider": "^2.0.5",
+    "@vueform/toggle": "^2.0.1",
     "core-js": "^3.6.5",
     "postcss": "^8.3.6",
     "reflect-metadata": "^0.1.13",

src/App.vue

@@ -32,3 +32,4 @@ body {
 </style>
 
 <style src="@vueform/slider/themes/default.css"></style>
+<style src="@vueform/toggle/themes/default.css"></style>

src/audio.ts

@@ -41,6 +41,20 @@ export abstract class Source extends Node {
   protected sounds: Array<AudioBuffer> = [];
   public gain: GainNode;
   public output: GainNode;
+  public _active = true;
+
+  get active(): boolean {
+    return this._active;
+  }
+
+  set active(value: boolean) {
+    this._active = value;
+
+    this.output.gain.linearRampToValueAtTime(
+      value ? 1.0 : 0.0,
+      context.currentTime + 0.5
+    );
+  }
 
   @exposedNumber("Volume", 0, 1)
   public volume = 1;

src/components/VoreAudio.vue

@@ -9,10 +9,7 @@
   <div>
     Many sounds by <a href="https://www.furaffinity.net/user/jeschke">Jit</a>!
   </div>
-  <button v-on:click="startGlorps">Glorps</button>
-  <button v-on:click="startDigestion">Digestion</button>
-  <button v-on:click="startBurps">Burps</button>
-  <button v-on:click="startGurgles">Gurgles</button>
+  <button v-on:click="start">Start</button>
   <div class="soundscape">
     <source-node
       v-for="(source, index) in sources"
@@ -64,6 +61,8 @@ export default class VoreAudio extends Vue {
     source.start();
     setInterval(() => source.tick(100), 100);
 
+    source.active = false;
+
     this.sources.push(source);
   }
 
@@ -103,6 +102,8 @@ export default class VoreAudio extends Vue {
     console.log(source);
     setInterval(() => source.tick(100), 100);
 
+    source.active = false;
+
     this.sources.push(source);
   }
 
@@ -131,7 +132,7 @@ export default class VoreAudio extends Vue {
     source.loadSound("gurgles/gurgle (21).ogg");
     source.output.connect(this.context.destination);
     source.start();
-    source.gain.gain.value = 0.5;
+    source.volume = 0.5;
     console.log(source);
     setInterval(() => source.tick(100), 100);
 
@@ -142,6 +143,13 @@ export default class VoreAudio extends Vue {
     clearCache();
   }
 
+  start(): void {
+    this.startGlorps();
+    this.startGurgles();
+    this.startDigestion();
+    this.startBurps();
+  }
+
   mounted(): void {
     this.context = setup();
   }

src/components/sources/SourceNode.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="source-node">
+  <div :class="source.active ? '' : 'inactive'" class="source-node">
+    <Toggle class="active-toggle" v-model="source.active" />
     <div class="node-name">{{ source.name }}</div>
     <node-props :source="source"></node-props>
   </div>
@@ -9,6 +10,7 @@
 import { Source } from "@/audio";
 import { Options, Vue } from "vue-class-component";
 import NodeProps from "@/components/NodeProps.vue";
+import Toggle from "@vueform/toggle";
 
 @Options({
   props: {
@@ -16,6 +18,7 @@ import NodeProps from "@/components/NodeProps.vue";
   },
   components: {
     NodeProps,
+    Toggle,
   },
 })
 export default class SourceNode extends Vue {
@@ -27,9 +30,15 @@ export default class SourceNode extends Vue {
 .source-node {
   width: 100%;
   height: 100%;
-  background: gray;
+  background: #555;
   display: flex;
   flex-direction: column;
+  position: relative;
+  transition: 0.2s background;
+}
+
+.source-node.inactive {
+  background: #888;
 }
 
 .node-name {
@@ -42,4 +51,10 @@ export default class SourceNode extends Vue {
   display: flex;
   flex-direction: column;
 }
+
+.active-toggle {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
 </style>