@editframe/elements 0.16.8-beta.0 → 0.18.3-beta.0

package/src/elements/EFMedia/audioTasks/makeAudioFrequencyAnalysisTask.ts

@@ -0,0 +1,241 @@
+import { Task } from "@lit/task";
+import { EF_INTERACTIVE } from "../../../EF_INTERACTIVE.js";
+import { LRUCache } from "../../../utils/LRUCache.js";
+import type { EFMedia } from "../../EFMedia.js";
+
+// DECAY_WEIGHT constant - same as original
+const DECAY_WEIGHT = 0.8;
+
+function processFFTData(
+  fftData: Uint8Array,
+  zeroThresholdPercent = 0.1,
+): Uint8Array {
+  // Step 1: Determine the threshold for zeros
+  const totalBins = fftData.length;
+  const zeroThresholdCount = Math.floor(totalBins * zeroThresholdPercent);
+
+  // Step 2: Interrogate the FFT output to find the cutoff point
+  let zeroCount = 0;
+  let cutoffIndex = totalBins; // Default to the end of the array
+
+  for (let i = totalBins - 1; i >= 0; i--) {
+    if (fftData[i] ?? 0 < 10) {
+      zeroCount++;
+    } else {
+      // If we encounter a non-zero value, we can stop
+      if (zeroCount >= zeroThresholdCount) {
+        cutoffIndex = i + 1; // Include this index
+        break;
+      }
+    }
+  }
+
+  if (cutoffIndex < zeroThresholdCount) {
+    return fftData;
+  }
+
+  // Step 3: Resample the "good" portion of the data
+  const goodData = fftData.slice(0, cutoffIndex);
+  const resampledData = interpolateData(goodData, fftData.length);
+
+  // Step 4: Attenuate the top 10% of interpolated samples
+  const attenuationStartIndex = Math.floor(totalBins * 0.9);
+  for (let i = attenuationStartIndex; i < totalBins; i++) {
+    // Calculate attenuation factor that goes from 1 to 0 over the top 10%
+    const attenuationProgress =
+      (i - attenuationStartIndex) / (totalBins - attenuationStartIndex) + 0.2;
+    const attenuationFactor = Math.max(0, 1 - attenuationProgress);
+    resampledData[i] = Math.floor((resampledData[i] ?? 0) * attenuationFactor);
+  }
+
+  return resampledData;
+}
+
+function interpolateData(data: Uint8Array, targetSize: number): Uint8Array {
+  const resampled = new Uint8Array(targetSize);
+  const dataLength = data.length;
+
+  for (let i = 0; i < targetSize; i++) {
+    // Calculate the corresponding index in the original data
+    const ratio = (i / (targetSize - 1)) * (dataLength - 1);
+    const index = Math.floor(ratio);
+    const fraction = ratio - index;
+
+    // Handle edge cases
+    if (index >= dataLength - 1) {
+      resampled[i] = data[dataLength - 1] ?? 0; // Last value
+    } else {
+      // Linear interpolation
+      resampled[i] = Math.round(
+        (data[index] ?? 0) * (1 - fraction) + (data[index + 1] ?? 0) * fraction,
+      );
+    }
+  }
+
+  return resampled;
+}
+
+export function makeAudioFrequencyAnalysisTask(element: EFMedia) {
+  // Internal cache for this task instance (same as original #frequencyDataCache)
+  const cache = new LRUCache<string, Uint8Array>(100);
+
+  return new Task(element, {
+    autoRun: EF_INTERACTIVE,
+    onError: (error) => {
+      console.error("frequencyDataTask error", error);
+    },
+    args: () =>
+      [
+        element.audioBufferTask.status,
+        element.currentSourceTimeMs,
+        element.fftSize,
+        element.fftDecay,
+        element.fftGain,
+        element.shouldInterpolateFrequencies,
+      ] as const,
+    task: async () => {
+      await element.audioBufferTask.taskComplete;
+      if (!element.audioBufferTask.value) return null;
+      if (element.currentSourceTimeMs < 0) return null;
+
+      const currentTimeMs = element.currentSourceTimeMs;
+
+      // ONLY CHANGE: Get real audio data for analysis (same technique as playback)
+      const analysisWindowMs = 5000; // Get 5 seconds for better analysis
+      const fromMs = Math.max(0, currentTimeMs);
+      const toMs = fromMs + analysisWindowMs;
+
+      const { fetchAudioSpanningTime: fetchAudioSpan } = await import(
+        "../shared/AudioSpanUtils.ts"
+      );
+      const audioSpan = await fetchAudioSpan(
+        element,
+        fromMs,
+        toMs,
+        new AbortController().signal,
+      );
+
+      if (!audioSpan || !audioSpan.blob) {
+        console.warn("Frequency analysis skipped: no audio data available");
+        return null;
+      }
+
+      // Decode the real audio data
+      const tempAudioContext = new OfflineAudioContext(2, 48000, 48000);
+      const arrayBuffer = await audioSpan.blob.arrayBuffer();
+      const audioBuffer = await tempAudioContext.decodeAudioData(arrayBuffer);
+
+      // Use actual startOffset from audioSpan (relative to requested time)
+      const startOffsetMs = audioSpan.startMs;
+
+      // ORIGINAL ALGORITHM FROM HERE - unchanged customer logic
+      const smoothedKey = `${element.shouldInterpolateFrequencies}:${element.fftSize}:${element.fftDecay}:${element.fftGain}:${startOffsetMs}:${currentTimeMs}`;
+
+      const cachedSmoothedData = cache.get(smoothedKey);
+      if (cachedSmoothedData) {
+        return cachedSmoothedData;
+      }
+
+      const framesData = await Promise.all(
+        Array.from({ length: element.fftDecay }, async (_, i) => {
+          const frameOffset = i * (1000 / 30);
+          const startTime = Math.max(
+            0,
+            (currentTimeMs - frameOffset - startOffsetMs) / 1000,
+          );
+
+          // Cache key for this specific frame
+          const cacheKey = `${element.shouldInterpolateFrequencies}:${element.fftSize}:${element.fftGain}:${startOffsetMs}:${startTime}`;
+
+          // Check cache for this specific frame
+          const cachedFrame = cache.get(cacheKey);
+          if (cachedFrame) {
+            return cachedFrame;
+          }
+
+          // Running 48000 * (1 / 30) = 1600 broke something terrible, it came out as 0,
+          // I'm assuming weird floating point nonsense to do with running on rosetta
+          const SIZE = 48000 / 30;
+          let audioContext: OfflineAudioContext;
+          try {
+            audioContext = new OfflineAudioContext(2, SIZE, 48000);
+          } catch (error) {
+            throw new Error(
+              `[EFMedia.frequencyDataTask] Failed to create OfflineAudioContext(2, ${SIZE}, 48000) for frame ${i} at time ${startTime}s: ${error instanceof Error ? error.message : String(error)}. This is for audio frequency analysis.`,
+            );
+          }
+          const analyser = audioContext.createAnalyser();
+          analyser.fftSize = element.fftSize;
+          analyser.minDecibels = -90;
+          analyser.maxDecibels = -10;
+
+          const gainNode = audioContext.createGain();
+          gainNode.gain.value = element.fftGain;
+
+          const filter = audioContext.createBiquadFilter();
+          filter.type = "bandpass";
+          filter.frequency.value = 15000;
+          filter.Q.value = 0.05;
+
+          const audioBufferSource = audioContext.createBufferSource();
+          audioBufferSource.buffer = audioBuffer;
+
+          audioBufferSource.connect(filter);
+          filter.connect(gainNode);
+          gainNode.connect(analyser);
+          analyser.connect(audioContext.destination);
+
+          audioBufferSource.start(0, startTime, 1 / 30);
+
+          try {
+            await audioContext.startRendering();
+            const frameData = new Uint8Array(element.fftSize / 2);
+            analyser.getByteFrequencyData(frameData);
+
+            // Cache this frame's analysis
+            cache.set(cacheKey, frameData);
+            return frameData;
+          } finally {
+            audioBufferSource.disconnect();
+            analyser.disconnect();
+          }
+        }),
+      );
+
+      const frameLength = framesData[0]?.length ?? 0;
+
+      // Combine frames with decay
+      const smoothedData = new Uint8Array(frameLength);
+      for (let i = 0; i < frameLength; i++) {
+        let weightedSum = 0;
+        let weightSum = 0;
+
+        framesData.forEach((frame: Uint8Array, frameIndex: number) => {
+          const decayWeight = DECAY_WEIGHT ** frameIndex;
+          weightedSum += (frame[i] ?? 0) * decayWeight;
+          weightSum += decayWeight;
+        });
+
+        smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
+      }
+
+      // Apply frequency weights using instance FREQ_WEIGHTS
+      smoothedData.forEach((value, i) => {
+        const freqWeight = element.FREQ_WEIGHTS[i] ?? 0;
+        smoothedData[i] = Math.min(255, Math.round(value * freqWeight));
+      });
+
+      // Only return the lower half of the frequency data
+      // The top half is zeroed out, which makes for aesthetically unpleasing waveforms
+      const slicedData = smoothedData.slice(
+        0,
+        Math.floor(smoothedData.length / 2),
+      );
+      const processedData = element.shouldInterpolateFrequencies
+        ? processFFTData(slicedData)
+        : slicedData;
+      cache.set(smoothedKey, processedData);
+      return processedData;
+    },
+  });
+}

