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

package/src/elements/EFMedia.ts

@@ -1,56 +1,36 @@
-import { Task } from "@lit/task";
-import { deepArrayEquals } from "@lit/task/deep-equals.js";
-import debug from "debug";
-import { LitElement, type PropertyValueMap, css } from "lit";
+import { css, LitElement, type PropertyValueMap } from "lit";
 import { property, state } from "lit/decorators.js";
-import type * as MP4Box from "mp4box";
 
-import type { TrackFragmentIndex, TrackSegment } from "@editframe/assets";
-
-import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
-import { MP4File } from "@editframe/assets/MP4File.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import type { AudioSpan } from "../transcoding/types/index.ts";
+import { UrlGenerator } from "../transcoding/utils/UrlGenerator.ts";
+// Audio task imports
+import { makeAudioBufferTask } from "./EFMedia/audioTasks/makeAudioBufferTask.ts";
+import { makeAudioFrequencyAnalysisTask } from "./EFMedia/audioTasks/makeAudioFrequencyAnalysisTask.ts";
+import { makeAudioInitSegmentFetchTask } from "./EFMedia/audioTasks/makeAudioInitSegmentFetchTask.ts";
+import { makeAudioInputTask } from "./EFMedia/audioTasks/makeAudioInputTask.ts";
+import { makeAudioSeekTask } from "./EFMedia/audioTasks/makeAudioSeekTask.ts";
+import { makeAudioSegmentFetchTask } from "./EFMedia/audioTasks/makeAudioSegmentFetchTask.ts";
+import { makeAudioSegmentIdTask } from "./EFMedia/audioTasks/makeAudioSegmentIdTask.ts";
+import { makeAudioTimeDomainAnalysisTask } from "./EFMedia/audioTasks/makeAudioTimeDomainAnalysisTask.ts";
+import { AudioElementFactory } from "./EFMedia/services/AudioElementFactory.js";
+// Import extracted services and utilities
+import { MediaSourceService } from "./EFMedia/services/MediaSourceService.js";
+// Common task imports
+import { makeMediaEngineTask } from "./EFMedia/tasks/makeMediaEngineTask.ts";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { EFTargetable } from "./TargetController.ts";
 import { updateAnimations } from "./updateAnimations.ts";
 
-const log = debug("ef:elements:EFMedia");
+// EF_FRAMEGEN is a global instance created in EF_FRAMEGEN.ts
+declare global {
+  var EF_FRAMEGEN: import("../EF_FRAMEGEN.js").EFFramegen;
+}
 
 const freqWeightsCache = new Map<number, Float32Array>();
 
