fix: audio bars and upload process

js/src/components/audio/audio-level-bars.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef, useState } from "react";
+
+interface AudioLevelBarsProps {
+  sourceNode: AudioNode;
+}
+
+/**
+ * 3-bar VU meter that visualizes audio levels from any AudioNode source.
+ * Works with both live MediaStream sources and MediaElement sources.
+ */
+export function AudioLevelBars({ sourceNode }: AudioLevelBarsProps) {
+  const [levels, setLevels] = useState([0, 0, 0]);
+  const rafRef = useRef<number>(0);
+
+  useEffect(() => {
+    const ctx = sourceNode.context as AudioContext;
+    const analyser = ctx.createAnalyser();
+    analyser.fftSize = 256;
+    sourceNode.connect(analyser);
+
+    // Connect to destination via silent gain node — without this,
+    // Chromium suspends processing on disconnected audio graphs.
+    const silentGain = ctx.createGain();
+    silentGain.gain.value = 0;
+    analyser.connect(silentGain);
+    silentGain.connect(ctx.destination);
+
+    const dataArray = new Uint8Array(analyser.frequencyBinCount);
+
+    function tick() {
+      analyser.getByteTimeDomainData(dataArray);
+
+      // Compute RMS of waveform (128 = silence baseline)
+      let sumSquares = 0;
+      for (let i = 0; i < dataArray.length; i++) {
+        const normalized = (dataArray[i] - 128) / 128;
+        sumSquares += normalized * normalized;
+      }
+      const rms = Math.sqrt(sumSquares / dataArray.length);
+
+      // VU meter: 3 bars with staggered thresholds
+      // Typical speech RMS is ~0.02-0.15 from time-domain data
+      const bar0 = Math.min(1, rms * 10);
+      const bar1 = Math.max(0, Math.min(1, (rms - 0.02) * 8));
+      const bar2 = Math.max(0, Math.min(1, (rms - 0.06) * 6));
+      setLevels([bar0, bar1, bar2]);
+
+      rafRef.current = requestAnimationFrame(tick);
+    }
+
+    rafRef.current = requestAnimationFrame(tick);
+
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      try {
+        sourceNode.disconnect(analyser);
+        analyser.disconnect(silentGain);
+        silentGain.disconnect(ctx.destination);
+      } catch {
+        // Nodes may already be disconnected
+      }
+    };
+  }, [sourceNode]);
+
+  return (
+    <div className="flex items-end gap-1.5">
+      {levels.map((level, i) => (
+        <div
+          key={i}
+          className="w-1.5 rounded-full bg-green-400 transition-all duration-75"
+          style={{ height: `${Math.max(6, level * 48)}px` }}
+        />
+      ))}
+    </div>
+  );
+}

js/src/components/audio/use-audio-source.ts

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from "react";
+
+interface AudioSource {
+  sourceNode: AudioNode;
+  ctx: AudioContext;
+}
+
+/**
+ * Creates an AudioContext and source node from either a MediaStream (live recording)
+ * or an HTMLAudioElement (review playback).
+ *
+ * Important: `createMediaElementSource` can only be called once per element,
+ * so we cache the source per element instance.
+ */
+export function useAudioSource(
+  source: MediaStream | HTMLAudioElement | null,
+): AudioSource | null {
+  const [audioSource, setAudioSource] = useState<AudioSource | null>(null);
+  const elementSourceCache = useRef<
+    WeakMap<HTMLAudioElement, { sourceNode: MediaElementAudioSourceNode; ctx: AudioContext }>
+  >(new WeakMap());
+
+  useEffect(() => {
+    if (!source) {
+      setAudioSource(null);
+      return;
+    }
+
+    if (source instanceof MediaStream) {
+      const ctx = new AudioContext();
+      ctx.resume();
+      const sourceNode = ctx.createMediaStreamSource(source);
+      setAudioSource({ sourceNode, ctx });
+
+      return () => {
+        ctx.close();
+      };
+    }
+
+    // HTMLAudioElement — createMediaElementSource can only be called once per element
+    const cached = elementSourceCache.current.get(source);
+    if (cached) {
+      cached.ctx.resume();
+      setAudioSource(cached);
+      return;
+    }
+
+    const ctx = new AudioContext();
+    ctx.resume();
+    const sourceNode = ctx.createMediaElementSource(source);
+    // Connect element source to destination so audio is still audible
+    sourceNode.connect(ctx.destination);
+    elementSourceCache.current.set(source, { sourceNode, ctx });
+    setAudioSource({ sourceNode, ctx });
+
+    return () => {
+      ctx.close();
+      elementSourceCache.current.delete(source);
+    };
+  }, [source]);
+
+  return audioSource;
+}