@editframe/elements 0.15.0-beta.13 → 0.15.0-beta.15

package/dist/elements/EFMedia.d.ts

@@ -64,10 +64,11 @@ export declare class EFMedia extends EFMedia_base {
         startMs: number;
         endMs: number;
     } | undefined>;
-    fftSize: number;
-    fftDecay: number;
-    private static readonly MIN_DB;
-    private static readonly MAX_DB;
+    set fftSize(value: number);
+    set fftDecay(value: number);
+    get fftSize(): number;
+    get fftDecay(): number;
+    get shouldInterpolateFrequencies(): boolean;
     private static readonly DECAY_WEIGHT;
     get FREQ_WEIGHTS(): Float32Array;
     byteTimeDomainTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number], Uint8Array | null>;

package/dist/elements/EFMedia.js

@@ -247,8 +247,6 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
         };
       }
     });
-    this.fftSize = 512;
-    this.fftDecay = 8;
     this.#byteTimeDomainCache = new LRUCache(100);
     this.byteTimeDomainTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
@@ -266,53 +264,61 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
         const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
         const audioBuffer = this.audioBufferTask.value.buffer;
         const smoothedKey = `${this.fftSize}:${this.fftDecay}:${startOffsetMs}:${currentTimeMs}`;
-        const cachedSmoothedData = this.#byteTimeDomainCache.get(smoothedKey);
-        if (cachedSmoothedData) {
-          return cachedSmoothedData;
-        }
+        const cachedData = this.#byteTimeDomainCache.get(smoothedKey);
+        if (cachedData) return cachedData;
         const framesData = await Promise.all(
-          Array.from({ length: this.fftDecay }, async (_, i) => {
-            const frameOffset = i * (1e3 / 30);
+          Array.from({ length: this.fftDecay }, async (_, frameIndex) => {
+            const frameOffset = frameIndex * (1e3 / 30);
             const startTime = Math.max(
               0,
               (currentTimeMs - frameOffset - startOffsetMs) / 1e3
             );
             const cacheKey = `${this.fftSize}:${startOffsetMs}:${startTime}`;
             const cachedFrame = this.#byteTimeDomainCache.get(cacheKey);
-            if (cachedFrame) {
-              return cachedFrame;
-            }
+            if (cachedFrame) return cachedFrame;
             const audioContext = new OfflineAudioContext(
               2,
               48e3 * (1 / 30),
               48e3
             );
+            const source = audioContext.createBufferSource();
+            source.buffer = audioBuffer;
             const analyser = audioContext.createAnalyser();
             analyser.fftSize = this.fftSize;
-            const gainNode = audioContext.createGain();
-            gainNode.gain.value = 10;
-            analyser.smoothingTimeConstant = 0.4;
             analyser.minDecibels = -90;
-            analyser.maxDecibels = -10;
-            const audioBufferSource = audioContext.createBufferSource();
-            audioBufferSource.buffer = audioBuffer;
-            const filter = audioContext.createBiquadFilter();
-            filter.type = "bandpass";
-            filter.frequency.value = 1e3;
-            filter.Q.value = 0.5;
-            audioBufferSource.connect(gainNode);
-            gainNode.connect(filter);
-            filter.connect(analyser);
+            analyser.maxDecibels = -20;
+            const gainNode = audioContext.createGain();
+            gainNode.gain.value = 2;
+            source.connect(gainNode);
+            gainNode.connect(analyser);
             analyser.connect(audioContext.destination);
-            audioBufferSource.start(0, startTime, 1 / 30);
+            source.start(0, startTime, 1 / 30);
+            const dataLength = analyser.fftSize / 2;
             try {
               await audioContext.startRendering();
-              const frameData = new Uint8Array(analyser.fftSize);
+              const frameData = new Uint8Array(dataLength);
               analyser.getByteTimeDomainData(frameData);
-              this.#byteTimeDomainCache.set(cacheKey, frameData);
-              return frameData;
+              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)
+                );
+                const rms = Math.sqrt(
+                  pointSamples.reduce((sum, sample) => {
+                    const normalized = (sample - 128) / 128;
+                    return sum + normalized * normalized;
+                  }, 0) / pointSamples.length
+                );
+                const avgSign = Math.sign(
+                  pointSamples.reduce((sum, sample) => sum + (sample - 128), 0)
+                );
+                points[i] = Math.min(255, Math.round(128 + avgSign * rms * 128));
+              }
+              this.#byteTimeDomainCache.set(cacheKey, points);
+              return points;
             } finally {
-              audioBufferSource.disconnect();
+              source.disconnect();
               analyser.disconnect();
             }
           })