package/src/elements/EFMedia/audioTasks/makeAudioInitSegmentFetchTask.browsertest.ts

@@ -0,0 +1,59 @@
+import { TaskStatus } from "@lit/task";
+import { customElement } from "lit/decorators.js";
+import { afterEach, beforeEach, describe, vi } from "vitest";
+import { test as baseTest } from "../../../../test/useMSW.js";
+import { EFAudio } from "../../EFAudio";
+import { makeAudioInitSegmentFetchTask } from "./makeAudioInitSegmentFetchTask";
+
+@customElement("test-media-audio-init-segment-fetch")
+class TestMediaAudioInitSegmentFetch extends EFAudio {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-media-audio-init-segment-fetch": TestMediaAudioInitSegmentFetch;
+  }
+}
+
+const test = baseTest.extend<{
+  element: TestMediaAudioInitSegmentFetch;
+}>({
+  element: async ({}, use) => {
+    const element = document.createElement(
+      "test-media-audio-init-segment-fetch",
+    );
+    await use(element);
+    element.remove();
+  },
+});
+
+describe("makeAudioInitSegmentFetchTask", () => {
+  beforeEach(() => {
+    // MSW setup is now handled by test fixtures
+  });
+
+  afterEach(() => {
+    const elements = document.querySelectorAll(
+      "test-media-audio-init-segment-fetch",
+    );
+    for (const element of elements) {
+      element.remove();
+    }
+    vi.restoreAllMocks();
+  });
+
+  test("creates task with correct initial state", ({ element, expect }) => {
+    const task = makeAudioInitSegmentFetchTask(element);
+
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+    expect(task.value).toBeUndefined();
+    expect(task.error).toBeUndefined();
+  });
+
+  test("task integrates with element properties", ({ element, expect }) => {
+    const task = makeAudioInitSegmentFetchTask(element);
+
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+  });
+});

