Time Coordinates in Editframe

Editframe provides three different time coordinate systems to solve a fundamental problem: different use cases need different perspectives on time, and a single coordinate system forces compromises.

The Problem with Single Time Systems

Using a single time coordinate (e.g., "playback time" or "source time") creates problems:

• Trimming breaks tracking: If you track audio events using playback time, adding a trim offset breaks the tracking data
• Composition complexity: When audio clips are combined in sequences, local timing gets lost
• Effect scoping: Animations tied to playback time can't be reused across different compositions

Three Coordinate Systems

Editframe's multi-coordinate architecture solves these problems by providing the right time perspective for each use case.

Timeline Time (Root Timegroup Relative)

Properties: startTimeMs, endTimeMs, currentTimeMs, durationMs

Purpose: Coordinate multiple elements on a shared timeline.

Use case: "When does this audio play relative to other elements?"

<ef-timegroup mode="sequence">
  <ef-audio src="..." id="first"></ef-audio>
  <ef-audio src="..." id="second"></ef-audio>
</ef-timegroup>

Element Time (Element-Scoped)

Property: ownCurrentTimeMs

Purpose: Reusable effects that work regardless of composition context.

Use case: "Animate this audio's volume from 0 to 1 over its own duration, regardless of when it appears in the timeline."

Source Time (Trimming-Agnostic)

Property: currentSourceTimeMs

Purpose: Track data aligned with the source file, unaffected by trimming.

Use case: "Track audio events at source time 5.2s — this tracking remains valid even if I trim the audio later."

<ef-audio src="..." trimstart="2s" id="trimmed-audio"></ef-audio>
<script>
  document.getElementById('trimmed-audio').addEventListener('timeupdate', (e) => {
    // currentSourceTimeMs accounts for trimstart automatically
    if (e.target.currentSourceTimeMs >= 5200) {
      triggerEvent(); // Fires at source time 5.2s, regardless of trim
    }
  });
</script>

By providing three coordinate systems, Editframe enables robust tracking that survives trim operations, reusable effects across compositions, and precise coordination between multiple elements. Without this architecture, developers must manually calculate offsets or maintain separate tracking systems.