@editframe/elements 0.11.0-beta.8 → 0.12.0-beta.1

package/src/elements/EFWaveform.ts

@@ -1,25 +1,35 @@
 import { EFAudio } from "./EFAudio.ts";
 
-import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { EFVideo } from "./EFVideo.ts";
-import { EFTemporal } from "./EFTemporal.ts";
-import { CrossUpdateController } from "./CrossUpdateController.ts";
-import { TWMixin } from "../gui/TWMixin.ts";
 import { Task } from "@lit/task";
-import * as d3 from "d3";
+import { LitElement, type PropertyValueMap, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { type Ref, createRef, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { TWMixin } from "../gui/TWMixin.ts";
+import { CrossUpdateController } from "./CrossUpdateController.ts";
+import { EFTemporal } from "./EFTemporal.ts";
+import { EFVideo } from "./EFVideo.ts";
 
 @customElement("ef-waveform")
 export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
-  static styles = [];
-  svgRef: Ref<SVGElement> = createRef();
+  static styles = [
+    css`
+      :host {
+        display: block;
+        all: inherit;
+      }
+    `,
+  ];
+
+  canvasRef: Ref<HTMLCanvasElement> = createRef();
+  private ctx: CanvasRenderingContext2D | null = null;
+
   createRenderRoot() {
     return this;
   }
+
   render() {
-    return html` <svg ${ref(this.svgRef)} class="h-full w-full" store></svg> `;
+    return html`<canvas ${ref(this.canvasRef)}></canvas>`;
   }
 
   @property({
@@ -53,358 +63,368 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     }
   }
 
-  protected drawBars(svg: SVGElement, frequencyData: Uint8Array) {
-    const waveWidth = svg.clientWidth * devicePixelRatio;
-    const waveHeight = svg.clientHeight;
-    const waveLeft = 0;
-    const waveRight = waveWidth;
+  protected initCanvas() {
+    console.count("initCanvas");
+    const canvas = this.canvasRef.value;
+    if (!canvas) return null;
 
-    const barX = d3
-      .scaleBand()
-      .paddingInner(0.5)
-      .paddingOuter(0.01)
-      .domain(d3.range(frequencyData.length).map((n) => String(n)))
-      .rangeRound([waveLeft, waveRight]);
+    const rect = this.getBoundingClientRect();
+    const dpr = window.devicePixelRatio;
 
-    const height = d3
-      .scaleLinear()
-      .domain([0, 255])
-      .range([0, waveHeight / 2]);
+    canvas.style.width = `${rect.width}px`;
+    canvas.style.height = `${rect.height}px`;
 
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+
+    // Scale all drawing operations by dpr
+    ctx.scale(dpr, dpr);
+
+    return ctx;
+  }
+
+  protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    const barWidth = (waveWidth / frequencyData.length) * 0.8; // 0.8 for padding
     const baseline = waveHeight / 2;
 
-    const bars = d3.select(svg).selectAll("rect").data(frequencyData);
-    const minBarHeight = 2;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
 
-    bars
-      .enter()
-      .append("rect")
-      // @ts-ignore Not sure why this doesn't pass typechecks.
-      .merge(bars)
-      .attr("x", (_, i) => barX(String(i)) || 0)
-      .attr("y", (value) => baseline - height(value))
-      .attr("width", barX.bandwidth() / 1.2)
-      .attr("height", (value) => Math.max(height(value) * 2, minBarHeight));
+    frequencyData.forEach((value, i) => {
+      const height = (value / 255) * (waveHeight / 2);
+      const x = i * (waveWidth / frequencyData.length);
+      const y = baseline - height;
 
-    bars.exit().remove();
+      ctx.fillRect(x, y, barWidth, Math.max(height * 2, 2));
+    });
   }
 
-  protected drawBricks(svg: SVGElement, frequencyData: Uint8Array) {
-    const waveWidth = svg.clientWidth * devicePixelRatio;
-    const waveHeight = svg.clientHeight * devicePixelRatio;
+  protected drawBricks(
+    ctx: CanvasRenderingContext2D,
+    frequencyData: Uint8Array,
+  ) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
     const brickWidth = waveWidth / frequencyData.length;
     const brickHeightFactor = waveHeight / 255 / 2;
     const brickPadding = 2;
     const midHeight = waveHeight / 2;
 
-    d3.select(svg)
-      .selectAll("line.brickBaseLine")
-      .data([0])
-      .join("line")
-      .attr("class", "brickBaseLine")
-      .attr("x1", 0)
-      .attr("x2", waveWidth)
-      .attr("y1", midHeight)
-      .attr("y2", midHeight)
-      .attr("stroke", "currentColor")
-      .attr("stroke-width", 4)
-      .attr("stroke-dasharray", "2");
-
-    d3.select(svg)
-      .selectAll("rect.brick")
-      .data(frequencyData)
-      .join("rect")
-      .attr("class", "brick")
-      .attr("x", (_d, i) => i * brickWidth)
-      .attr("y", (d) => midHeight - d * brickHeightFactor)
-      .attr("width", brickWidth - brickPadding)
-      .attr("height", (d) => d * brickHeightFactor * 2);
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+
+    // Draw baseline
+    ctx.beginPath();
+    ctx.setLineDash([2]);
+    ctx.lineWidth = 4;
+    ctx.moveTo(0, midHeight);
+    ctx.lineTo(waveWidth, midHeight);
+    ctx.stroke();
+    ctx.setLineDash([]); // Reset dash
+
+    // Draw bricks
+    frequencyData.forEach((value, i) => {
+      const x = i * brickWidth;
+      const height = value * brickHeightFactor * 2;
+      const y = midHeight - height / 2;
+
+      ctx.fillRect(x, y, brickWidth - brickPadding, height);
+    });
   }
 
-  protected drawLine(svg: SVGElement, frequencyData: Uint8Array) {
-    const waveWidth = svg.clientWidth * devicePixelRatio;
-    const waveHeight = svg.clientHeight * devicePixelRatio;
-
-    const xScale = d3
-      .scaleLinear()
-      .domain([0, frequencyData.length - 1])
-      .range([0, waveWidth]);
-
-    const yScale = d3.scaleLinear().domain([0, 255]).range([waveHeight, 0]);
-
-    const lineGenerator = d3
-      .line<Uint8Array[number]>()
-      .x((_, i) => xScale(i))
-      .y((d) => yScale(d));
-
-    const pathData = lineGenerator(frequencyData);
-
-    d3.select(svg)
-      .selectAll("path.line")
-      .data([frequencyData])
-      .join("path")
-      .attr("class", "line")
-      .attr("d", pathData)
-      .attr("fill", "none")
-      .attr("stroke", "currentColor")
-      .attr("stroke-width", 4);
-  }
+  protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
 
-  protected drawRoundBars(svg: SVGElement, frequencyData: Uint8Array) {
-    const waveWidth = svg.clientWidth * devicePixelRatio;
-    const waveHeight = svg.clientHeight;
-    const waveLeft = 0;
-    const waveRight = waveWidth;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    ctx.beginPath();
 
-    const barX = d3
-      .scaleBand()
-      .paddingInner(0.5)
-      .paddingOuter(0.01)
-      .domain(d3.range(frequencyData.length).map((n) => String(n)))
-      .rangeRound([waveLeft, waveRight]);
+    frequencyData.forEach((value, i) => {
+      const x = (i / frequencyData.length) * waveWidth;
+      const y = (1 - value / 255) * waveHeight;
 
-    const height = d3
-      .scaleLinear()
-      .domain([0, 255])
-      .range([0, waveHeight / 2]);
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
 
+    ctx.lineWidth = 4;
+    ctx.stroke();
+  }
+
+  protected drawRoundBars(
+    ctx: CanvasRenderingContext2D,
+    frequencyData: Uint8Array,
+  ) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    const barWidth = (waveWidth / frequencyData.length) * 0.5; // Add padding
     const baseline = waveHeight / 2;
+    const maxHeight = waveHeight / 2;
+
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+
+    frequencyData.forEach((value, i) => {
+      const height = (value / 255) * maxHeight;
+      const x = i * (waveWidth / frequencyData.length);
+      const y = baseline - height;
 
-    const bars = d3.select(svg).selectAll("rect").data(frequencyData);
-    const minBarHeight = 2;
-
-    bars
-      .enter()
-      .append("rect")
-      // @ts-ignore Not sure why this doesn't pass typechecks.
-      .merge(bars)
-      .attr("x", (_, i) => barX(String(i)) || 0)
-      .attr("y", (value) => baseline - height(value))
-      .attr("width", barX.bandwidth() / 1.2)
-      .attr("height", (value) => Math.max(height(value) * 2, minBarHeight))
-      .attr("rx", barX.bandwidth())
-      .attr("ry", barX.bandwidth());
-
-    bars.exit().remove();
+      // Draw rounded rectangle
+      const radius = barWidth / 2;
+      ctx.beginPath();
+      ctx.roundRect(x, y, barWidth, Math.max(height * 2, 2), radius);
+      ctx.fill();
+    });
   }
-  protected drawEqualizer(svg: SVGElement, frequencyData: Uint8Array) {
-    const waveWidth = svg.clientWidth * devicePixelRatio;
-    const waveHeight = svg.clientHeight * devicePixelRatio;
-    const barWidth = waveWidth / frequencyData.length;
-    const barPadding = 1;
-    const minHeight = 1;
-
-    const heightScale = d3
-      .scaleLinear()
-      .domain([0, 255])
-      .range([0, waveHeight / 2]);
-
-    d3.select(svg)
-      .selectAll("line.equalizerBaseLine")
-      .data([0])
-      .join("line")
-      .attr("class", "equalizerBaseLine")
-      .attr("x1", 0)
-      .attr("x2", waveWidth)
-      .attr("y1", waveHeight / 2)
-      .attr("y2", waveHeight / 2)
-      .attr("stroke-width", 2);
-
-    d3.select(svg)
-      .selectAll("rect.equalizerBar")
-      .data(frequencyData)
-      .join("rect")
-      .attr("class", "equalizerBar")
-      .attr("x", (_d, i) => i * barWidth + barPadding / 2)
-      .attr(
-        "y",
-        (d) => waveHeight / 2 - Math.max(heightScale(d) / 2, minHeight),
-      )
-      .attr("width", barWidth - barPadding)
-      .attr("height", (d) => Math.max(heightScale(d), minHeight));
-
-    d3.select(svg)
-      .selectAll("rect.equalizerBar")
-      .transition()
-      .duration(100)
-      .attr(
-        "y",
-        (d) => waveHeight / 2 - Math.max(heightScale(Number(d)) / 2, minHeight),
-      )
-      .attr("height", (d) => Math.max(heightScale(Number(d)), minHeight));
+
+  protected drawEqualizer(
+    ctx: CanvasRenderingContext2D,
+    frequencyData: Uint8Array,
+  ) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    const barWidth = (waveWidth / frequencyData.length) * 0.8;
+    const baseline = waveHeight / 2;
+
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+
+    // Draw baseline
+    ctx.beginPath();
+    ctx.lineWidth = 2;
+    ctx.moveTo(0, baseline);
+    ctx.lineTo(waveWidth, baseline);
+    ctx.stroke();
+
+    // Draw bars
+    frequencyData.forEach((value, i) => {
+      const height = (value / 255) * (waveHeight / 2);
+      const x = i * (waveWidth / frequencyData.length);
+      const y = baseline - height;
+
+      ctx.fillRect(x, y, barWidth, Math.max(height * 2, 1));
+    });
   }
 
-  protected drawCurve(svg: SVGElement, frequencyData: Uint8Array) {
-    const waveWidth = svg.clientWidth * devicePixelRatio;
-    const waveHeight = svg.clientHeight * devicePixelRatio;
-
-    const xScale = d3
-      .scaleLinear()
-      .domain([0, frequencyData.length])
-      .range([0, waveWidth]);
-
-    const yScale = d3.scaleLinear().domain([0, 255]).range([waveHeight, 0]);
-
-    const curveGenerator = d3
-      .line<Uint8Array[number]>()
-      .x((_, i) => xScale(i))
-      .y((d) => yScale(d))
-      .curve(d3.curveNatural);
-
-    const pathData = curveGenerator(frequencyData);
-
-    d3.select(svg)
-      .selectAll("path.curve")
-      .data([frequencyData])
-      .join("path")
-      .attr("class", "curve")
-      .attr("d", pathData)
-      .attr("fill", "none")
-      .attr("stroke", "currentColor")
-      .attr("stroke-width", 4);
+  protected drawCurve(
+    ctx: CanvasRenderingContext2D,
+    frequencyData: Uint8Array,
+  ) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    ctx.beginPath();
+
+    frequencyData.forEach((value, i) => {
+      const x = (i / frequencyData.length) * waveWidth;
+      const y = (1 - value / 255) * waveHeight;
+
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
+
+    ctx.lineWidth = 4;
+    ctx.stroke();
   }
 
-  protected drawPixel(svg: SVGElement, frequencyData: Uint8Array) {
-    const waveWidth = svg.clientWidth * devicePixelRatio;
-    const waveHeight = svg.clientHeight;
+  protected drawPixel(
+    ctx: CanvasRenderingContext2D,
+    frequencyData: Uint8Array,
+  ) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
     const baseline = waveHeight / 2;
+    const barWidth = (waveWidth / frequencyData.length) * 0.97; // Account for padding
 
-    const barX = d3
-      .scaleBand()
-      .domain(d3.range(frequencyData.length).map(String))
-      .rangeRound([0, waveWidth])
-      .paddingInner(0.03)
-      .paddingOuter(0.02);
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
 
-    const height = d3.scaleLinear().domain([0, 255]).range([0, baseline]);
+    frequencyData.forEach((value, i) => {
+      const x = i * (waveWidth / frequencyData.length);
+      const barHeight = (value / 255) * baseline;
+      const y = baseline - barHeight;
 
-    const bars = d3.select(svg).selectAll("rect").data(frequencyData);
+      ctx.fillRect(x, y, barWidth, barHeight * 2);
+    });
+  }
 
-    bars
-      .enter()
-      .append("rect")
-      // @ts-ignore Not sure why this doesn't pass typechecks.
-      .merge(bars)
-      .attr("x", (_, i) => barX(String(i)) || 0)
-      .attr("y", (value) => baseline - height(value))
-      .attr("width", barX.bandwidth())
-      .attr("height", (value) => height(value) * 2);
+  protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
 
-    bars.exit().remove();
-  }
-  protected drawWave(svg: SVGElement, frequencyData: Uint8Array) {
-    const waveWidth = svg.clientWidth * devicePixelRatio;
-    const waveHeight = svg.clientHeight;
-
-    const barX = d3
-      .scaleBand()
-      .domain(d3.range(frequencyData.length).map(String))
-      .rangeRound([0, waveWidth])
-      .paddingInner(0.03)
-      .paddingOuter(0.02);
-
-    const height = d3
-      .scaleLinear()
-      .domain([0, 255])
-      .range([0, waveHeight / 2]);
-
-    d3.select(svg)
-      .selectAll("line.baseline")
-      .data([0])
-      .join("line")
-      .attr("class", "baseline")
-      .attr("x1", (_, i) => barX(String(i)) || 0)
-      .attr("x2", waveWidth)
-      .attr("y1", waveHeight / 2)
-      .attr("y2", waveHeight / 2)
-      .attr("stroke", "currentColor")
-      .attr("stroke-width", 2);
-
-    const bars = d3.select(svg).selectAll("rect").data(frequencyData);
-
-    bars
-      .enter()
-      .append("rect")
-      // @ts-ignore Not sure why this doesn't pass typechecks.
-      .merge(bars)
-      .attr("x", (_, i) => barX(String(i)) || 0)
-      .attr("y", (value) => waveHeight / 2 - height(value))
-      .attr("width", barX.bandwidth())
-      .attr("height", (value) => height(value) * 2);
-
-    bars.exit().remove();
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    const baseline = waveHeight / 2;
+    const barWidth = (waveWidth / frequencyData.length) * 0.97; // Account for padding
+
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+
+    // Draw baseline
+    ctx.beginPath();
+    ctx.moveTo(0, baseline);
+    ctx.lineTo(waveWidth, baseline);
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    // Draw bars
+    frequencyData.forEach((value, i) => {
+      const x = i * (waveWidth / frequencyData.length);
+      const barHeight = (value / 255) * (waveHeight / 2);
+      const y = baseline - barHeight;
+
+      ctx.fillRect(x, y, barWidth, barHeight * 2);
+    });
   }
 
+  // Add this property to store the last frame timestamp
+  private lastFrameTime = 0;
+
   frameTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
     args: () => [this.targetElement.audioBufferTask.status] as const,
     task: async () => {
+      // Calculate and log time since last frame
+      const currentTime = performance.now();
+      const timeSinceLastFrame = this.lastFrameTime
+        ? currentTime - this.lastFrameTime
+        : 0;
+      console.log(`Time since last frame: ${timeSinceLastFrame.toFixed(2)}ms`);
+      this.lastFrameTime = currentTime;
+
       await this.targetElement.audioBufferTask.taskComplete;
+      // Lazy initialize canvas, if we don't stash it, we re-init
+      // every frame, which blanks the canvas, causing flicker.
+      this.ctx ||= this.initCanvas();
+      const ctx = this.ctx;
+      if (!ctx) return;
+
+      if (!this.targetElement.audioBufferTask.value) return;
+
+      if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
+        const FRAMES_TO_ANALYZE = 4;
+        const FRAME_DURATION_MS = 48000 / 100;
+
+        const multiFrameData: Uint8Array[] = [];
+
+        for (let i = 0; i < FRAMES_TO_ANALYZE; i++) {
+          const frameOffset = i - Math.floor(FRAMES_TO_ANALYZE / 2);
+          const audioContext = new OfflineAudioContext(2, 48000 / 25, 48000);
+          const audioBufferSource = audioContext.createBufferSource();
+          audioBufferSource.buffer =
+            this.targetElement.audioBufferTask.value.buffer;
+          const analyser = audioContext.createAnalyser();
+
+          // Adjust FFT size for better frequency resolution
+          analyser.fftSize = 128 / 2;
+          // Adjust smoothing to make peaks more pronounced
+          analyser.smoothingTimeConstant = 0.1;
+
+          audioBufferSource.connect(analyser);
+
+          const startTime = Math.max(
+            0,
+            (this.targetElement.trimAdjustedOwnCurrentTimeMs -
+              this.targetElement.audioBufferTask.value.startOffsetMs) /
+              1000 +
+              (frameOffset * FRAME_DURATION_MS) / 1000,
+          );
+
+          audioBufferSource.start(0, startTime, FRAME_DURATION_MS / 1000);
+          await audioContext.startRendering();
+
+          const frameData = new Uint8Array(analyser.frequencyBinCount);
+          analyser.getByteFrequencyData(frameData);
+
+          multiFrameData.push(frameData);
+        }
+
+        const dataLength = multiFrameData[0]?.length ?? 0;
+
+        // Average and enhance dynamics
+        const smoothedData = new Uint8Array(dataLength);
+        for (let i = 0; i < smoothedData.length; i++) {
+          let sum = 0;
+          for (const frameData of multiFrameData) {
+            sum += frameData[i] ?? 0;
+          }
+          let avg = sum / FRAMES_TO_ANALYZE;
+
+          // Enhance dynamics by applying a subtle exponential curve
+          avg = (avg / 255) ** 1.2 * 255;
+
+          smoothedData[i] = Math.round(avg);
+        }
+
+        // Use smoothedData for rendering
+        switch (this.mode) {
+          case "bars":
+            this.drawBars(ctx, smoothedData);
+            break;
+          case "bricks":
+            this.drawBricks(ctx, smoothedData);
+            break;
+          case "curve":
+            this.drawCurve(ctx, smoothedData);
+            break;
+          case "line":
+            this.drawLine(ctx, smoothedData);
+            break;
+          case "pixel":
+            this.drawPixel(ctx, smoothedData);
+            break;
+          case "wave":
+            this.drawWave(ctx, smoothedData);
+            break;
+          case "roundBars":
+            this.drawRoundBars(ctx, smoothedData);
+            break;
+          case "equalizer":
+            this.drawEqualizer(ctx, smoothedData);
+            break;
+        }
+      }
     },
   });
 
-  protected async updated() {
-    const svg = this.svgRef.value;
-    if (!svg) {
-      return;
-    }
-    if (!this.targetElement.audioBufferTask.value) {
-      return;
-    }
-    if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
-      const audioContext = new OfflineAudioContext(2, 48000 / 25, 48000);
-      const audioBufferSource = audioContext.createBufferSource();
-      audioBufferSource.buffer =
-        this.targetElement.audioBufferTask.value.buffer;
-      const analyser = audioContext.createAnalyser();
-      analyser.fftSize = 256;
-      audioBufferSource.connect(analyser);
-
-      audioBufferSource.start(
-        0,
-        Math.max(
-          0,
-          (this.targetElement.trimAdjustedOwnCurrentTimeMs -
-            this.targetElement.audioBufferTask.value.startOffsetMs) /
-            1000,
-        ),
-        48000 / 1000,
-      );
-      await audioContext.startRendering();
-      const frequencyData = new Uint8Array(analyser.frequencyBinCount);
-      analyser.getByteFrequencyData(frequencyData);
-      const rect = this.getBoundingClientRect();
-
-      svg.setAttribute("width", (rect.width * devicePixelRatio).toString());
-      svg.setAttribute("height", (rect.height * devicePixelRatio).toString());
-
-      switch (this.mode) {
-        case "bars":
-          this.drawBars(svg, frequencyData);
-          break;
-        case "bricks":
-          this.drawBricks(svg, frequencyData);
-          break;
-        case "curve":
-          this.drawCurve(svg, frequencyData);
-          break;
-        case "line":
-          this.drawLine(svg, frequencyData);
-          break;
-        case "pixel":
-          this.drawPixel(svg, frequencyData);
-          break;
-        case "wave":
-          this.drawWave(svg, frequencyData);
-          break;
-        case "roundBars":
-          this.drawRoundBars(svg, frequencyData);
-          break;
-        case "equalizer":
-          this.drawEqualizer(svg, frequencyData);
-          break;
-      }
-    }
+  get durationMs() {
+    return this.targetElement.durationMs;
   }
 
   get targetElement() {
@@ -414,4 +434,14 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     }
     throw new Error("Invalid target, must be an EFAudio or EFVideo element");
   }
+
+  protected updated(changedProperties: PropertyValueMap<this>): void {
+    super.updated(changedProperties);
+
+    // Trigger a redraw if color or mode changes
+    if (changedProperties.has("color") || changedProperties.has("mode")) {
+      // Request a new frame
+      this.frameTask.run();
+    }
+  }
 }