package/src/elements/EFMedia/audioTasks/makeAudioInitSegmentFetchTask.ts

@@ -0,0 +1,23 @@
+import { Task } from "@lit/task";
+import type { MediaEngine } from "../../../transcoding/types";
+import type { EFMedia } from "../../EFMedia";
+import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
+
+export const makeAudioInitSegmentFetchTask = (
+  host: EFMedia,
+): Task<readonly [MediaEngine | undefined], ArrayBuffer> => {
+  return new Task(host, {
+    args: () => [host.mediaEngineTask.value] as const,
+    onError: (error) => {
+      console.error("audioInitSegmentFetchTask error", error);
+    },
+    onComplete: (_value) => {},
+    task: async ([_mediaEngine], { signal }) => {
+      const mediaEngine = await getLatestMediaEngine(host, signal);
+      return mediaEngine.fetchInitSegment(
+        mediaEngine.getAudioRendition(),
+        signal,
+      );
+    },
+  });
+};

package/src/elements/EFMedia/audioTasks/makeAudioInputTask.browsertest.ts

@@ -0,0 +1,55 @@
+import { TaskStatus } from "@lit/task";
+import { customElement } from "lit/decorators.js";
+import { afterEach, beforeEach, describe, vi } from "vitest";
+import { test as baseTest } from "../../../../test/useMSW.js";
+import { EFAudio } from "../../EFAudio";
+import { makeAudioInputTask } from "./makeAudioInputTask";
+
+@customElement("test-media-audio-input")
+class TestMediaAudioInput extends EFAudio {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-media-audio-input": TestMediaAudioInput;
+  }
+}
+
+const test = baseTest.extend<{
+  element: TestMediaAudioInput;
+}>({
+  element: async ({}, use) => {
+    const element = document.createElement("test-media-audio-input");
+    await use(element);
+    element.remove();
+  },
+});
+
+describe("makeAudioInputTask", () => {
+  beforeEach(() => {
+    // MSW setup is now handled by test fixtures
+  });
+
+  afterEach(() => {
+    const elements = document.querySelectorAll("test-media-audio-input");
+    for (const element of elements) {
+      element.remove();
+    }
+    vi.restoreAllMocks();
+  });
+
+  test("creates task with correct initial state", ({ element, expect }) => {
+    const task = makeAudioInputTask(element);
+
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+    expect(task.value).toBeUndefined();
+    expect(task.error).toBeUndefined();
+  });
+
+  test("task integrates with element properties", ({ element, expect }) => {
+    const task = makeAudioInputTask(element);
+
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+  });
+});

