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

package/dist/elements/EFMedia.js

@@ -1,697 +1,218 @@
-import { Task } from "@lit/task";
-import { deepArrayEquals } from "@lit/task/deep-equals.js";
-import debug from "debug";
-import { css, LitElement } from "lit";
-import { property, state } from "lit/decorators.js";
-import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
-import { MP4File } from "@editframe/assets/MP4File.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { UrlGenerator } from "../transcoding/utils/UrlGenerator.js";
+import { makeMediaEngineTask } from "./EFMedia/tasks/makeMediaEngineTask.js";
+import { makeAudioBufferTask } from "./EFMedia/audioTasks/makeAudioBufferTask.js";
+import { makeAudioFrequencyAnalysisTask } from "./EFMedia/audioTasks/makeAudioFrequencyAnalysisTask.js";
+import { makeAudioInitSegmentFetchTask } from "./EFMedia/audioTasks/makeAudioInitSegmentFetchTask.js";
+import { makeAudioInputTask } from "./EFMedia/audioTasks/makeAudioInputTask.js";
+import { makeAudioSeekTask } from "./EFMedia/audioTasks/makeAudioSeekTask.js";
+import { makeAudioSegmentFetchTask } from "./EFMedia/audioTasks/makeAudioSegmentFetchTask.js";
+import { makeAudioSegmentIdTask } from "./EFMedia/audioTasks/makeAudioSegmentIdTask.js";
+import { makeAudioTimeDomainAnalysisTask } from "./EFMedia/audioTasks/makeAudioTimeDomainAnalysisTask.js";
+import { AudioElementFactory } from "./EFMedia/services/AudioElementFactory.js";
+import { MediaSourceService } from "./EFMedia/services/MediaSourceService.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { EFTargetable } from "./TargetController.js";
 import { updateAnimations } from "./updateAnimations.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const log = debug("ef:elements:EFMedia");
+import { LitElement, css } from "lit";
+import { property, state } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
 const freqWeightsCache = /* @__PURE__ */ new Map();
-class LRUCache {
-  constructor(maxSize) {
-    this.cache = /* @__PURE__ */ new Map();
-    this.maxSize = maxSize;
-  }
-  get(key) {
-    const value = this.cache.get(key);
-    if (value) {
-      this.cache.delete(key);
-      this.cache.set(key, value);
-    }
-    return value;
-  }
-  set(key, value) {
-    if (this.cache.has(key)) {
-      this.cache.delete(key);
-    } else if (this.cache.size >= this.maxSize) {
-      const firstKey = this.cache.keys().next().value;
-      if (firstKey) {
-        this.cache.delete(firstKey);
-      }
-    }
-    this.cache.set(key, value);
-  }
-}
+var IgnorableError = class extends Error {};
 const deepGetMediaElements = (element, medias = []) => {
-  for (const child of Array.from(element.children)) {
-    if (child instanceof EFMedia) {
-      medias.push(child);
-    } else {
-      deepGetMediaElements(child, medias);
-    }
-  }
-  return medias;
+	for (const child of Array.from(element.children)) if (child instanceof EFMedia) medias.push(child);
+	else deepGetMediaElements(child, medias);
+	return medias;
 };
