From 9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22 Mon Sep 17 00:00:00 2001
From: Richard <q@1bpm.net>
Date: Sun, 13 Apr 2025 18:48:02 +0100
Subject: initial

---
 site/app/base/analyser.js | 97 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 site/app/base/analyser.js

(limited to 'site/app/base/analyser.js')

diff --git a/site/app/base/analyser.js b/site/app/base/analyser.js
new file mode 100644
index 0000000..ac55d42
--- /dev/null
+++ b/site/app/base/analyser.js
@@ -0,0 +1,97 @@
+var Analyser = function(type, twist, elContainer, csApp) {
+	var self = this;
+	var scopeNode = twirl.audioContext.createAnalyser();
+	var node;
+	var elCanvas = $("<canvas />").css({
+		position: "absolute", 
+		width: "100%",
+		height: "100%",
+		top: "0px",
+		left: "0px"
+	}).addClass("twist_scope").appendTo(elContainer);
+	var context = elCanvas[0].getContext("2d");
+	var playing = false;
+			
+	this.remove = function() {
+		type = null;
+		elContainer.remove();
+	};
+	
+	function frequency() {
+		if (type != 0 || !playing) return;
+		let style = getComputedStyle(document.body);
+		let width = elCanvas[0].width = elContainer.width();
+		let height = elCanvas[0].height = elContainer.height();
+		
+		let freqData = new Uint8Array(scopeNode.frequencyBinCount);
+		let scaling = height / 256;
+		scopeNode.getByteFrequencyData(freqData);
+		context.fillStyle = style.getPropertyValue("--waveformBgColor");
+		context.fillRect(0, 0, width, height);
+		context.lineWidth = 2;
+		context.strokeStyle = style.getPropertyValue("--waveformFgColor");
+		context.beginPath();
+		
+		for (var x = 0; x < width; x++) { 
+			context.lineTo(x, height - freqData[x] * scaling);
+		}
+		context.stroke();
+		requestAnimationFrame(frequency);
+	}
+	
+	function oscilloscope() {
+		if (type != 1 || !playing) return;
+		let style = getComputedStyle(document.body);
+		let width = elCanvas[0].width = elContainer.width();
+		let height = elCanvas[0].height = elContainer.height();
+		
+		let timeData = new Uint8Array(scopeNode.frequencyBinCount);
+		let scaling = height / 256;
+		let risingEdge = 0;
+		let edgeThreshold = 5;
+		scopeNode.getByteTimeDomainData(timeData);
+
+		context.fillStyle = style.getPropertyValue("--waveformBgColor");
+		context.fillRect(0, 0, width, height);
+		context.lineWidth = 2;
+		context.strokeStyle = style.getPropertyValue("--waveformFgColor");
+		context.beginPath();
+
+		while (timeData[risingEdge++] - 128 > 0 && risingEdge <= width);
+		if (risingEdge >= width) risingEdge = 0;
+		
+		while (timeData[risingEdge++] - 128 < edgeThreshold && risingEdge <= width);
+		if (risingEdge >= width) risingEdge = 0;
+		
+		for (var x = risingEdge; x < timeData.length && x - risingEdge < width; x++) {
+			context.lineTo(x - risingEdge, height - timeData[x] * scaling);
+		}
+		context.stroke();
+		requestAnimationFrame(oscilloscope);
+	}
+	
+	this.setPlaying = function(state) {
+		playing = state;
+		if (playing) {
+			if (type == 0) {
+				frequency();
+			} else if (type == 1) {
+				oscilloscope();
+			}
+		}
+	};
+	
+	this.setType = function(v) {
+		type = v;
+		self.setPlaying(playing);
+	};
+	
+	async function boot() {
+		node = await csApp.getNode();
+		node.connect(scopeNode);
+		if (twist.isPlaying()) {
+			self.setPlaying(true);
+		}
+	}
+	boot();
+};
\ No newline at end of file
-- 
cgit v1.2.3