package/src/elements/EFMedia/audioTasks/makeAudioInputTask.ts

@@ -0,0 +1,35 @@
+import { Task } from "@lit/task";
+import { EFMedia } from "../../EFMedia";
+import { BufferedSeekingInput } from "../BufferedSeekingInput";
+import type { InputTask } from "../shared/MediaTaskUtils";
+
+export const makeAudioInputTask = (host: EFMedia): InputTask => {
+  return new Task<
+    readonly [ArrayBuffer | undefined, ArrayBuffer | undefined],
+    BufferedSeekingInput
+  >(host, {
+    args: () =>
+      [
+        host.audioInitSegmentFetchTask.value,
+        host.audioSegmentFetchTask.value,
+      ] as const,
+    onError: (error) => {
+      console.error("audioInputTask error", error);
+    },
+    onComplete: (_value) => {},
+    task: async () => {
+      const initSegment = await host.audioInitSegmentFetchTask.taskComplete;
+      const segment = await host.audioSegmentFetchTask.taskComplete;
+      if (!initSegment || !segment) {
+        throw new Error("Init segment or segment is not available");
+      }
+      return new BufferedSeekingInput(
+        await new Blob([initSegment, segment]).arrayBuffer(),
+        {
+          videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+          audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+        },
+      );
+    },
+  });
+};

package/src/elements/EFMedia/audioTasks/makeAudioSeekTask.ts

@@ -0,0 +1,42 @@
+import { Task } from "@lit/task";
+import type { VideoSample } from "mediabunny";
+import { type EFMedia, IgnorableError } from "../../EFMedia";
+import type { BufferedSeekingInput } from "../BufferedSeekingInput";
+
+type AudioSeekTask = Task<
+  readonly [number, BufferedSeekingInput | undefined],
+  VideoSample | undefined
+>;
+export const makeAudioSeekTask = (host: EFMedia): AudioSeekTask => {
+  return new Task(host, {
+    args: () => [host.desiredSeekTimeMs, host.audioInputTask.value] as const,
+    onError: (error) => {
+      if (error instanceof IgnorableError) {
+        console.info("audioSeekTask aborted");
+      }
+      console.error("audioSeekTask error", error);
+    },
+    onComplete: (_value) => {},
+    task: async (_): Promise<VideoSample | undefined> => {
+      await host.audioSegmentIdTask.taskComplete;
+      await host.audioSegmentFetchTask.taskComplete;
+      await host.audioInitSegmentFetchTask.taskComplete;
+
+      const audioInput = await host.audioInputTask.taskComplete;
+      if (!audioInput) {
+        throw new Error("Audio input is not available");
+      }
+      const audioTrack = await audioInput.getFirstAudioTrack();
+      if (!audioTrack) {
+        throw new Error("Audio track is not available");
+      }
+
+      const sample = (await audioInput.seek(
+        audioTrack.id,
+        host.desiredSeekTimeMs,
+      )) as unknown as VideoSample;
+
+      return sample;
+    },
+  });
+};

package/src/elements/EFMedia/audioTasks/makeAudioSegmentFetchTask.ts

