Add stereo-width and highpass filters

src/components/VoreAudio.vue

@@ -39,6 +39,8 @@ import LoopingSource from "@/sources/LoopingSource";
 import IntervalSource from "@/sources/IntervalSource";
 import Filter from "@/filters/Filter";
 import BiquadFilter from "@/filters/LowpassFilter";
+import StereoWidthFilter from "@/filters/StereoWidthFilter";
+import HighpassFilter from "@/filters/HighpassFilter";
 
 @Options({
   props: {
@@ -169,9 +171,15 @@ export default class VoreAudio extends Vue {
     this.startGurgles();
     this.startDigestion();
     this.startBurps();
-    const filter: Filter = new BiquadFilter();
-    filter.active = false;
-    this.addFilter(filter);
+    const biquad: Filter = new BiquadFilter();
+    biquad.active = false;
+    this.addFilter(biquad);
+    const stereo: Filter = new StereoWidthFilter();
+    stereo.active = false;
+    this.addFilter(stereo);
+    const highpass: Filter = new HighpassFilter();
+    highpass.active = false;
+    this.addFilter(highpass);
     setInterval(() => {
       this.sources.forEach((source) => source.tick(100));
       this.filters.forEach((filter) => filter.tick(100));

src/filters/HighpassFilter.ts

@@ -0,0 +1,24 @@
+import Filter from "./Filter";
+import { context, exposedNumber } from "../audio";
+export default class HighpassFilter extends Filter {
+  public kind = "Biquad Filter";
+  private biquad: BiquadFilterNode;
+
+  @exposedNumber("Cutoff", 10, 10000)
+  public cutoff = 500;
+
+  constructor() {
+    super("Highpass Filter");
+    this.biquad = context.createBiquadFilter();
+
+    this.biquad.type = "highpass";
+    this.biquad.frequency.value = 500;
+    this.filterInput.connect(this.biquad);
+    this.biquad.connect(this.output);
+  }
+
+  public tick(dt: number): void {
+    super.tick(dt);
+    this.biquad.frequency.value = this.cutoff;
+  }
+}

src/filters/StereoWidthFilter.ts

@@ -0,0 +1,32 @@
+import Filter from "./Filter";
+import { context, exposedNumber } from "../audio";
+export default class StereoWidthFilter extends Filter {
+  public kind = "Stereo Width";
+  private mono: GainNode;
+  private stereo: GainNode;
+
+  @exposedNumber("Width", 0, 1)
+  public width = 1;
+
+  constructor() {
+    super("Stereo Width");
+    this.mono = context.createGain();
+    this.stereo = context.createGain();
+
+    this.mono.channelCount = 1;
+    this.mono.channelCountMode = "explicit";
+    this.mono.gain.value = 1 - this.width;
+    this.stereo.gain.value = this.width;
+
+    this.filterInput.connect(this.mono);
+    this.mono.connect(this.output);
+    this.filterInput.connect(this.stereo);
+    this.stereo.connect(this.output);
+  }
+
+  public tick(dt: number): void {
+    super.tick(dt);
+    this.mono.gain.value = 1 - this.width;
+    this.stereo.gain.value = this.width;
+  }
+}