-class LRUCache<K, V> {
-  private cache = new Map<K, V>();
-  private readonly maxSize: number;
-
-  constructor(maxSize: number) {
-    this.maxSize = maxSize;
-  }
-
-  get(key: K): V | undefined {
-    const value = this.cache.get(key);
-    if (value) {
-      // Refresh position by removing and re-adding
-      this.cache.delete(key);
-      this.cache.set(key, value);
-    }
-    return value;
-  }
-
-  set(key: K, value: V): void {
-    if (this.cache.has(key)) {
-      this.cache.delete(key);
-    } else if (this.cache.size >= this.maxSize) {
-      // Remove oldest entry (first item in map)
-      const firstKey = this.cache.keys().next().value;
-      if (firstKey) {
-        this.cache.delete(firstKey);
-      }
-    }
-    this.cache.set(key, value);
-  }
-}
+export class IgnorableError extends Error {}
 
 export const deepGetMediaElements = (
   element: Element,
@@ -71,6 +51,37 @@ export class EFMedia extends EFTargetable(
     assetType: "isobmff_files",
   }),
 ) {
+  // Sample buffer size configuration
+  static readonly VIDEO_SAMPLE_BUFFER_SIZE = 30;
+  static readonly AUDIO_SAMPLE_BUFFER_SIZE = 120;
+
+  static get observedAttributes() {
+    // biome-ignore lint/complexity/noThisInStatic: We need to access super
+    const parentAttributes = super.observedAttributes || [];
+    return [
+      ...parentAttributes,
+      "mute",
+      "fft-size",
+      "fft-decay",
+      "fft-gain",
+      "interpolate-frequencies",
+      "asset-id",
+      "audio-buffer-duration",
+      "max-audio-buffer-fetches",
+      "enable-audio-buffering",
+    ];
+  }
+
+  // Services for media source and audio element management
+  private mediaSourceService = new MediaSourceService({
+    onError: (error) => {
+      console.error("🎵 [EFMedia] MediaSourceService error:", error);
+    },
+    onReady: () => {},
+  });
+
+  private audioElementFactory = new AudioElementFactory();
+
   static styles = [
     css`
       :host {
@@ -84,261 +95,134 @@ export class EFMedia extends EFTargetable(
   @property({ type: Number })
   currentTimeMs = 0;
 
-  #assetId: string | null = null;
+  /**
+   * Duration in milliseconds for audio buffering ahead of current time
+   * @domAttribute "audio-buffer-duration"
+   */
+  @property({ type: Number, attribute: "audio-buffer-duration" })
+  audioBufferDurationMs = 30000; // 30 seconds
 
   /**
-   * The unique identifier for the media asset.
-   * This property can be set programmatically or via the "asset-id" attribute.
-   * @domAttribute "asset-id"
+   * Maximum number of concurrent audio segment fetches for buffering
+   * @domAttribute "max-audio-buffer-fetches"
    */
-  @property({ type: String, attribute: "asset-id", reflect: true })
-  set assetId(value: string | null) {
-    this.#assetId = value;
-  }
+  @property({ type: Number, attribute: "max-audio-buffer-fetches" })
+  maxAudioBufferFetches = 2;
 
-  get assetId() {
-    return this.#assetId || this.getAttribute("asset-id");
-  }
+  /**
+   * Enable/disable audio buffering system
+   * @domAttribute "enable-audio-buffering"
+   */
+  @property({ type: Boolean, attribute: "enable-audio-buffering" })
+  enableAudioBuffering = true;
 
-  fragmentIndexPath() {
-    if (this.assetId) {
-      return `${this.apiHost}/api/v1/isobmff_files/${this.assetId}/index`;
-    }
-    return `/@ef-track-fragment-index/${this.src ?? ""}`;
-  }
+  /**
+   * Mute/unmute the media element
+   * @domAttribute "mute"
+   */
+  @property({
+    type: Boolean,
+    attribute: "mute",
+    reflect: true,
+  })
+  mute = false;
 
-  fragmentTrackPath(trackId: string) {
-    if (this.assetId) {
-      return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
-    }
-    // trackId is only specified as a query  in the @ef-track url shape
-    // this is because that system doesn't have a full url matching system.
-    // This is an annoying incosistency that should be fixed.
-    return `/@ef-track/${this.src ?? ""}?trackId=${trackId}`;
-  }
+  /**
+   * FFT size for frequency analysis
+   * @domAttribute "fft-size"
+   */
+  @property({ type: Number, attribute: "fft-size", reflect: true })
+  fftSize = 128;
 
-  public trackFragmentIndexLoader = new Task(this, {
-    args: () => [this.fragmentIndexPath(), this.fetch] as const,
-    task: async ([fragmentIndexPath, fetch], { signal }) => {
-      try {
-        const response = await fetch(fragmentIndexPath, { signal });
+  /**
+   * FFT decay rate for frequency analysis
+   * @domAttribute "fft-decay"
+   */
+  @property({ type: Number, attribute: "fft-decay", reflect: true })
+  fftDecay = 8;
 
-        return (await response.json()) as Record<number, TrackFragmentIndex>;
-      } catch (error) {
-        log("Failed to load track fragment index", error);
-        return undefined;
-      }
-    },
-    onComplete: () => {
-      this.requestUpdate("intrinsicDurationMs");
-      this.requestUpdate("ownCurrentTimeMs");
-      this.rootTimegroup?.requestUpdate("ownCurrentTimeMs");
-      this.rootTimegroup?.requestUpdate("durationMs");
-    },
-  });
+  /**
+   * FFT gain for frequency analysis
+   * @domAttribute "fft-gain"
+   */
+  @property({ type: Number, attribute: "fft-gain", reflect: true })
+  fftGain = 3.0;
 
-  public initSegmentsLoader = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () =>
-      [this.trackFragmentIndexLoader.value, this.src, this.fetch] as const,
-    task: async ([fragmentIndex, _src, fetch], { signal }) => {
-      if (!fragmentIndex) {
-        return;
-      }
-      return await Promise.all(
-        Object.entries(fragmentIndex).map(async ([trackId, track]) => {
-          const start = track.initSegment.offset;
-          const end = track.initSegment.offset + track.initSegment.size;
-          const response = await fetch(this.fragmentTrackPath(trackId), {
-            signal,
-            headers: { Range: `bytes=${start}-${end - 1}` },
-          });
-          const buffer =
-            (await response.arrayBuffer()) as MP4Box.MP4ArrayBuffer;
-          buffer.fileStart = 0;
-          const mp4File = new MP4File();
-          mp4File.appendBuffer(buffer, true);
-          mp4File.flush();
-          await mp4File.readyPromise;
-
-          return { trackId, buffer, mp4File };
-        }),
-      );
-    },
-  });
+  /**
+   * Enable/disable frequency interpolation
+   * @domAttribute "interpolate-frequencies"
+   */
+  @property({
+    type: Boolean,
+    attribute: "interpolate-frequencies",
+    reflect: true,
+  })
+  interpolateFrequencies = false;
 
-  get defaultVideoTrackId() {
-    return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
-      (track) => track.type === "video",
-    )?.track;
-  }
+  // Update FREQ_WEIGHTS to use the instance fftSize instead of a static value
+  get FREQ_WEIGHTS() {
+    if (freqWeightsCache.has(this.fftSize)) {
+      // biome-ignore lint/style/noNonNullAssertion: We know the value is set due to the guard above
+      return freqWeightsCache.get(this.fftSize)!;
+    }
 
-  get defaultAudioTrackId() {
-    return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
-      (track) => track.type === "audio",
-    )?.track;
-  }
+    const weights = new Float32Array(this.fftSize / 2).map((_, i) => {
+      const frequency = (i * 48000) / this.fftSize;
+      if (frequency < 60) return 0.3;
+      if (frequency < 250) return 0.4;
+      if (frequency < 500) return 0.6;
+      if (frequency < 2000) return 0.8;
+      if (frequency < 4000) return 1.2;
+      if (frequency < 8000) return 1.6;
+      return 2.0;
+    });
 
-  seekTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () =>
-      [
-        this.desiredSeekTimeMs,
-        this.trackFragmentIndexLoader.value,
-        this.initSegmentsLoader.value,
-      ] as const,
-    task: async (
-      [seekToMs, fragmentIndex, initSegments],
-      { signal: _signal },
-    ) => {
-      if (fragmentIndex === undefined) {
-        return;
-      }
-      if (initSegments === undefined) {
-        return;
-      }
+    freqWeightsCache.set(this.fftSize, weights);
+    return weights;
+  }
 
-      const result: Record<
-        string,
-        {
-          segment: TrackSegment;
-          track: MP4Box.TrackInfo;
-          nextSegment?: TrackSegment;
-        }
-      > = {};
-
-      for (const index of Object.values(fragmentIndex)) {
-        const track = initSegments
-          .find((segment) => segment.trackId === String(index.track))
-          ?.mp4File.getInfo().tracks[0];
-
-        if (!track) {
-          throw new Error("Could not finding matching track");
-        }
-
-        const segment = index.segments.toReversed().find((segment) => {
-          return (segment.dts / track.timescale) * 1000 <= seekToMs;
-        });
-
-        const nextSegment = index.segments.find((segment) => {
-          return (segment.dts / track.timescale) * 1000 > seekToMs;
-        });
-
-        if (!segment) {
-          return;
-        }
-
-        result[index.track] = { segment, track, nextSegment };
-      }
+  // Helper getter for backwards compatibility
+  get shouldInterpolateFrequencies() {
+    return this.interpolateFrequencies;
+  }
 
-      return result;
-    },
-  });
+  get urlGenerator() {
+    return new UrlGenerator(() => this.apiHost ?? "");
+  }
 
-  fetchSeekTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    argsEqual: deepArrayEquals,
-    args: () =>
-      [this.initSegmentsLoader.value, this.seekTask.value, this.fetch] as const,
-    task: async ([initSegments, seekResult, fetch], { signal }) => {
-      if (!initSegments) {
-        return;
-      }
-      if (!seekResult) {
-        return;
-      }
+  mediaEngineTask = makeMediaEngineTask(this);
 
-      const files: Record<string, File> = {};
-
-      for (const [trackId, { segment, track, nextSegment }] of Object.entries(
-        seekResult,
-      )) {
-        const start = segment.offset;
-        const end = segment.offset + segment.size;
-
-        const response = await fetch(this.fragmentTrackPath(trackId), {
-          signal,
-          headers: { Range: `bytes=${start}-${end - 1}` },
-        });
-
-        if (nextSegment) {
-          const nextStart = nextSegment.offset;
-          const nextEnd = nextSegment.offset + nextSegment.size;
-          fetch(this.fragmentTrackPath(trackId), {
-            signal,
-            headers: { Range: `bytes=${nextStart}-${nextEnd - 1}` },
-          })
-            .then(() => {
-              log("Prefetched next segment");
-            })
-            .catch((error) => {
-              log("Failed to prefetch next segment", error);
-            });
-        }
-
-        const initSegment = Object.values(initSegments).find(
-          (initSegment) => initSegment.trackId === String(track.id),
-        );
-        if (!initSegment) {
-          throw new Error("Could not find matching init segment");
-        }
-        const initBuffer = initSegment.buffer;
-
-        const mediaBuffer =
-          (await response.arrayBuffer()) as unknown as MP4Box.MP4ArrayBuffer;
-
-        files[trackId] = new File([initBuffer, mediaBuffer], "video.mp4", {
-          type: "video/mp4",
-        });
-      }
+  audioSegmentIdTask = makeAudioSegmentIdTask(this);
+  audioInitSegmentFetchTask = makeAudioInitSegmentFetchTask(this);
+  audioSegmentFetchTask = makeAudioSegmentFetchTask(this);
+  audioInputTask = makeAudioInputTask(this);
+  audioSeekTask = makeAudioSeekTask(this);
 
-      return files;
-    },
-  });
+  audioBufferTask = makeAudioBufferTask(this);
 
-  videoAssetTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () => [this.fetchSeekTask.value] as const,
-    task: async ([files], { signal: _signal }) => {
-      if (!files) {
-        return;
-      }
-      if (!this.defaultVideoTrackId) {
-        return;
-      }
-      const videoFile = files[this.defaultVideoTrackId];
-      if (!videoFile) {
-        return;
-      }
-      // TODO: Extract to general cleanup function
-      for (const frame of this.videoAssetTask.value?.decodedFrames || []) {
-        frame.close();
-      }
-      this.videoAssetTask.value?.videoDecoder?.close();
-      return await VideoAsset.createFromReadableStream(
-        "video.mp4",
-        videoFile.stream(),
-        videoFile,
-      );
-    },
-  });
+  // Audio analysis tasks for frequency and time domain analysis
+  byteTimeDomainTask = makeAudioTimeDomainAnalysisTask(this);
+  frequencyDataTask = makeAudioFrequencyAnalysisTask(this);
 
-  @state()
-  desiredSeekTimeMs = 0;
+  /**
+   * The unique identifier for the media asset.
+   * This property can be set programmatically or via the "asset-id" attribute.
+   * @domAttribute "asset-id"
+   */
+  @property({ type: String, attribute: "asset-id", reflect: true })
+  assetId: string | null = null;
 
-  protected async executeSeek(seekToMs: number) {
-    this.desiredSeekTimeMs = seekToMs;
+  get intrinsicDurationMs() {
+    return this.mediaEngineTask.value?.durationMs ?? 0;
   }
 
   protected updated(
     changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
   ): void {
+    super.updated(changedProperties);
     if (changedProperties.has("ownCurrentTimeMs")) {
       this.executeSeek(this.currentSourceTimeMs);
     }
-    // TODO: this is copied straight from EFTimegroup.ts
-    // and should be refactored to be shared/reduce bad duplication of
-    // critical logic.
     if (
       changedProperties.has("currentTime") ||
       changedProperties.has("ownCurrentTimeMs")
@@ -351,534 +235,92 @@ export class EFMedia extends EFTargetable(
     return true;
   }
 
-  get intrinsicDurationMs() {
-    if (!this.trackFragmentIndexLoader.value) {
-      return 0;
-    }
+  @state()
+  private _desiredSeekTimeMs = 0; // Initialize to 0 for proper segment loading
 
-    const durations = Object.values(this.trackFragmentIndexLoader.value).map(
-      (track) => {
-        return (track.duration / track.timescale) * 1000;
-      },
-    );
-    if (durations.length === 0) {
-      return 0;
-    }
-    return Math.max(...durations);
+  get desiredSeekTimeMs() {
+    return this._desiredSeekTimeMs;
   }
 
-  #audioContext = new OfflineAudioContext(2, 48000 / 30, 48000);
-
-  audioBufferTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () => [this.fetchSeekTask.value, this.seekTask.value] as const,
-    task: async ([files, segments], { signal: _signal }) => {
-      if (!files) {
-        return;
-      }
-      if (!segments) {
-        return;
-      }
-      if (!this.defaultAudioTrackId) {
-        return;
-      }
-      const segment = segments[this.defaultAudioTrackId];
-      if (!segment) {
-        return;
-      }
-      const audioFile = files[this.defaultAudioTrackId];
-      if (!audioFile) {
-        return;
-      }
-      return {
-        buffer: await this.#audioContext.decodeAudioData(
-          await audioFile.arrayBuffer(),
-        ),
-        startOffsetMs: (segment.segment.cts / segment.track.timescale) * 1000,
-      };
-    },
-  });
-
-  async fetchAudioSpanningTime(fromMs: number, toMs: number) {
-    // Adjust range for track's own time
-    if (this.sourceInMs) {
-      fromMs -=
-        this.startTimeMs - (this.trimStartMs ?? 0) - (this.sourceInMs ?? 0);
-    }
-    if (this.sourceOutMs) {
-      toMs -=
-        this.startTimeMs - (this.trimStartMs ?? 0) - (this.sourceOutMs ?? 0);
-    }
-    fromMs -= this.startTimeMs - (this.trimStartMs ?? 0);
-    toMs -= this.startTimeMs - (this.trimStartMs ?? 0);
-
-    await this.trackFragmentIndexLoader.taskComplete;
-    const audioTrackId = this.defaultAudioTrackId;
-    if (!audioTrackId) {
-      log("No audio track found");
-      return;
+  set desiredSeekTimeMs(value: number) {
+    if (this._desiredSeekTimeMs !== value) {
+      this._desiredSeekTimeMs = value;
     }
-
-    const audioTrackIndex = this.trackFragmentIndexLoader.value?.[audioTrackId];
-    if (!audioTrackIndex) {
-      log("No audio track found");
-      return;
-    }
-
-    const start = audioTrackIndex.initSegment.offset;
-    const end =
-      audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size;
-    const audioInitFragmentRequest = this.fetch(
-      this.fragmentTrackPath(String(audioTrackId)),
-      {
-        headers: { Range: `bytes=${start}-${end - 1}` },
-      },
-    );
-
-    const fragments = Object.values(audioTrackIndex.segments).filter(
-      (segment) => {
-        const segmentStartsBeforeEnd =
-          segment.dts <= (toMs * audioTrackIndex.timescale) / 1000;
-        const segmentEndsAfterStart =
-          segment.dts + segment.duration >=
-          (fromMs * audioTrackIndex.timescale) / 1000;
-        return segmentStartsBeforeEnd && segmentEndsAfterStart;
-      },
-    );
-
-    const firstFragment = fragments[0];
-    if (!firstFragment) {
-      log("No audio fragments found");
-      return;
-    }
-    const lastFragment = fragments[fragments.length - 1];
-    if (!lastFragment) {
-      log("No audio fragments found");
-      return;
-    }
-    const fragmentStart = firstFragment.offset;
-    const fragmentEnd = lastFragment.offset + lastFragment.size;
-
-    const audioFragmentRequest = this.fetch(
-      this.fragmentTrackPath(String(audioTrackId)),
-      {
-        headers: { Range: `bytes=${fragmentStart}-${fragmentEnd - 1}` },
-      },
-    );
-
-    const initResponse = await audioInitFragmentRequest;
-    const dataResponse = await audioFragmentRequest;
-
-    const initBuffer = await initResponse.arrayBuffer();
-    const dataBuffer = await dataResponse.arrayBuffer();
-
-    const audioBlob = new Blob([initBuffer, dataBuffer], {
-      type: "audio/mp4",
-    });
-
-    return {
-      blob: audioBlob,
-      startMs:
-        (firstFragment.dts / audioTrackIndex.timescale) * 1000 -
-        (this.trimStartMs ?? 0),
-      endMs:
-        (lastFragment.dts / audioTrackIndex.timescale) * 1000 +
-        (lastFragment.duration / audioTrackIndex.timescale) * 1000 -
-        (this.trimEndMs ?? 0),
-    };
-  }
-
-  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() {
-    return Number.parseInt(this.getAttribute("fft-size") ?? "128", 10);
-  }
-
-  get fftDecay() {
-    return Number.parseInt(this.getAttribute("fft-decay") ?? "8", 10);
-  }
-
-  set interpolateFrequencies(value: boolean) {
-    const oldValue = this.interpolateFrequencies;
-    this.setAttribute("interpolate-frequencies", String(value));
-    this.requestUpdate("interpolate-frequencies", oldValue);
   }
 
-  get interpolateFrequencies() {
-    return this.getAttribute("interpolate-frequencies") !== "false";
-  }
-
-  get shouldInterpolateFrequencies() {
-    if (this.hasAttribute("interpolate-frequencies")) {
-      return this.getAttribute("interpolate-frequencies") !== "false";
-    }
-    return false;
+  protected async executeSeek(seekToMs: number) {
+    this.desiredSeekTimeMs = seekToMs;
   }
 
-  private static readonly DECAY_WEIGHT = 0.7;
-
-  // Update FREQ_WEIGHTS to use the instance fftSize instead of a static value
-  get FREQ_WEIGHTS() {
-    if (freqWeightsCache.has(this.fftSize)) {
-      // biome-ignore lint/style/noNonNullAssertion: Will exist due to prior has check
-      return freqWeightsCache.get(this.fftSize)!;
-    }
-
-    const weights = new Float32Array(this.fftSize / 2).map((_, i) => {
-      const frequency = (i * 48000) / this.fftSize;
-      if (frequency < 60) return 0.3;
-      if (frequency < 250) return 0.4;
-      if (frequency < 500) return 0.6;
-      if (frequency < 2000) return 0.8;
-      if (frequency < 4000) return 1.2;
-      if (frequency < 8000) return 1.6;
-      return 2.0;
-    });
+  /**
+   * Main integration method for EFTimegroup audio playback
+   * Now powered by clean, testable utility functions
+   */
+  async fetchAudioSpanningTime(
+    fromMs: number,
+    toMs: number,
+    signal: AbortSignal = new AbortController().signal,
+  ): Promise<AudioSpan> {
+    // Reset MediaSourceManager for fresh playback session
+    await this.mediaSourceService.initialize();
+
+    // Use the clean, testable utility function
+    const { fetchAudioSpanningTime: fetchAudioSpan } = await import(
+      "./EFMedia/shared/AudioSpanUtils.ts"
+    );
 
-    freqWeightsCache.set(this.fftSize, weights);
-    return weights;
+    return fetchAudioSpan(this, fromMs, toMs, signal);
   }
 
-  #byteTimeDomainCache = new LRUCache<string, Uint8Array>(100);
-
-  byteTimeDomainTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () =>
-      [
-        this.audioBufferTask.status,
-        this.currentSourceTimeMs,
-        this.fftSize,
-        this.fftDecay,
-        this.fftGain,
-        this.shouldInterpolateFrequencies,
-      ] as const,
-    task: async () => {
-      await this.audioBufferTask.taskComplete;
-      if (!this.audioBufferTask.value) return null;
-      if (this.currentSourceTimeMs <= 0) return null;
-
-      const currentTimeMs = this.currentSourceTimeMs;
-      const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
-      const audioBuffer = this.audioBufferTask.value.buffer;
-
-      const smoothedKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftDecay}:${this.fftGain}:${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 (_, frameIndex) => {
-          const frameOffset = frameIndex * (1000 / 30);
-          const startTime = Math.max(
-            0,
-            (currentTimeMs - frameOffset - startOffsetMs) / 1000,
-          );
-
-          const cacheKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftGain}:${startOffsetMs}:${startTime}`;
-          const cachedFrame = this.#byteTimeDomainCache.get(cacheKey);
-          if (cachedFrame) return cachedFrame;
-
-          const audioContext = new OfflineAudioContext(
-            2,
-            48000 * (1 / 30),
-            48000,
-          );
-
-          const source = audioContext.createBufferSource();
-          source.buffer = audioBuffer;
-
-          // Create analyzer for PCM data
-          const analyser = audioContext.createAnalyser();
-          analyser.fftSize = this.fftSize; // Ensure enough samples
-          analyser.minDecibels = -90;
-          analyser.maxDecibels = -20;
-
-          const gainNode = audioContext.createGain();
-          gainNode.gain.value = this.fftGain; // Amplify the signal
-
-          source.connect(gainNode);
-          gainNode.connect(analyser);
-          analyser.connect(audioContext.destination);
-
-          source.start(0, startTime, 1 / 30);
-
-          const dataLength = analyser.fftSize / 2;
-          try {
-            await audioContext.startRendering();
-            const frameData = new Uint8Array(dataLength);
-            analyser.getByteTimeDomainData(frameData);
-
-            // const points = frameData;
-            // Calculate RMS and midpoint values
-            const points = new Uint8Array(dataLength);
-            for (let i = 0; i < dataLength; i++) {
-              const pointSamples = frameData.slice(
-                i * (frameData.length / dataLength),
-                (i + 1) * (frameData.length / dataLength),
-              );
-
-              // Calculate RMS while preserving sign
-              const rms = Math.sqrt(
-                pointSamples.reduce((sum, sample) => {
-                  const normalized = (sample - 128) / 128;
-                  return sum + normalized * normalized;
-                }, 0) / pointSamples.length,
-              );
-
-              // Get average sign of the samples to determine direction
-              const avgSign = Math.sign(
-                pointSamples.reduce((sum, sample) => sum + (sample - 128), 0),
-              );
-
-              // Convert RMS back to byte range, preserving direction
-              points[i] = Math.min(255, Math.round(128 + avgSign * rms * 128));
-            }
-
-            this.#byteTimeDomainCache.set(cacheKey, points);
-            return points;
-          } finally {
-            source.disconnect();
-            analyser.disconnect();
-          }
-        }),
-      );
-
-      // Combine frames with decay weighting
-      const frameLength = framesData[0]?.length ?? 0;
-      const smoothedData = new Uint8Array(frameLength);
-
-      for (let i = 0; i < frameLength; i++) {
-        let weightedSum = 0;
-        let weightSum = 0;
-
-        framesData.forEach((frame, frameIndex) => {
-          const decayWeight = EFMedia.DECAY_WEIGHT ** frameIndex;
-          weightedSum += (frame[i] ?? 0) * decayWeight;
-          weightSum += decayWeight;
-        });
-
-        smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
-      }
-
-      this.#byteTimeDomainCache.set(smoothedKey, smoothedData);
-      return smoothedData;
-    },
-  });
-
-  #frequencyDataCache = new LRUCache<string, Uint8Array>(100);
-
-  frequencyDataTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () =>
-      [
-        this.audioBufferTask.status,
-        this.currentSourceTimeMs,
-        this.fftSize,
-        this.fftDecay,
-        this.fftGain,
-        this.shouldInterpolateFrequencies,
-      ] as const,
-    task: async () => {
-      await this.audioBufferTask.taskComplete;
-      if (!this.audioBufferTask.value) return null;
-      if (this.currentSourceTimeMs <= 0) return null;
-
-      const currentTimeMs = this.currentSourceTimeMs;
-      const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
-      const audioBuffer = this.audioBufferTask.value.buffer;
-      const smoothedKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftDecay}:${this.fftGain}:${startOffsetMs}:${currentTimeMs}`;
-
-      const cachedSmoothedData = this.#frequencyDataCache.get(smoothedKey);
-      if (cachedSmoothedData) {
-        return cachedSmoothedData;
-      }
-
-      const framesData = await Promise.all(
-        Array.from({ length: this.fftDecay }, async (_, i) => {
-          const frameOffset = i * (1000 / 30);
-          const startTime = Math.max(
-            0,
-            (currentTimeMs - frameOffset - startOffsetMs) / 1000,
-          );
-
-          // Cache key for this specific frame
-          const cacheKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftGain}:${startOffsetMs}:${startTime}`;
-
-          // Check cache for this specific frame
-          const cachedFrame = this.#frequencyDataCache.get(cacheKey);
-          if (cachedFrame) {
-            return cachedFrame;
-          }
-
-          const audioContext = new OfflineAudioContext(
-            2,
-            48000 * (1 / 30),
-            48000,
-          );
-          const analyser = audioContext.createAnalyser();
-          analyser.fftSize = this.fftSize;
-          analyser.minDecibels = -90;
-          analyser.maxDecibels = -10;
-
-          const gainNode = audioContext.createGain();
-          gainNode.gain.value = this.fftGain;
-
-          const filter = audioContext.createBiquadFilter();
-          filter.type = "bandpass";
-          filter.frequency.value = 15000;
-          filter.Q.value = 0.05;
-
-          const audioBufferSource = audioContext.createBufferSource();
-          audioBufferSource.buffer = audioBuffer;
-
-          audioBufferSource.connect(filter);
-          filter.connect(gainNode);
-          gainNode.connect(analyser);
-          analyser.connect(audioContext.destination);
-
-          audioBufferSource.start(0, startTime, 1 / 30);
-
-          try {
-            await audioContext.startRendering();
-            const frameData = new Uint8Array(this.fftSize / 2);
-            analyser.getByteFrequencyData(frameData);
-
-            // Cache this frame's analysis
-            this.#frequencyDataCache.set(cacheKey, frameData);
-            return frameData;
-          } finally {
-            audioBufferSource.disconnect();
-            analyser.disconnect();
-          }
-        }),
-      );
-
-      const frameLength = framesData[0]?.length ?? 0;
-
-      // Combine frames with decay
-      const smoothedData = new Uint8Array(frameLength);
-      for (let i = 0; i < frameLength; i++) {
-        let weightedSum = 0;
-        let weightSum = 0;
-
-        framesData.forEach((frame, frameIndex) => {
-          const decayWeight = EFMedia.DECAY_WEIGHT ** frameIndex;
-          // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-          weightedSum += frame[i]! * decayWeight;
-          weightSum += decayWeight;
-        });
-
-        smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
-      }
-
-      // Apply frequency weights using instance FREQ_WEIGHTS
-      smoothedData.forEach((value, i) => {
-        // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-        const freqWeight = this.FREQ_WEIGHTS[i]!;
-        smoothedData[i] = Math.min(255, Math.round(value * freqWeight));
-      });
-
-      // Only return the lower half of the frequency data
-      // The top half is zeroed out, which makes for aesthetically unpleasing waveforms
-      const slicedData = smoothedData.slice(
-        0,
-        Math.floor(smoothedData.length / 2),
-      );
-      const processedData = this.shouldInterpolateFrequencies
-        ? processFFTData(slicedData)
-        : slicedData;
-      this.#frequencyDataCache.set(smoothedKey, processedData);
-      return processedData;
-    },
-  });
-
-  set fftGain(value: number) {
-    const oldValue = this.fftGain;
-    this.setAttribute("fft-gain", String(value));
-    this.requestUpdate("fft-gain", oldValue);
+  /**
+   * Get the HTML audio element for ContextMixin integration
+   */
+  get audioElement(): HTMLAudioElement | null {
+    return this.mediaSourceService.getAudioElement();
   }
 
-  get fftGain() {
-    return Number.parseFloat(this.getAttribute("fft-gain") ?? "3.0");
+  /**
+   * Check if an audio segment is cached in the unified buffer system
+   * Now uses the same caching approach as video for consistency
+   */
+  getCachedAudioSegment(segmentId: number): boolean {
+    return this.audioBufferTask.value?.cachedSegments.has(segmentId) ?? false;
   }
-}
-
-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;
-      }
+  /**
+   * Get cached audio segments from the unified buffer system
+   * Now uses the same caching approach as video for consistency
+   */
+  getCachedAudioSegments(segmentIds: number[]): Set<number> {
+    const bufferState = this.audioBufferTask.value;
+    if (!bufferState) {
+      return new Set();
     }
+    return new Set(
+      segmentIds.filter((id) => bufferState.cachedSegments.has(id)),
+    );
   }
 