@@ -0,0 +1,34 @@
+import { Task } from "@lit/task";
+import type { MediaEngine } from "../../../transcoding/types";
+import type { EFMedia } from "../../EFMedia";
+import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
+
+export const makeAudioSegmentFetchTask = (
+  host: EFMedia,
+): Task<
+  readonly [MediaEngine | undefined, number | undefined],
+  ArrayBuffer
+> => {
+  return new Task(host, {
+    args: () =>
+      [host.mediaEngineTask.value, host.audioSegmentIdTask.value] as const,
+    onError: (error) => {
+      console.error("audioSegmentFetchTask error", error);
+    },
+    onComplete: (_value) => {},
+    task: async (_, { signal }) => {
+      const mediaEngine = await getLatestMediaEngine(host, signal);
+      const segmentId = await host.audioSegmentIdTask.taskComplete;
+      if (segmentId === undefined) {
+        throw new Error("Segment ID is not available");
+      }
+
+      // SIMPLIFIED: Direct call to mediaEngine - deduplication is built-in
+      return mediaEngine.fetchMediaSegment(
+        segmentId,
+        mediaEngine.getAudioRendition(),
+        signal,
+      );
+    },
+  });
+};

package/src/elements/EFMedia/audioTasks/makeAudioSegmentIdTask.ts

@@ -0,0 +1,23 @@
+import { Task } from "@lit/task";
+import type { MediaEngine } from "../../../transcoding/types";
+import type { EFMedia } from "../../EFMedia";
+import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
+
+export const makeAudioSegmentIdTask = (
+  host: EFMedia,
+): Task<readonly [MediaEngine | undefined, number], number | undefined> => {
+  return new Task(host, {
+    args: () => [host.mediaEngineTask.value, host.desiredSeekTimeMs] as const,
+    onError: (error) => {
+      console.error("audioSegmentIdTask error", error);
+    },
+    onComplete: (_value) => {},
+    task: async (_, { signal }) => {
+      const mediaEngine = await getLatestMediaEngine(host, signal);
+      return mediaEngine.computeSegmentId(
+        host.desiredSeekTimeMs,
+        mediaEngine.getAudioRendition(),
+      );
+    },
+  });
+};

package/src/elements/EFMedia/audioTasks/makeAudioTimeDomainAnalysisTask.ts

