diff options
| author | Richard <q@1bpm.net> | 2025-04-13 18:48:02 +0100 |
|---|---|---|
| committer | Richard <q@1bpm.net> | 2025-04-13 18:48:02 +0100 |
| commit | 9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22 (patch) | |
| tree | 291bd79ce340e67affa755a8a6b4f6a83cce93ea /site/app/base/analyser.js | |
| download | apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.tar.gz apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.tar.bz2 apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.zip | |
initial
Diffstat (limited to 'site/app/base/analyser.js')
| -rw-r--r-- | site/app/base/analyser.js | 97 |
1 files changed, 97 insertions, 0 deletions
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 |