Sonogram

Author: benfoxall

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "fft.js": "^4.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package.json

@@ -11,5 +11,6 @@
   & audio,
   & canvas {
     width: 100%;
+    max-height: 20em;
   }
 }

src/Audiovis.module.css

@@ -1,6 +1,7 @@
 import { FC, useEffect, useMemo, useRef, useState } from "react";
 import styles from "./Audiovis.module.css";
 import { useAudioCtx } from "./AudioCtxCtx";
+import FFT from "fft.js";
 
 export const Audiovis: FC<{ srcObject: Blob }> = ({ srcObject }) => {
   const url = useMemo(() => URL.createObjectURL(srcObject), [srcObject]);
@@ -11,6 +12,7 @@ export const Audiovis: FC<{ srcObject: Blob }> = ({ srcObject }) => {
       <audio src={url} controls />
 
       {buffer && <Waveform audio={buffer} />}
+      {buffer && <Sonogram audio={buffer} />}
     </section>
   );
 };
@@ -65,3 +67,95 @@ const Waveform: FC<{ audio: AudioBuffer }> = ({ audio }) => {
     />
   );
 };
+
+const Sonogram: FC<{ audio: AudioBuffer }> = ({ audio }) => {
+  const canvas = useRef<HTMLCanvasElement>(null);
+
+  const fttData = useMemo(() => {
+    const fftSize = 1024; // Ensure this is a power of two
+    const fft = new FFT(fftSize);
+    const data = audio.getChannelData(0);
+
+    const chunks = Math.floor(audio.length / fftSize);
+    const target = new Float32Array(fftSize * chunks);
+
+    const truncatedData = new Array(fftSize);
+    const out = fft.createComplexArray();
+
+    let min = Infinity;
+    let max = -Infinity;
+
+    for (let i = 0; i < chunks; i++) {
+      const offset = i * fftSize;
+      for (let i = 0; i < truncatedData.length; i++)
+        truncatedData[i] = data[i + offset];
+      fft.realTransform(out, truncatedData);
+
+      for (let j = 0; j < fftSize; j++) {
+        target[i * fftSize + j] = out[j];
+        max = Math.max(max, target[i * fftSize + j]);
+        min = Math.min(min, target[i * fftSize + j]);
+      }
+    }
+
+    const image = new ImageData(chunks, fftSize);
+
+    for (let i = 0; i < chunks; i++) {
+      for (let j = 0; j < fftSize; j++) {
+        const idx = j * chunks + i;
+        const value = Math.abs(target[i * fftSize + j]);
+
+        const scaledValue = value * 0.1;
+
+        const clamped = Math.max(Math.min(scaledValue, 1), 0);
+
+        const col = hslToRgb(clamped / 2, 0.9, 0.5);
+
+        image.data[idx * 4] = col[0];
+        image.data[idx * 4 + 1] = col[1];
+        image.data[idx * 4 + 2] = col[2];
+        image.data[idx * 4 + 3] = clamped * 255;
+      }
+    }
+
+    return image;
+  }, [audio]);
+
+  useEffect(() => {
+    const ctx = canvas.current?.getContext("2d");
+    if (ctx) {
+      ctx.canvas.width = fttData.width;
+      ctx.canvas.height = fttData.height;
+
+      ctx.putImageData(fttData, 0, 0);
+    }
+  }, [fttData]);
+
+  return <canvas ref={canvas} className={styles.waveform} />;
+};
+
+function hslToRgb(h: number, s: number, l: number) {
+  let r: number, g: number, b: number;
+
+  if (s == 0) {
+    r = g = b = l; // achromatic
+  } else {
+    function hue2rgb(p: number, q: number, t: number) {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    }
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+
+  return [r * 255, g * 255, b * 255];
+}

src/Audiovis.tsx

@@ -27,7 +27,7 @@ const RecordAudio: FC<{ onCreated: (blob: Blob) => void }> = ({
       for (const track of stream.getTracks()) {
         track.stop();
       }
-    }, 5000); // Stop recording after 5 seconds
+    }, 8000); // Stop recording after 5 seconds
   };
 
   return (