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

package/dist/elements/EFMedia.d.ts

@@ -68,6 +68,7 @@ export declare class EFMedia extends EFMedia_base {
     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

@@ -288,7 +288,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
             analyser.minDecibels = -90;
             analyser.maxDecibels = -20;
             const gainNode = audioContext.createGain();
-            gainNode.gain.value = 10;
+            gainNode.gain.value = 2;
             source.connect(gainNode);
             gainNode.connect(analyser);
             analyser.connect(audioContext.destination);
@@ -384,16 +384,16 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
             analyser.minDecibels = -90;
             analyser.maxDecibels = -10;
             const gainNode = audioContext.createGain();
-            gainNode.gain.value = 5;
+            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(gainNode);
-            gainNode.connect(filter);
-            filter.connect(analyser);
+            audioBufferSource.connect(filter);
+            filter.connect(gainNode);
+            gainNode.connect(analyser);
             analyser.connect(audioContext.destination);
             audioBufferSource.start(0, startTime, 1 / 30);
             try {
@@ -428,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;
       }
     });
   }
@@ -645,10 +646,14 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
     };
   }
   set fftSize(value) {
+    const oldValue = this.fftSize;
     this.setAttribute("fft-size", String(value));
+    this.requestUpdate("fft-size", oldValue);
   }
   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);
@@ -656,6 +661,12 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
   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;
   }
@@ -690,6 +701,46 @@ __decorateClass([
   state()
 ], _EFMedia.prototype, "desiredSeekTimeMs", 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

@@ -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";
+    mode: "roundBars" | "bars" | "bricks" | "line" | "curve" | "pixel" | "wave" | "spikes";
     color: string;
     target: string;
     targetElement: EFAudio | EFVideo | null;
@@ -30,6 +30,7 @@ export declare class EFWaveform extends EFWaveform_base {
     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, byteTimeData);
+            this.drawBars(ctx, frequencyData);
             break;
           case "bricks":
-            this.drawBricks(ctx, byteTimeData);
+            this.drawBricks(ctx, frequencyData);
             break;
           case "line":
             this.drawLine(ctx, byteTimeData);
@@ -72,13 +72,16 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
             this.drawCurve(ctx, byteTimeData);
             break;
           case "pixel":
-            this.drawPixel(ctx, byteTimeData);
+            this.drawPixel(ctx, frequencyData);
             break;
           case "wave":
-            this.drawWave(ctx, byteTimeData);
+            this.drawWave(ctx, frequencyData);
+            break;
+          case "spikes":
+            this.drawSpikes(ctx, frequencyData);
             break;
           case "roundBars":
-            this.drawRoundBars(ctx, byteTimeData);
+            this.drawRoundBars(ctx, frequencyData);
             break;
         }
         ctx.restore();
@@ -156,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.abs(value - 128) / 128;
+      const normalizedValue = value / 255;
       const barHeight = normalizedValue * waveHeight;
       const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
