@editframe/elements 0.15.0-beta.12 → 0.15.0-beta.14

package/dist/elements/EFMedia.d.ts

@@ -64,10 +64,10 @@ 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;
     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;
+            analyser.minDecibels = -90;
+            analyser.maxDecibels = -20;
             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);
+            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 = 5;
+            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(gainNode);
+            gainNode.connect(filter);
+            filter.connect(analyser);
             analyser.connect(audioContext.destination);
             audioBufferSource.start(0, startTime, 1 / 30);
             try {
@@ -633,11 +644,17 @@ 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) {
+    this.setAttribute("fft-size", String(value));
   }
-  static {
-    this.MAX_DB = -20;
+  set fftDecay(value) {
+    this.setAttribute("fft-decay", String(value));
+  }
+  get fftSize() {
+    return Number.parseInt(this.getAttribute("fft-size") ?? "128", 10);
+  }
+  get fftDecay() {
+    return Number.parseInt(this.getAttribute("fft-decay") ?? "8", 10);
   }
   static {
     this.DECAY_WEIGHT = 0.7;
@@ -672,12 +689,6 @@ __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;
 export {
   EFMedia,

package/dist/elements/EFWaveform.d.ts

@@ -13,7 +13,7 @@ export declare class EFWaveform extends EFWaveform_base {
     private resizeObserver?;
     private mutationObserver?;
     render(): import('lit-html').TemplateResult<1>;
-    mode: "roundBars" | "bars" | "bricks" | "line" | "curve" | "pixel" | "wave" | "spikes";
+    mode: "roundBars" | "bars" | "bricks" | "line" | "curve" | "pixel" | "wave";
     color: string;
     target: string;
     targetElement: EFAudio | EFVideo | null;
@@ -26,12 +26,10 @@ 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;
     protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawSpikes(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     frameTask: Task<readonly [EFAudio | EFVideo | null, Uint8Array | null | undefined], void>;
     get durationMs(): number;
     protected updated(changedProperties: PropertyValueMap<this>): void;

package/dist/elements/EFWaveform.js

@@ -60,10 +60,10 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
         }
         switch (this.mode) {
           case "bars":
-            this.drawBars(ctx, frequencyData);
+            this.drawBars(ctx, byteTimeData);
             break;
           case "bricks":
-            this.drawBricks(ctx, frequencyData);
+            this.drawBricks(ctx, byteTimeData);
             break;
           case "line":
             this.drawLine(ctx, byteTimeData);
@@ -72,16 +72,13 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
             this.drawCurve(ctx, byteTimeData);
             break;
           case "pixel":
-            this.drawPixel(ctx, frequencyData);
+            this.drawPixel(ctx, byteTimeData);
             break;
           case "wave":
-            this.drawWave(ctx, frequencyData);
-            break;
-          case "spikes":
-            this.drawSpikes(ctx, frequencyData);
+            this.drawWave(ctx, byteTimeData);
             break;
           case "roundBars":
-            this.drawRoundBars(ctx, frequencyData);
+            this.drawRoundBars(ctx, byteTimeData);
             break;
         }
         ctx.restore();
@@ -159,7 +156,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 = Math.abs(value - 128) / 128;
       const barHeight = normalizedValue * waveHeight;
       const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
@@ -178,7 +175,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 = Math.abs(value - 128) / 128;
       const brickCount = Math.floor(normalizedValue * maxBricks);
       for (let j = 0; j < brickCount; j++) {
         const x = columnWidth * i;
@@ -200,7 +197,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 = Math.abs(value - 128) / 128;
       const height = normalizedValue * waveHeight;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
       const y = (waveHeight - height) / 2;
@@ -208,34 +205,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 +258,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 = Math.abs(value - 128) / 128;
       const x = i * (waveWidth / frequencyData.length);
       const barHeight = normalizedValue * (waveHeight / 2);
       const y = baseline - barHeight;
@@ -299,99 +275,40 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const startX = waveWidth * paddingOuter;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
-    const firstValue = Math.min((frequencyData[0] ?? 0) / 255 * 2, 1);
-    const firstY = (waveHeight - firstValue * waveHeight) / 2;
-    path.moveTo(startX, firstY);
-    frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min(value / 255 * 2, 1);
-      const x = startX + i / (frequencyData.length - 1) * availableWidth;
-      const barHeight = normalizedValue * waveHeight;
-      const y = (waveHeight - barHeight) / 2;
-      if (i === 0) {
-        path.moveTo(x, y);
-      } else {
-        const prevX = startX + (i - 1) / (frequencyData.length - 1) * availableWidth;
-        const prevValue = Math.min((frequencyData[i - 1] ?? 0) / 255 * 2, 1);
-        const prevBarHeight = prevValue * waveHeight;
-        const prevY = (waveHeight - prevBarHeight) / 2;
-        const xc = (prevX + x) / 2;
-        const yc = (prevY + y) / 2;
-        path.quadraticCurveTo(prevX, prevY, xc, yc);
-      }
-    });
-    for (let i = frequencyData.length - 1; i >= 0; i--) {
-      const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
-      const x = startX + i / (frequencyData.length - 1) * availableWidth;
-      const barHeight = normalizedValue * waveHeight;
-      const y = (waveHeight + barHeight) / 2;
-      if (i === frequencyData.length - 1) {
-        path.lineTo(x, y);
-      } else {
-        const nextX = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
-        const nextValue = Math.min((frequencyData[i + 1] ?? 0) / 255 * 2, 1);
-        const nextBarHeight = nextValue * waveHeight;
-        const nextY = (waveHeight + nextBarHeight) / 2;
-        const xc = (nextX + x) / 2;
-        const yc = (nextY + y) / 2;
-        path.quadraticCurveTo(nextX, nextY, xc, yc);
-      }
-    }
-    const lastY = (waveHeight + firstValue * waveHeight) / 2;
-    const controlX = startX;
-    const controlY = (lastY + firstY) / 2;
-    path.quadraticCurveTo(controlX, controlY, startX, firstY);
-    ctx.fill(path);
-  }
-  drawSpikes(ctx, frequencyData) {
-    const canvas = ctx.canvas;
-    const waveWidth = canvas.width;
-    const waveHeight = canvas.height;
-    const paddingOuter = 0.01;
-    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
-    const startX = waveWidth * paddingOuter;
-    ctx.clearRect(0, 0, waveWidth, waveHeight);
-    const path = new Path2D();
-    const firstValue = (frequencyData[0] ?? 0) / 255;
-    const firstY = (waveHeight - firstValue * waveHeight) / 2;
+    const firstValue = ((frequencyData[0] ?? 128) - 128) / 128;
+    const firstY = waveHeight / 2 + firstValue * waveHeight / 2;
     path.moveTo(startX, firstY);
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const normalizedValue = (value - 128) / 128;
       const x = startX + i / (frequencyData.length - 1) * availableWidth;
-      const barHeight = normalizedValue * (waveHeight / 2);
-      const y = (waveHeight - barHeight * 2) / 2;
+      const y = waveHeight / 2 - normalizedValue * waveHeight / 2;
       if (i === 0) {
         path.moveTo(x, y);
       } else {
         const prevX = startX + (i - 1) / (frequencyData.length - 1) * availableWidth;
-        const prevValue = (frequencyData[i - 1] ?? 0) / 255;
-        const prevBarHeight = prevValue * (waveHeight / 2);
-        const prevY = (waveHeight - prevBarHeight * 2) / 2;
+        const prevValue = ((frequencyData[i - 1] ?? 128) - 128) / 128;
+        const prevY = waveHeight / 2 - prevValue * waveHeight / 2;
         const xc = (prevX + x) / 2;
         const yc = (prevY + y) / 2;
         path.quadraticCurveTo(prevX, prevY, xc, yc);
       }
     });
     for (let i = frequencyData.length - 1; i >= 0; i--) {
-      const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
+      const normalizedValue = ((frequencyData[i] ?? 128) - 128) / 128;
       const x = startX + i / (frequencyData.length - 1) * availableWidth;
-      const barHeight = normalizedValue * (waveHeight / 2);
-      const y = (waveHeight + barHeight * 2) / 2;
+      const y = waveHeight / 2 + normalizedValue * waveHeight / 2;
       if (i === frequencyData.length - 1) {
         path.lineTo(x, y);
       } else {
         const nextX = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
-        const nextValue = (frequencyData[i + 1] ?? 0) / 255;
-        const nextBarHeight = nextValue * (waveHeight / 2);
-        const nextY = (waveHeight + nextBarHeight * 2) / 2;
+        const nextValue = ((frequencyData[i + 1] ?? 128) - 128) / 128;
+        const nextY = waveHeight / 2 + nextValue * waveHeight / 2;
         const xc = (nextX + x) / 2;
         const yc = (nextY + y) / 2;
         path.quadraticCurveTo(nextX, nextY, xc, yc);
       }
     }
-    const lastY = (waveHeight + firstValue * waveHeight) / 2;
-    const controlX = startX;
-    const controlY = (lastY + firstY) / 2;
-    path.quadraticCurveTo(controlX, controlY, startX, firstY);
+    path.closePath();
     ctx.fill(path);
   }
   get durationMs() {

package/dist/gui/TWMixin.js

@@ -20,10 +20,14 @@ function TWMixin(Base) {
       }
       const constructorStylesheets = [];
       const constructorStyles = "styles" in this.constructor && this.constructor.styles || [];
-      for (const item of constructorStyles) {
-        if (item.styleSheet) {
-          constructorStylesheets.push(item.styleSheet);
+      if (Array.isArray(constructorStyles)) {
+        for (const item of constructorStyles) {
+          if (item.styleSheet) {
+            constructorStylesheets.push(item.styleSheet);
+          }
         }
+      } else if (constructorStyles.styleSheet) {
+        constructorStylesheets.push(constructorStyles.styleSheet);
       }
       if (renderRoot?.adoptedStyleSheets) {
         renderRoot.adoptedStyleSheets = [

package/package.json

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

package/src/elements/EFMedia.ts

@@ -590,14 +590,22 @@ export class EFMedia extends EFTargetable(
     };
   }
 
-  @property({ type: Number })
-  fftSize = 512; // Default FFT size
+  set fftSize(value: number) {
+    this.setAttribute("fft-size", String(value));
+  }
 
-  @property({ type: Number })
-  fftDecay = 8; // Default number of frames to analyze
+  set fftDecay(value: number) {
+    this.setAttribute("fft-decay", String(value));
+  }
+
+  get fftSize() {
+    return Number.parseInt(this.getAttribute("fft-size") ?? "128", 10);
+  }
+
+  get fftDecay() {
+    return Number.parseInt(this.getAttribute("fft-decay") ?? "8", 10);
+  }
 
-  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 +649,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 +665,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;
-
-          const audioBufferSource = audioContext.createBufferSource();
-          audioBufferSource.buffer = audioBuffer;
+          analyser.maxDecibels = -20;
 
-          // 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 = 10.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 +804,24 @@ 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;
+          // analyser.smoothingTimeConstant = 0.4;
+
+          const gainNode = audioContext.createGain();
+          gainNode.gain.value = 5.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(gainNode);
+          gainNode.connect(filter);
+          filter.connect(analyser);
           analyser.connect(audioContext.destination);
 
           audioBufferSource.start(0, startTime, 1 / 30);