@@ -324,15 +330,12 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
           let weightSum = 0;
           framesData.forEach((frame, frameIndex) => {
             const decayWeight = _EFMedia2.DECAY_WEIGHT ** frameIndex;
-            weightedSum += frame[i] * decayWeight;
+            weightedSum += (frame[i] ?? 0) * decayWeight;
             weightSum += decayWeight;
           });
           smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
         }
-        this.#byteTimeDomainCache.set(
-          smoothedKey,
-          smoothedData.slice(0, Math.floor(smoothedData.length * 0.8))
-        );
+        this.#byteTimeDomainCache.set(smoothedKey, smoothedData);
         return smoothedData;
       }
     });
@@ -378,11 +381,19 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
             );
             const analyser = audioContext.createAnalyser();
             analyser.fftSize = this.fftSize;
-            analyser.minDecibels = _EFMedia2.MIN_DB;
-            analyser.maxDecibels = _EFMedia2.MAX_DB;
+            analyser.minDecibels = -90;
+            analyser.maxDecibels = -10;
+            const gainNode = audioContext.createGain();
+            gainNode.gain.value = 3;
+            const filter = audioContext.createBiquadFilter();
+            filter.type = "bandpass";
+            filter.frequency.value = 15e3;
+            filter.Q.value = 0.05;
             const audioBufferSource = audioContext.createBufferSource();
             audioBufferSource.buffer = audioBuffer;
-            audioBufferSource.connect(analyser);
+            audioBufferSource.connect(filter);
+            filter.connect(gainNode);
+            gainNode.connect(analyser);
             analyser.connect(audioContext.destination);
             audioBufferSource.start(0, startTime, 1 / 30);
             try {
@@ -417,8 +428,9 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
           0,
           Math.floor(smoothedData.length / 2)
         );
-        this.#frequencyDataCache.set(smoothedKey, slicedData);
-        return slicedData;
+        const processedData = this.shouldInterpolateFrequencies ? processFFTData(slicedData) : slicedData;
+        this.#frequencyDataCache.set(smoothedKey, processedData);
+        return processedData;
       }
     });
   }
@@ -633,11 +645,27 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
       endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3 - this.trimEndMs
     };
   }