-const _EFMedia = class _EFMedia2 extends EFTargetable(
-  EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
-    assetType: "isobmff_files"
-  })
-) {
-  constructor() {
-    super(...arguments);
-    this.currentTimeMs = 0;
-    this.#assetId = null;
-    this.trackFragmentIndexLoader = new Task(this, {
-      args: () => [this.fragmentIndexPath(), this.fetch],
-      task: async ([fragmentIndexPath, fetch], { signal }) => {
-        try {
-          const response = await fetch(fragmentIndexPath, { signal });
-          return await response.json();
-        } catch (error) {
-          log("Failed to load track fragment index", error);
-          return void 0;
-        }
-      },
-      onComplete: () => {
-        this.requestUpdate("intrinsicDurationMs");
-        this.requestUpdate("ownCurrentTimeMs");
-        this.rootTimegroup?.requestUpdate("ownCurrentTimeMs");
-        this.rootTimegroup?.requestUpdate("durationMs");
-      }
-    });
-    this.initSegmentsLoader = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [this.trackFragmentIndexLoader.value, this.src, this.fetch],
-      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();
-            buffer.fileStart = 0;
-            const mp4File = new MP4File();
-            mp4File.appendBuffer(buffer, true);
-            mp4File.flush();
-            await mp4File.readyPromise;
-            return { trackId, buffer, mp4File };
-          })
-        );
-      }
-    });
-    this.seekTask = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [
-        this.desiredSeekTimeMs,
-        this.trackFragmentIndexLoader.value,
-        this.initSegmentsLoader.value
-      ],
-      task: async ([seekToMs, fragmentIndex, initSegments], { signal: _signal }) => {
-        if (fragmentIndex === void 0) {
-          return;
-        }
-        if (initSegments === void 0) {
-          return;
-        }
-        const result = {};
-        for (const index of Object.values(fragmentIndex)) {
-          const track = initSegments.find((segment2) => segment2.trackId === String(index.track))?.mp4File.getInfo().tracks[0];
-          if (!track) {
-            throw new Error("Could not finding matching track");
-          }
-          const segment = index.segments.toReversed().find((segment2) => {
-            return segment2.dts / track.timescale * 1e3 <= seekToMs;
-          });
-          const nextSegment = index.segments.find((segment2) => {
-            return segment2.dts / track.timescale * 1e3 > seekToMs;
-          });
-          if (!segment) {
-            return;
-          }
-          result[index.track] = { segment, track, nextSegment };
-        }
-        return result;
-      }
-    });
-    this.fetchSeekTask = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      argsEqual: deepArrayEquals,
-      args: () => [this.initSegmentsLoader.value, this.seekTask.value, this.fetch],
-      task: async ([initSegments, seekResult, fetch], { signal }) => {
-        if (!initSegments) {
-          return;
-        }
-        if (!seekResult) {
-          return;
-        }
-        const files = {};
-        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(
-            (initSegment2) => initSegment2.trackId === String(track.id)
-          );
-          if (!initSegment) {
-            throw new Error("Could not find matching init segment");
-          }
-          const initBuffer = initSegment.buffer;
-          const mediaBuffer = await response.arrayBuffer();
-          files[trackId] = new File([initBuffer, mediaBuffer], "video.mp4", {
-            type: "video/mp4"
-          });
-        }
-        return files;
-      }
-    });
-    this.videoAssetTask = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [this.fetchSeekTask.value],
-      task: async ([files], { signal: _signal }) => {
-        if (!files) {
-          return;
-        }
-        if (!this.defaultVideoTrackId) {
-          return;
-        }
-        const videoFile = files[this.defaultVideoTrackId];
-        if (!videoFile) {
-          return;
-        }
-        for (const frame of this.videoAssetTask.value?.decodedFrames || []) {
-          frame.close();
-        }
-        this.videoAssetTask.value?.videoDecoder?.close();
-        return await VideoAsset.createFromReadableStream(
-          "video.mp4",
-          videoFile.stream(),
-          videoFile
-        );
-      }
-    });
-    this.desiredSeekTimeMs = 0;
-    this.#audioContext = new OfflineAudioContext(2, 48e3 / 30, 48e3);
-    this.audioBufferTask = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [this.fetchSeekTask.value, this.seekTask.value],
-      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 * 1e3
-        };
-      }
-    });
-    this.#byteTimeDomainCache = new LRUCache(100);
-    this.byteTimeDomainTask = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [
-        this.audioBufferTask.status,
-        this.currentSourceTimeMs,
-        this.fftSize,
-        this.fftDecay,
-        this.fftGain,
-        this.shouldInterpolateFrequencies
-      ],
-      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;
-        const framesData = await Promise.all(
-          Array.from({ length: this.fftDecay }, async (_, frameIndex) => {
-            const frameOffset = frameIndex * (1e3 / 30);
-            const startTime = Math.max(
-              0,
-              (currentTimeMs - frameOffset - startOffsetMs) / 1e3
-            );
-            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,
-              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 = this.fftGain;
-            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 = 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 {
-              source.disconnect();
-              analyser.disconnect();
-            }
-          })
-        );
-        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 = _EFMedia2.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;
-      }
-    });
-    this.#frequencyDataCache = new LRUCache(100);
-    this.frequencyDataTask = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [
-        this.audioBufferTask.status,
-        this.currentSourceTimeMs,
-        this.fftSize,
-        this.fftDecay,
-        this.fftGain,
-        this.shouldInterpolateFrequencies
-      ],
-      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 * (1e3 / 30);
-            const startTime = Math.max(
-              0,
-              (currentTimeMs - frameOffset - startOffsetMs) / 1e3
-            );
-            const cacheKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftGain}:${startOffsetMs}:${startTime}`;
-            const cachedFrame = this.#frequencyDataCache.get(cacheKey);
-            if (cachedFrame) {
-              return cachedFrame;
-            }
-            const audioContext = new OfflineAudioContext(
-              2,
-              48e3 * (1 / 30),
-              48e3
-            );
-            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 = 15e3;
-            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);
-              this.#frequencyDataCache.set(cacheKey, frameData);
-              return frameData;
-            } finally {
-              audioBufferSource.disconnect();
-              analyser.disconnect();
-            }
-          })
-        );
-        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 = _EFMedia2.DECAY_WEIGHT ** frameIndex;
-            weightedSum += frame[i] * decayWeight;
-            weightSum += decayWeight;
-          });
-          smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
-        }
-        smoothedData.forEach((value, i) => {
-          const freqWeight = this.FREQ_WEIGHTS[i];
-          smoothedData[i] = Math.min(255, Math.round(value * freqWeight));
-        });
-        const slicedData = smoothedData.slice(
-          0,
-          Math.floor(smoothedData.length / 2)
-        );
-        const processedData = this.shouldInterpolateFrequencies ? processFFTData(slicedData) : slicedData;
-        this.#frequencyDataCache.set(smoothedKey, processedData);
-        return processedData;
-      }
-    });
-  }
-  static {
-    this.styles = [
-      css`
+var EFMedia = class extends EFTargetable(EFSourceMixin(EFTemporal(FetchMixin(LitElement)), { assetType: "isobmff_files" })) {
+	constructor(..._args) {
+		super(..._args);
+		this.mediaSourceService = new MediaSourceService({
+			onError: (error) => {
+				console.error("🎵 [EFMedia] MediaSourceService error:", error);
+			},
+			onReady: () => {}
+		});
+		this.audioElementFactory = new AudioElementFactory();
+		this.currentTimeMs = 0;
+		this.audioBufferDurationMs = 3e4;
+		this.maxAudioBufferFetches = 2;
+		this.enableAudioBuffering = true;
+		this.mute = false;
+		this.fftSize = 128;
+		this.fftDecay = 8;
+		this.fftGain = 3;
+		this.interpolateFrequencies = false;
+		this.mediaEngineTask = makeMediaEngineTask(this);
+		this.audioSegmentIdTask = makeAudioSegmentIdTask(this);
+		this.audioInitSegmentFetchTask = makeAudioInitSegmentFetchTask(this);
+		this.audioSegmentFetchTask = makeAudioSegmentFetchTask(this);
+		this.audioInputTask = makeAudioInputTask(this);
+		this.audioSeekTask = makeAudioSeekTask(this);
+		this.audioBufferTask = makeAudioBufferTask(this);
+		this.byteTimeDomainTask = makeAudioTimeDomainAnalysisTask(this);
+		this.frequencyDataTask = makeAudioFrequencyAnalysisTask(this);
+		this.assetId = null;
+		this._desiredSeekTimeMs = 0;
+	}
+	static {
+		this.VIDEO_SAMPLE_BUFFER_SIZE = 30;
+	}
+	static {
+		this.AUDIO_SAMPLE_BUFFER_SIZE = 120;
+	}
+	static get observedAttributes() {
+		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"
+		];
+	}
+	static {
+		this.styles = [css`
       :host {
         display: block;
         position: relative;
         overflow: hidden;
       }
-    `
-    ];
-  }
-  #assetId;
-  set assetId(value) {
-    this.#assetId = value;
-  }
-  get assetId() {
-    return this.#assetId || this.getAttribute("asset-id");
-  }
-  fragmentIndexPath() {
-    if (this.assetId) {
-      return `${this.apiHost}/api/v1/isobmff_files/${this.assetId}/index`;
-    }
-    return `/@ef-track-fragment-index/${this.src ?? ""}`;
-  }
-  fragmentTrackPath(trackId) {
-    if (this.assetId) {
-      return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
-    }
-    return `/@ef-track/${this.src ?? ""}?trackId=${trackId}`;
-  }
-  get defaultVideoTrackId() {
-    return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
-      (track) => track.type === "video"
-    )?.track;
-  }
-  get defaultAudioTrackId() {
-    return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
-      (track) => track.type === "audio"
-    )?.track;
-  }
-  async executeSeek(seekToMs) {
-    this.desiredSeekTimeMs = seekToMs;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("ownCurrentTimeMs")) {
-      this.executeSeek(this.currentSourceTimeMs);
-    }
-    if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
-      updateAnimations(this);
-    }
-  }
-  get hasOwnDuration() {
-    return true;
-  }
-  get intrinsicDurationMs() {
-    if (!this.trackFragmentIndexLoader.value) {
-      return 0;
-    }
-    const durations = Object.values(this.trackFragmentIndexLoader.value).map(
-      (track) => {
-        return track.duration / track.timescale * 1e3;
-      }
-    );
-    if (durations.length === 0) {
-      return 0;
-    }
-    return Math.max(...durations);
-  }
-  #audioContext;
-  async fetchAudioSpanningTime(fromMs, toMs) {
-    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;
-    }
-    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 / 1e3;
-        const segmentEndsAfterStart = segment.dts + segment.duration >= fromMs * audioTrackIndex.timescale / 1e3;
-        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 * 1e3 - (this.trimStartMs ?? 0),
-      endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3 - (this.trimEndMs ?? 0)
-    };
-  }
-  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);
-  }
-  get fftDecay() {
-    return Number.parseInt(this.getAttribute("fft-decay") ?? "8", 10);
-  }
-  set interpolateFrequencies(value) {
-    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;
-  }
-  static {
-    this.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)) {
-      return freqWeightsCache.get(this.fftSize);
-    }
-    const weights = new Float32Array(this.fftSize / 2).map((_, i) => {
-      const frequency = i * 48e3 / this.fftSize;
-      if (frequency < 60) return 0.3;
-      if (frequency < 250) return 0.4;
-      if (frequency < 500) return 0.6;
-      if (frequency < 2e3) return 0.8;
-      if (frequency < 4e3) return 1.2;
-      if (frequency < 8e3) return 1.6;
-      return 2;
-    });
-    freqWeightsCache.set(this.fftSize, weights);
-    return weights;
-  }
-  #byteTimeDomainCache;
-  #frequencyDataCache;
-  set fftGain(value) {
-    const oldValue = this.fftGain;
-    this.setAttribute("fft-gain", String(value));
-    this.requestUpdate("fft-gain", oldValue);
-  }
-  get fftGain() {
-    return Number.parseFloat(this.getAttribute("fft-gain") ?? "3.0");
-  }
-};
-__decorateClass([
-  property({ type: Number })
-], _EFMedia.prototype, "currentTimeMs", 2);
-__decorateClass([
-  property({ type: String, attribute: "asset-id", reflect: true })
-], _EFMedia.prototype, "assetId", 1);
-__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);
-  const attenuationStartIndex = Math.floor(totalBins * 0.9);
-  for (let i = attenuationStartIndex; i < totalBins; i++) {
-    const attenuationProgress = (i - attenuationStartIndex) / (totalBins - attenuationStartIndex) + 0.2;
-    const attenuationFactor = Math.max(0, 1 - attenuationProgress);
-    resampledData[i] = Math.floor(resampledData[i] * attenuationFactor);
-  }
-  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
+    `];
+	}
+	get FREQ_WEIGHTS() {
+		if (freqWeightsCache.has(this.fftSize)) return freqWeightsCache.get(this.fftSize);
+		const weights = new Float32Array(this.fftSize / 2).map((_, i) => {
+			const frequency = i * 48e3 / this.fftSize;
+			if (frequency < 60) return .3;
+			if (frequency < 250) return .4;
+			if (frequency < 500) return .6;
+			if (frequency < 2e3) return .8;
+			if (frequency < 4e3) return 1.2;
+			if (frequency < 8e3) return 1.6;
+			return 2;
+		});
+		freqWeightsCache.set(this.fftSize, weights);
+		return weights;
+	}
+	get shouldInterpolateFrequencies() {
+		return this.interpolateFrequencies;
+	}
+	get urlGenerator() {
+		return new UrlGenerator(() => this.apiHost ?? "");
+	}
+	get intrinsicDurationMs() {
+		return this.mediaEngineTask.value?.durationMs ?? 0;
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("ownCurrentTimeMs")) this.executeSeek(this.currentSourceTimeMs);
+		if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) updateAnimations(this);
+	}
+	get hasOwnDuration() {
+		return true;
+	}
+	get desiredSeekTimeMs() {
+		return this._desiredSeekTimeMs;
+	}
+	set desiredSeekTimeMs(value) {
+		if (this._desiredSeekTimeMs !== value) this._desiredSeekTimeMs = value;
+	}
+	async executeSeek(seekToMs) {
+		this.desiredSeekTimeMs = seekToMs;
+	}
+	/**
+	* Main integration method for EFTimegroup audio playback
+	* Now powered by clean, testable utility functions
+	*/
+	async fetchAudioSpanningTime(fromMs, toMs, signal = new AbortController().signal) {
+		await this.mediaSourceService.initialize();
+		const { fetchAudioSpanningTime: fetchAudioSpan } = await import("./EFMedia/shared/AudioSpanUtils.js");
+		return fetchAudioSpan(this, fromMs, toMs, signal);
+	}
+	/**
+	* Get the HTML audio element for ContextMixin integration
+	*/
+	get audioElement() {
+		return this.mediaSourceService.getAudioElement();
+	}
+	/**
+	* Check if an audio segment is cached in the unified buffer system
+	* Now uses the same caching approach as video for consistency
+	*/
+	getCachedAudioSegment(segmentId) {
+		return this.audioBufferTask.value?.cachedSegments.has(segmentId) ?? false;
+	}
+	/**
+	* Get cached audio segments from the unified buffer system
+	* Now uses the same caching approach as video for consistency
+	*/
+	getCachedAudioSegments(segmentIds) {
+		const bufferState = this.audioBufferTask.value;
+		if (!bufferState) return /* @__PURE__ */ new Set();
+		return new Set(segmentIds.filter((id) => bufferState.cachedSegments.has(id)));
+	}
+	/**
+	* Get MediaElementAudioSourceNode for ContextMixin integration
+	* Uses AudioElementFactory for proper caching and lifecycle management
+	*/
+	async getMediaElementSource(audioContext) {
+		return this.audioElementFactory.createMediaElementSource(audioContext, this.mediaSourceService);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback?.();
+		this.mediaSourceService.cleanup();
+		this.audioElementFactory.clearCache();
+	}
 };
+_decorate([property({ type: Number })], EFMedia.prototype, "currentTimeMs", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "audio-buffer-duration"
+})], EFMedia.prototype, "audioBufferDurationMs", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "max-audio-buffer-fetches"
+})], EFMedia.prototype, "maxAudioBufferFetches", void 0);
+_decorate([property({
+	type: Boolean,
+	attribute: "enable-audio-buffering"
+})], EFMedia.prototype, "enableAudioBuffering", void 0);
+_decorate([property({
+	type: Boolean,
+	attribute: "mute",
+	reflect: true
+})], EFMedia.prototype, "mute", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "fft-size",
+	reflect: true
+})], EFMedia.prototype, "fftSize", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "fft-decay",
+	reflect: true
+})], EFMedia.prototype, "fftDecay", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "fft-gain",
+	reflect: true
+})], EFMedia.prototype, "fftGain", void 0);
+_decorate([property({
+	type: Boolean,
+	attribute: "interpolate-frequencies",
+	reflect: true
+})], EFMedia.prototype, "interpolateFrequencies", void 0);
+_decorate([property({
+	type: String,
+	attribute: "asset-id",
+	reflect: true
+})], EFMedia.prototype, "assetId", void 0);
+_decorate([state()], EFMedia.prototype, "_desiredSeekTimeMs", void 0);
+export { EFMedia, IgnorableError, deepGetMediaElements };