@@ -0,0 +1,174 @@
+import { Task } from "@lit/task";
+
+import { EF_INTERACTIVE } from "../../../EF_INTERACTIVE.js";
+import { LRUCache } from "../../../utils/LRUCache.js";
+import type { EFMedia } from "../../EFMedia.js";
+
+// DECAY_WEIGHT constant - same as original
+const DECAY_WEIGHT = 0.8;
+
+export function makeAudioTimeDomainAnalysisTask(element: EFMedia) {
+  // Internal cache for this task instance (same as original #byteTimeDomainCache)
+  const cache = new LRUCache<string, Uint8Array>(1000);
+
+  return new Task(element, {
+    autoRun: EF_INTERACTIVE,
+    onError: (error) => {
+      console.error("byteTimeDomainTask error", error);
+    },
+    args: () =>
+      [
+        element.audioBufferTask.status,
+        element.currentSourceTimeMs,
+        element.fftSize,
+        element.fftDecay,
+        element.fftGain,
+        element.shouldInterpolateFrequencies,
+      ] as const,
+    task: async () => {
+      await element.audioBufferTask.taskComplete;
+      if (!element.audioBufferTask.value) return null;
+      if (element.currentSourceTimeMs < 0) return null;
+
+      const currentTimeMs = element.currentSourceTimeMs;
+
+      // ONLY CHANGE: Get real audio data for analysis (same technique as playback)
+      const analysisWindowMs = 5000; // Get 5 seconds for better analysis
+      const fromMs = Math.max(0, currentTimeMs);
+      const toMs = fromMs + analysisWindowMs;
+
+      const { fetchAudioSpanningTime: fetchAudioSpan } = await import(
+        "../shared/AudioSpanUtils.ts"
+      );
+      const audioSpan = await fetchAudioSpan(
+        element,
+        fromMs,
+        toMs,
+        new AbortController().signal,
+      );
+
+      if (!audioSpan || !audioSpan.blob) {
+        console.warn("Time domain analysis skipped: no audio data available");
+        return null;
+      }
+
+      // Decode the real audio data
+      const tempAudioContext = new OfflineAudioContext(2, 48000, 48000);
+      const arrayBuffer = await audioSpan.blob.arrayBuffer();
+      const audioBuffer = await tempAudioContext.decodeAudioData(arrayBuffer);
+
+      // Use actual startOffset from audioSpan (relative to requested time)
+      const startOffsetMs = audioSpan.startMs;
+
+      // ORIGINAL ALGORITHM FROM HERE - unchanged customer logic
+      const smoothedKey = `${element.shouldInterpolateFrequencies}:${element.fftSize}:${element.fftDecay}:${element.fftGain}:${startOffsetMs}:${currentTimeMs}`;
+      const cachedData = cache.get(smoothedKey);
+      if (cachedData) {
+        return cachedData;
+      }
+
+      // Process multiple frames with decay, similar to the reference code
+      const framesData = await Promise.all(
+        Array.from({ length: element.fftDecay }, async (_, frameIndex) => {
+          const frameOffset = frameIndex * (1000 / 30);
+          const startTime = Math.max(
+            0,
+            (currentTimeMs - frameOffset - startOffsetMs) / 1000,
+          );
+
+          const cacheKey = `${element.shouldInterpolateFrequencies}:${element.fftSize}:${element.fftGain}:${startOffsetMs}:${startTime}`;
+          const cachedFrame = cache.get(cacheKey);
+          if (cachedFrame) {
+            return cachedFrame;
+          }
+
+          let audioContext: OfflineAudioContext;
+          try {
+            audioContext = new OfflineAudioContext(2, 48000 * (1 / 30), 48000);
+          } catch (error) {
+            throw new Error(
+              `[EFMedia.byteTimeDomainTask] Failed to create OfflineAudioContext(2, ${48000 * (1 / 30)}, 48000) for frame ${frameIndex} at time ${startTime}s: ${error instanceof Error ? error.message : String(error)}. This is for audio time domain analysis.`,
+            );
+          }
+
+          const source = audioContext.createBufferSource();
+          source.buffer = audioBuffer;
+
+          // Create analyzer for PCM data
+          const analyser = audioContext.createAnalyser();
+          analyser.fftSize = element.fftSize; // Ensure enough samples
+          analyser.minDecibels = -90;
+          analyser.maxDecibels = -20;
+
+          const gainNode = audioContext.createGain();
+          gainNode.gain.value = element.fftGain; // Amplify the signal
+
+          source.connect(gainNode);
+          gainNode.connect(analyser);
+          analyser.connect(audioContext.destination);
+
+          source.start(0, startTime, 1 / 30);
+
+          const dataLength = analyser.fftSize / 2;
+          try {
+            await audioContext.startRendering();
+            const frameData = new Uint8Array(dataLength);
+            analyser.getByteTimeDomainData(frameData);
+
+            // const points = frameData;
+            // Calculate RMS and midpoint values
+            const points = new Uint8Array(dataLength);
+            for (let i = 0; i < dataLength; i++) {
+              const pointSamples = frameData.slice(
+                i * (frameData.length / dataLength),
+                (i + 1) * (frameData.length / dataLength),
+              );
+
+              // Calculate RMS while preserving sign
+              const rms = Math.sqrt(
+                pointSamples.reduce((sum, sample) => {
+                  const normalized = (sample - 128) / 128;
+                  return sum + normalized * normalized;
+                }, 0) / pointSamples.length,
+              );
+
+              // Get average sign of the samples to determine direction
+              const avgSign = Math.sign(
+                pointSamples.reduce((sum, sample) => sum + (sample - 128), 0),
+              );
+
+              // Convert RMS back to byte range, preserving direction
+              points[i] = Math.min(255, Math.round(128 + avgSign * rms * 128));
+            }
+
+            cache.set(cacheKey, points);
+            return points;
+          } finally {
+            source.disconnect();
+            analyser.disconnect();
+          }
+        }),
+      );
+
+      // Combine frames with decay weighting
+      const frameLength = framesData[0]?.length ?? 0;
+      const smoothedData = new Uint8Array(frameLength);
+
+      for (let i = 0; i < frameLength; i++) {
+        let weightedSum = 0;
+        let weightSum = 0;
+
+        framesData.forEach((frame: Uint8Array, frameIndex: number) => {
+          const decayWeight = DECAY_WEIGHT ** frameIndex;
+          weightedSum += (frame[i] ?? 0) * decayWeight;
+          weightSum += decayWeight;
+        });
+
+        smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
+      }
+
+      cache.set(smoothedKey, smoothedData);
+      return smoothedData;
+    },
+  });
+}