-  if (cutoffIndex < zeroThresholdCount) {
-    return fftData;
-  }
-
-  // Step 3: Resample the "good" portion of the data
-  const goodData = fftData.slice(0, cutoffIndex);
-  const resampledData = interpolateData(goodData, fftData.length);
-
-  // Step 4: Attenuate the top 10% of interpolated samples
-  const attenuationStartIndex = Math.floor(totalBins * 0.9);
-  for (let i = attenuationStartIndex; i < totalBins; i++) {
-    // Calculate attenuation factor that goes from 1 to 0 over the top 10%
-    const attenuationProgress =
-      (i - attenuationStartIndex) / (totalBins - attenuationStartIndex) + 0.2;
-    const attenuationFactor = Math.max(0, 1 - attenuationProgress);
-    // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-    resampledData[i] = Math.floor(resampledData[i]! * attenuationFactor);
+  /**
+   * Get MediaElementAudioSourceNode for ContextMixin integration
+   * Uses AudioElementFactory for proper caching and lifecycle management
+   */
+  async getMediaElementSource(
+    audioContext: AudioContext,
+  ): Promise<MediaElementAudioSourceNode> {
+    return this.audioElementFactory.createMediaElementSource(
+      audioContext,
+      this.mediaSourceService,
+    );
   }
 
-  return resampledData;
-}
-
-function interpolateData(data: Uint8Array, targetSize: number) {
-  const resampled = new Uint8Array(targetSize);
-  const dataLength = data.length;
+  disconnectedCallback(): void {
+    super.disconnectedCallback?.();
 
-  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;
+    // Clean up MediaSource service
+    this.mediaSourceService.cleanup();
 
-    // 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,
-      );
-    }
+    // Clear audio element factory cache
+    this.audioElementFactory.clearCache();
   }
-
-  return resampled;
 }