visualizer

public/s/js/f0ck.js

@@ -116,4 +116,62 @@
     xDown = yDown = null;
   }, false);
   // </swipe>
+
+  // <testzone>
+  if(audioElement = document.querySelector("audio")) {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    canvas.width = 1920;
+    canvas.height = 1080;
+
+    setTimeout(() => {
+      document.querySelector(".v0ck").insertAdjacentElement("afterbegin", canvas);
+    }, 400);
+
+    const audioCtx = new AudioContext();
+    const analyser = audioCtx.createAnalyser();
+    analyser.fftSize = 2048;
+
+    const source = audioCtx.createMediaElementSource(audioElement);
+    source.connect(analyser);
+    source.connect(audioCtx.destination);
+
+    let data = new Uint8Array(analyser.frequencyBinCount);
+    requestAnimationFrame(loopingFunction);
+
+    function loopingFunction() {
+      requestAnimationFrame(loopingFunction);
+      analyser.getByteFrequencyData(data);
+      draw(data);
+    }
+    /*function draw(data) {
+      data = [ ...data ];
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const space = canvas.width / data.length;
+      const sstyle = getComputedStyle(document.body).getPropertyValue("--accent");
+      data.forEach((value, i) => {
+        ctx.beginPath();
+        ctx.moveTo(space * i, canvas.height);
+        ctx.lineTo(space * i, canvas.height - value);
+        ctx.strokeStyle = sstyle;
+        ctx.stroke();
+      });
+    }*/
+    function draw(data) {
+      data = [ ...data ];
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = getComputedStyle(document.body).getPropertyValue("--accent");
+      data.forEach((value, i) => {
+        const percent = value / 256;
+        const height = (canvas.height * percent / 2) - 40;
+        const offset = canvas.height - height - 1;
+        const barWidth = canvas.width / analyser.frequencyBinCount;
+        ctx.fillRect(i * barWidth, offset, barWidth, height);
+      });
+    }
+    audioElement.onplay = () => {
+      audioCtx.resume();
+    };
+  }
+  // </testzone>
 })();