-  static {
-    this.MIN_DB = -90;
+  set fftSize(value) {
+    const oldValue = this.fftSize;
+    this.setAttribute("fft-size", String(value));
+    this.requestUpdate("fft-size", oldValue);
   }
-  static {
-    this.MAX_DB = -20;
+  set fftDecay(value) {
+    const oldValue = this.fftDecay;
+    this.setAttribute("fft-decay", String(value));
+    this.requestUpdate("fft-decay", oldValue);
+  }
+  get fftSize() {
+    return Number.parseInt(this.getAttribute("fft-size") ?? "128", 10);
+  }
+  get fftDecay() {
+    return Number.parseInt(this.getAttribute("fft-decay") ?? "8", 10);
+  }
+  get shouldInterpolateFrequencies() {
+    if (this.hasAttribute("interpolate-frequencies")) {
+      return this.getAttribute("interpolate-frequencies") !== "false";
+    }
+    return false;
   }
   static {
     this.DECAY_WEIGHT = 0.7;
@@ -672,13 +700,47 @@ __decorateClass([
 __decorateClass([
   state()
 ], _EFMedia.prototype, "desiredSeekTimeMs", 2);
-__decorateClass([
-  property({ type: Number })
-], _EFMedia.prototype, "fftSize", 2);
-__decorateClass([
-  property({ type: Number })
-], _EFMedia.prototype, "fftDecay", 2);
 let EFMedia = _EFMedia;
+function processFFTData(fftData, zeroThresholdPercent = 0.1) {
+  const totalBins = fftData.length;
+  const zeroThresholdCount = Math.floor(totalBins * zeroThresholdPercent);
+  let zeroCount = 0;
+  let cutoffIndex = totalBins;
+  for (let i = totalBins - 1; i >= 0; i--) {
+    if (fftData[i] < 10) {
+      zeroCount++;
+    } else {
+      if (zeroCount >= zeroThresholdCount) {
+        cutoffIndex = i + 1;
+        break;
+      }
+    }
+  }
+  if (cutoffIndex < zeroThresholdCount) {
+    return fftData;
+  }
+  const goodData = fftData.slice(0, cutoffIndex);
+  const resampledData = interpolateData(goodData, fftData.length);
+  return resampledData;
+}
+function interpolateData(data, targetSize) {
+  const resampled = new Uint8Array(targetSize);
+  const dataLength = data.length;
+  for (let i = 0; i < targetSize; i++) {
+    const ratio = i / (targetSize - 1) * (dataLength - 1);
+    const index = Math.floor(ratio);
+    const fraction = ratio - index;
+    if (index >= dataLength - 1) {
+      resampled[i] = data[dataLength - 1];
+    } else {
+      resampled[i] = Math.round(
+        // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
+        data[index] * (1 - fraction) + data[index + 1] * fraction
+      );
+    }
+  }
+  return resampled;
+}
 export {
   EFMedia,
   deepGetMediaElements

package/dist/elements/EFWaveform.d.ts

@@ -26,7 +26,6 @@ export declare class EFWaveform extends EFWaveform_base {
     protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawBricks(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawRoundBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawEqualizer(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawCurve(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawPixel(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;

package/dist/elements/EFWaveform.js

@@ -159,7 +159,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const normalizedValue = value / 255;
       const barHeight = normalizedValue * waveHeight;
       const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
@@ -178,7 +178,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const verticalGap = boxSize * 0.2;
     const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap));
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const normalizedValue = value / 255;
       const brickCount = Math.floor(normalizedValue * maxBricks);
       for (let j = 0; j < brickCount; j++) {
         const x = columnWidth * i;
@@ -200,7 +200,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const normalizedValue = value / 255;
       const height = normalizedValue * waveHeight;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
       const y = (waveHeight - height) / 2;
@@ -208,34 +208,13 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
     ctx.fill(path);
   }
-  drawEqualizer(ctx, frequencyData) {
-    const canvas = ctx.canvas;
-    const waveWidth = canvas.width;
-    const waveHeight = canvas.height;
-    const baseline = waveHeight / 2;
-    const barWidth = waveWidth / frequencyData.length * 0.8;
-    ctx.clearRect(0, 0, waveWidth, waveHeight);
-    const baselinePath = new Path2D();
-    const barsPath = new Path2D();
-    baselinePath.moveTo(0, baseline);
-    baselinePath.lineTo(waveWidth, baseline);
-    frequencyData.forEach((value, i) => {
-      const height = value / 255 * (waveHeight / 2);
-      const x = i * (waveWidth / frequencyData.length);
-      const y = baseline - height;
-      barsPath.rect(x, y, barWidth, Math.max(height * 2, 1));
-    });
-    ctx.lineWidth = 2;
-    ctx.stroke(baselinePath);
-    ctx.fill(barsPath);
-  }
   drawLine(ctx, frequencyData) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
-    const sampleRate = 4;
+    const sampleRate = 1;
     for (let i = 0; i < frequencyData.length; i += sampleRate) {
       const x = i / frequencyData.length * waveWidth;
       const y = (1 - (frequencyData[i] ?? 0) / 255) * waveHeight;
@@ -282,7 +261,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const normalizedValue = value / 255;
       const x = i * (waveWidth / frequencyData.length);
       const barHeight = normalizedValue * (waveHeight / 2);
       const y = baseline - barHeight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.15.0-beta.13",
+  "version": "0.15.0-beta.15",
   "description": "",
   "exports": {
     ".": {
@@ -27,7 +27,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.15.0-beta.13",
+    "@editframe/assets": "0.15.0-beta.15",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFMedia.ts

@@ -590,14 +590,33 @@ export class EFMedia extends EFTargetable(
     };
   }
 
-  @property({ type: Number })
-  fftSize = 512; // Default FFT size
+  set fftSize(value: number) {
+    const oldValue = this.fftSize;
+    this.setAttribute("fft-size", String(value));
+    this.requestUpdate("fft-size", oldValue);
+  }
 
-  @property({ type: Number })
-  fftDecay = 8; // Default number of frames to analyze
+  set fftDecay(value: number) {
+    const oldValue = this.fftDecay;
+    this.setAttribute("fft-decay", String(value));
+    this.requestUpdate("fft-decay", oldValue);
+  }
+
+  get fftSize() {
+    return Number.parseInt(this.getAttribute("fft-size") ?? "128", 10);
+  }
+
+  get fftDecay() {
+    return Number.parseInt(this.getAttribute("fft-decay") ?? "8", 10);
+  }
+
+  get shouldInterpolateFrequencies() {
+    if (this.hasAttribute("interpolate-frequencies")) {
+      return this.getAttribute("interpolate-frequencies") !== "false";
+    }
+    return false;
+  }
 
-  private static readonly MIN_DB = -90;
-  private static readonly MAX_DB = -20;
   private static readonly DECAY_WEIGHT = 0.7;
 
   // Update FREQ_WEIGHTS to use the instance fftSize instead of a static value
@@ -641,16 +660,15 @@ export class EFMedia extends EFTargetable(
       const currentTimeMs = this.currentSourceTimeMs;
       const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
       const audioBuffer = this.audioBufferTask.value.buffer;
-      const smoothedKey = `${this.fftSize}:${this.fftDecay}:${startOffsetMs}:${currentTimeMs}`;
 
-      const cachedSmoothedData = this.#byteTimeDomainCache.get(smoothedKey);
-      if (cachedSmoothedData) {
-        return cachedSmoothedData;
-      }
+      const smoothedKey = `${this.fftSize}:${this.fftDecay}:${startOffsetMs}:${currentTimeMs}`;
+      const cachedData = this.#byteTimeDomainCache.get(smoothedKey);
+      if (cachedData) return cachedData;
 
+      // Process multiple frames with decay, similar to the reference code
       const framesData = await Promise.all(
-        Array.from({ length: this.fftDecay }, async (_, i) => {
-          const frameOffset = i * (1000 / 30);
+        Array.from({ length: this.fftDecay }, async (_, frameIndex) => {
+          const frameOffset = frameIndex * (1000 / 30);
           const startTime = Math.max(
             0,
             (currentTimeMs - frameOffset - startOffsetMs) / 1000,
@@ -658,83 +676,91 @@ export class EFMedia extends EFTargetable(
 
           const cacheKey = `${this.fftSize}:${startOffsetMs}:${startTime}`;
           const cachedFrame = this.#byteTimeDomainCache.get(cacheKey);
-          if (cachedFrame) {
-            return cachedFrame;
-          }
+          if (cachedFrame) return cachedFrame;
 
           const audioContext = new OfflineAudioContext(
             2,
             48000 * (1 / 30),
             48000,
           );
-          const analyser = audioContext.createAnalyser();
-          analyser.fftSize = this.fftSize;
 
-          // Increase gain even more for better signal
-          const gainNode = audioContext.createGain();
-          gainNode.gain.value = 10.0; // Try a higher gain
+          const source = audioContext.createBufferSource();
+          source.buffer = audioBuffer;
 
-          // More aggressive settings for the analyzer
-          analyser.smoothingTimeConstant = 0.4;
+          // Create analyzer for PCM data
+          const analyser = audioContext.createAnalyser();
+          analyser.fftSize = this.fftSize; // Ensure enough samples
           analyser.minDecibels = -90;
-          analyser.maxDecibels = -10;
+          analyser.maxDecibels = -20;
 
-          const audioBufferSource = audioContext.createBufferSource();
-          audioBufferSource.buffer = audioBuffer;
-
-          // Add a bandpass filter to focus on the most active frequency ranges
-          const filter = audioContext.createBiquadFilter();
-          filter.type = "bandpass";
-          filter.frequency.value = 1000; // Center frequency in Hz
-          filter.Q.value = 0.5; // Width of the band
+          const gainNode = audioContext.createGain();
+          gainNode.gain.value = 2.0; // Amplify the signal
 
-          audioBufferSource.connect(gainNode);
-          gainNode.connect(filter);
-          filter.connect(analyser);
+          source.connect(gainNode);
+          gainNode.connect(analyser);
           analyser.connect(audioContext.destination);
 
-          audioBufferSource.start(0, startTime, 1 / 30);
+          source.start(0, startTime, 1 / 30);
 
+          const dataLength = analyser.fftSize / 2;
           try {
             await audioContext.startRendering();
-            // Change to time domain data
-            const frameData = new Uint8Array(analyser.fftSize);
+            const frameData = new Uint8Array(dataLength);
             analyser.getByteTimeDomainData(frameData);
 
-            this.#byteTimeDomainCache.set(cacheKey, frameData);
-            return 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));
+            }
+
+            this.#byteTimeDomainCache.set(cacheKey, points);
+            return points;
           } finally {
-            audioBufferSource.disconnect();
+            source.disconnect();
             analyser.disconnect();
           }
         }),
       );
 
+      // Combine frames with decay weighting
       const frameLength = framesData[0]?.length ?? 0;
       const smoothedData = new Uint8Array(frameLength);
 
-      // Combine frames with decay
       for (let i = 0; i < frameLength; i++) {
         let weightedSum = 0;
         let weightSum = 0;
 
         framesData.forEach((frame, frameIndex) => {
           const decayWeight = EFMedia.DECAY_WEIGHT ** frameIndex;
-          // biome-ignore lint/style/noNonNullAssertion: Will exist due to forEach
-          weightedSum += frame[i]! * decayWeight;
+          weightedSum += (frame[i] ?? 0) * decayWeight;
           weightSum += decayWeight;
         });
 
         smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
       }
 
-      // Remove frequency weighting since we're using time domain data
-      // No need to slice the data either since we want the full waveform
-
-      this.#byteTimeDomainCache.set(
-        smoothedKey,
-        smoothedData.slice(0, Math.floor(smoothedData.length * 0.8)),
-      );
+      this.#byteTimeDomainCache.set(smoothedKey, smoothedData);
       return smoothedData;
     },
   });
@@ -789,13 +815,23 @@ export class EFMedia extends EFTargetable(
           );
           const analyser = audioContext.createAnalyser();
           analyser.fftSize = this.fftSize;
-          analyser.minDecibels = EFMedia.MIN_DB;
-          analyser.maxDecibels = EFMedia.MAX_DB;
+          analyser.minDecibels = -90;
+          analyser.maxDecibels = -10;
+
+          const gainNode = audioContext.createGain();
+          gainNode.gain.value = 3.0;
+
+          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(analyser);
+          audioBufferSource.connect(filter);
+          filter.connect(gainNode);
+          gainNode.connect(analyser);
           analyser.connect(audioContext.destination);
 
           audioBufferSource.start(0, startTime, 1 / 30);
@@ -825,7 +861,7 @@ export class EFMedia extends EFTargetable(
 
         framesData.forEach((frame, frameIndex) => {
           const decayWeight = EFMedia.DECAY_WEIGHT ** frameIndex;
-          // biome-ignore lint/style/noNonNullAssertion: Will exist due to forEach
+          // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
           weightedSum += frame[i]! * decayWeight;
           weightSum += decayWeight;
         });
@@ -835,7 +871,7 @@ export class EFMedia extends EFTargetable(
 
       // Apply frequency weights using instance FREQ_WEIGHTS
       smoothedData.forEach((value, i) => {
-        // biome-ignore lint/style/noNonNullAssertion: Will exist due to forEach
+        // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
         const freqWeight = this.FREQ_WEIGHTS[i]!;
         smoothedData[i] = Math.min(255, Math.round(value * freqWeight));
       });
@@ -846,8 +882,70 @@ export class EFMedia extends EFTargetable(
         0,
         Math.floor(smoothedData.length / 2),
       );
-      this.#frequencyDataCache.set(smoothedKey, slicedData);
-      return slicedData;
+      const processedData = this.shouldInterpolateFrequencies
+        ? processFFTData(slicedData)
+        : slicedData;
+      this.#frequencyDataCache.set(smoothedKey, processedData);
+      return processedData;
     },
   });
 }
+
+function processFFTData(fftData: Uint8Array, zeroThresholdPercent = 0.1) {
+  // 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--) {
+    // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
+    if (fftData[i]! < 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);
+
+  return resampledData;
+}
+
+function interpolateData(data: Uint8Array, targetSize: number) {
+  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) {
+      // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
+      resampled[i] = data[dataLength - 1]!; // Last value
+    } else {
+      // Linear interpolation
+      resampled[i] = Math.round(
+        // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
+        data[index]! * (1 - fraction) + data[index + 1]! * fraction,
+      );
+    }
+  }
+
+  return resampled;
+}