@@ -175,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.abs(value - 128) / 128;
+      const normalizedValue = value / 255;
       const brickCount = Math.floor(normalizedValue * maxBricks);
       for (let j = 0; j < brickCount; j++) {
         const x = columnWidth * i;
@@ -197,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.abs(value - 128) / 128;
+      const normalizedValue = value / 255;
       const height = normalizedValue * waveHeight;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
       const y = (waveHeight - height) / 2;
@@ -258,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.abs(value - 128) / 128;
+      const normalizedValue = value / 255;
       const x = i * (waveWidth / frequencyData.length);
       const barHeight = normalizedValue * (waveHeight / 2);
       const y = baseline - barHeight;
@@ -275,40 +278,99 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const startX = waveWidth * paddingOuter;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
-    const firstValue = ((frequencyData[0] ?? 128) - 128) / 128;
-    const firstY = waveHeight / 2 + firstValue * waveHeight / 2;
+    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 = (value - 128) / 128;
+      const normalizedValue = Math.min(value / 255 * 2, 1);
       const x = startX + i / (frequencyData.length - 1) * availableWidth;
-      const y = waveHeight / 2 - normalizedValue * waveHeight / 2;
+      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 = ((frequencyData[i - 1] ?? 128) - 128) / 128;
-        const prevY = waveHeight / 2 - prevValue * waveHeight / 2;
+        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 = ((frequencyData[i] ?? 128) - 128) / 128;
+      const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
       const x = startX + i / (frequencyData.length - 1) * availableWidth;
-      const y = waveHeight / 2 + normalizedValue * waveHeight / 2;
+      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;
+    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 / 2);
+      const y = (waveHeight - barHeight * 2) / 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 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 / 2);
+      const y = (waveHeight + barHeight * 2) / 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] ?? 128) - 128) / 128;
-        const nextY = waveHeight / 2 + nextValue * waveHeight / 2;
+        const nextValue = (frequencyData[i + 1] ?? 0) / 255;
+        const nextBarHeight = nextValue * (waveHeight / 2);
+        const nextY = (waveHeight + nextBarHeight * 2) / 2;
         const xc = (nextX + x) / 2;
         const yc = (nextY + y) / 2;
         path.quadraticCurveTo(nextX, nextY, xc, yc);
       }
     }
-    path.closePath();
+    const lastY = (waveHeight + firstValue * waveHeight) / 2;
+    const controlX = startX;
+    const controlY = (lastY + firstY) / 2;
+    path.quadraticCurveTo(controlX, controlY, startX, firstY);
     ctx.fill(path);
   }
   get durationMs() {

package/package.json

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

package/src/elements/EFMedia.ts

@@ -591,11 +591,15 @@ export class EFMedia extends EFTargetable(
   }
 
   set fftSize(value: number) {
+    const oldValue = this.fftSize;
     this.setAttribute("fft-size", String(value));
+    this.requestUpdate("fft-size", oldValue);
   }
 
   set fftDecay(value: number) {
+    const oldValue = this.fftDecay;
     this.setAttribute("fft-decay", String(value));
+    this.requestUpdate("fft-decay", oldValue);
   }
 
   get fftSize() {
@@ -606,6 +610,13 @@ export class EFMedia extends EFTargetable(
     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 DECAY_WEIGHT = 0.7;
 
   // Update FREQ_WEIGHTS to use the instance fftSize instead of a static value
@@ -683,7 +694,7 @@ export class EFMedia extends EFTargetable(
           analyser.maxDecibels = -20;
 
           const gainNode = audioContext.createGain();
-          gainNode.gain.value = 10.0; // Amplify the signal
+          gainNode.gain.value = 2.0; // Amplify the signal
 
           source.connect(gainNode);
           gainNode.connect(analyser);
@@ -806,10 +817,9 @@ export class EFMedia extends EFTargetable(
           analyser.fftSize = this.fftSize;
           analyser.minDecibels = -90;
           analyser.maxDecibels = -10;
-          // analyser.smoothingTimeConstant = 0.4;
 
           const gainNode = audioContext.createGain();
-          gainNode.gain.value = 5.0;
+          gainNode.gain.value = 3.0;
 
           const filter = audioContext.createBiquadFilter();
           filter.type = "bandpass";
@@ -819,9 +829,9 @@ export class EFMedia extends EFTargetable(
           const audioBufferSource = audioContext.createBufferSource();
           audioBufferSource.buffer = audioBuffer;
 
-          audioBufferSource.connect(gainNode);
-          gainNode.connect(filter);
-          filter.connect(analyser);
+          audioBufferSource.connect(filter);
+          filter.connect(gainNode);
+          gainNode.connect(analyser);
           analyser.connect(audioContext.destination);
 
           audioBufferSource.start(0, startTime, 1 / 30);
@@ -851,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;
         });
@@ -861,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));
       });
@@ -872,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;
+}