Implement visualizer plugin

plugins/visualizer/visualizers/butterchurn.js

@@ -0,0 +1,46 @@
+const butterchurn = require("butterchurn");
+const butterchurnPresets = require("butterchurn-presets");
+
+const presets = butterchurnPresets.getPresets();
+
+class ButterchurnVisualizer {
+	constructor(
+		audioContext,
+		audioSource,
+		visualizerContainer,
+		canvas,
+		audioNode,
+		stream,
+		options
+	) {
+		this.visualizer = butterchurn.default.createVisualizer(
+			audioContext,
+			canvas,
+			{
+				width: canvas.width,
+				height: canvas.height,
+			}
+		);
+
+		const preset = presets[options.preset];
+		this.visualizer.loadPreset(preset, options.blendTimeInSeconds);
+
+		this.visualizer.connectAudio(audioNode);
+
+		this.renderingFrequencyInMs = options.renderingFrequencyInMs;
+	}
+
+	resize(width, height) {
+		this.visualizer.setRendererSize(width, height);
+	}
+
+	render() {
+		const renderVisualizer = () => {
+			requestAnimationFrame(() => renderVisualizer());
+			this.visualizer.render();
+		};
+		setTimeout(renderVisualizer(), this.renderingFrequencyInMs);
+	}
+}
+
+module.exports = ButterchurnVisualizer;

plugins/visualizer/visualizers/vudio.js

@@ -0,0 +1,33 @@
+const Vudio = require("vudio/umd/vudio");
+
+class VudioVisualizer {
+	constructor(
+		audioContext,
+		audioSource,
+		visualizerContainer,
+		canvas,
+		audioNode,
+		stream,
+		options
+	) {
+		this.visualizer = new Vudio(stream, canvas, {
+			width: canvas.width,
+			height: canvas.height,
+			// Visualizer config
+			...options,
+		});
+	}
+
+	resize(width, height) {
+		this.visualizer.setOption({
+			width: width,
+			height: height,
+		});
+	}
+
+	render() {
+		this.visualizer.dance();
+	}
+}
+
+module.exports = VudioVisualizer;

plugins/visualizer/visualizers/wave.js

@@ -0,0 +1,31 @@
+const { Wave } = require("@foobar404/wave");
+
+class WaveVisualizer {
+	constructor(
+		audioContext,
+		audioSource,
+		visualizerContainer,
+		canvas,
+		audioNode,
+		stream,
+		options
+	) {
+		this.visualizer = new Wave(
+			{ context: audioContext, source: audioSource },
+			canvas
+		);
+		options.animations.forEach((animation) => {
+			this.visualizer.addAnimation(
+				eval(`new this.visualizer.animations.${animation.type}(
+					${JSON.stringify(animation.config)}
+				)`)
+			);
+		});
+	}
+
+	resize(width, height) {}
+
+	render() {}
+}
+
+module.exports = WaveVisualizer;