@remotion/media 4.0.431 → 4.0.433

package/dist/esm/index.mjs

@@ -37,19 +37,12 @@ var __callDispose = (stack, error, hasError) => {
 };
 
 // src/audio/audio.tsx
-import { Internals as Internals15, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
+import { Internals as Internals19, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
 
 // src/audio/audio-for-preview.tsx
+import { useContext as useContext3, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 import {
-  useContext as useContext2,
-  useEffect as useEffect2,
-  useLayoutEffect,
-  useMemo as useMemo2,
-  useRef,
-  useState as useState2
-} from "react";
-import {
-  Internals as Internals6,
+  Internals as Internals10,
   Audio as RemotionAudio,
   useBufferState,
   useCurrentFrame as useCurrentFrame2,
@@ -109,27 +102,65 @@ var calculateEndTime = ({
 
 // src/media-player.ts
 import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals6 } from "remotion";
 
 // src/audio-iterator-manager.ts
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
+import { Internals as Internals4 } from "remotion";
+
+// src/audio/audio-preview-iterator.ts
+import { Internals as Internals3 } from "remotion";
 
 // src/helpers/round-to-4-digits.ts
 var roundTo4Digits = (timestamp) => {
   return Math.round(timestamp * 1000) / 1000;
 };
 
+// src/set-global-time-anchor.ts
+import { Internals as Internals2 } from "remotion";
+var ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
+var setGlobalTimeAnchor = ({
+  audioContext,
+  audioSyncAnchor,
+  absoluteTimeInSeconds,
+  globalPlaybackRate,
+  debugAudioScheduling,
+  logLevel
+}) => {
+  const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
+  const shift = (newAnchor - audioSyncAnchor.value) * globalPlaybackRate;
+  if (Math.abs(shift) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT) {
+    return;
+  }
+  if (debugAudioScheduling) {
+    Internals2.Log.info({ logLevel, tag: "audio-scheduling" }, "Anchor changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
+  }
+  audioSyncAnchor.value = newAnchor;
+};
+
 // src/audio/audio-preview-iterator.ts
-var makeAudioIterator = (startFromSecond, cache) => {
+var makeAudioIterator = (startFromSecond, maximumTimestamp, cache, debugAudioScheduling) => {
   let destroyed = false;
-  const iterator = cache.makeIteratorOrUsePrewarmed(startFromSecond);
+  const iterator = cache.makeIteratorOrUsePrewarmed(startFromSecond, maximumTimestamp);
   const queuedAudioNodes = [];
   const audioChunksForAfterResuming = [];
   let mostRecentTimestamp = -Infinity;
   let pendingNext = null;
-  const cleanupAudioQueue = () => {
+  const cleanupAudioQueue = (audioContext) => {
     for (const node of queuedAudioNodes) {
-      node.node.stop();
+      try {
+        const currentlyHearing = audioContext.getOutputTimestamp().contextTime;
+        const nodeEndTime = node.scheduledTime + node.buffer.duration / node.playbackRate;
+        const isAlreadyPlaying = node.scheduledTime - ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT < audioContext.currentTime;
+        const shouldKeep = isAlreadyPlaying;
+        if (shouldKeep) {
+          continue;
+        }
+        if (debugAudioScheduling) {
+          Internals3.Log.info({ logLevel: "trace", tag: "audio-scheduling" }, `Stopping node ${node.timestamp.toFixed(3)}, currently hearing = ${currentlyHearing.toFixed(3)} currentTime = ${audioContext.currentTime.toFixed(3)} nodeEndTime = ${nodeEndTime.toFixed(3)} scheduledTime = ${node.scheduledTime.toFixed(3)}`);
+        }
+        node.node.stop();
+      } catch {}
     }
     queuedAudioNodes.length = 0;
   };
@@ -238,26 +269,34 @@ var makeAudioIterator = (startFromSecond, cache) => {
   const removeAndReturnAllQueuedAudioNodes = () => {
     const nodes = queuedAudioNodes.slice();
     for (const node of nodes) {
-      node.node.stop();
+      try {
+        node.node.stop();
+      } catch {}
     }
     queuedAudioNodes.length = 0;
     return nodes;
   };
-  const addChunkForAfterResuming = (buffer, timestamp, maxDuration) => {
-    audioChunksForAfterResuming.push({ buffer, timestamp, maxDuration });
+  const addChunkForAfterResuming = (buffer, timestamp) => {
+    audioChunksForAfterResuming.push({
+      buffer,
+      timestamp
+    });
   };
   const moveQueuedChunksToPauseQueue = () => {
     const toQueue = removeAndReturnAllQueuedAudioNodes();
     for (const chunk of toQueue) {
-      addChunkForAfterResuming(chunk.buffer, chunk.timestamp, chunk.maxDuration);
+      addChunkForAfterResuming(chunk.buffer, chunk.timestamp);
+    }
+    if (debugAudioScheduling && toQueue.length > 0) {
+      Internals3.Log.trace({ logLevel: "trace", tag: "audio-scheduling" }, `Moved ${toQueue.length} ${toQueue.length === 1 ? "chunk" : "chunks"} to pause queue (${toQueue[0].timestamp.toFixed(3)}-${toQueue[toQueue.length - 1].timestamp + toQueue[toQueue.length - 1].buffer.duration.toFixed(3)})`);
     }
   };
   const getNumberOfChunksAfterResuming = () => {
     return audioChunksForAfterResuming.length;
   };
   return {
-    destroy: () => {
-      cleanupAudioQueue();
+    destroy: (audioContext) => {
+      cleanupAudioQueue(audioContext);
       destroyed = true;
       iterator.return().catch(() => {
         return;
@@ -274,8 +313,20 @@ var makeAudioIterator = (startFromSecond, cache) => {
     isDestroyed: () => {
       return destroyed;
     },
-    addQueuedAudioNode: (node, timestamp, buffer, maxDuration) => {
-      queuedAudioNodes.push({ node, timestamp, buffer, maxDuration });
+    addQueuedAudioNode: ({
+      node,
+      timestamp,
+      buffer,
+      scheduledTime,
+      playbackRate
+    }) => {
+      queuedAudioNodes.push({
+        node,
+        timestamp,
+        buffer,
+        scheduledTime,
+        playbackRate
+      });
     },
     removeQueuedAudioNode: (node) => {
       const index = queuedAudioNodes.findIndex((n) => n.node === node);
@@ -321,6 +372,122 @@ var isAlreadyQueued = (time, queuedPeriod) => {
   return time >= queuedPeriod.from && time < queuedPeriod.until;
 };
 
+// src/make-iterator-with-priming.ts
+var AUDIO_PRIMING_SECONDS = 0.5;
+var PREDECODE_AHEAD_SECONDS = 8;
+function makePredecodingIterator(inner) {
+  const buffer = [];
+  let consumerEndTime = 0;
+  let innerDone = false;
+  let returned = false;
+  let fetching = false;
+  let waiter = null;
+  const prefetch = () => {
+    if (fetching || returned || innerDone) {
+      return;
+    }
+    const lastBuffered = buffer.length > 0 ? buffer[buffer.length - 1] : null;
+    const bufferedEndTime = lastBuffered ? lastBuffered.timestamp + lastBuffered.duration : consumerEndTime;
+    if (bufferedEndTime >= consumerEndTime + PREDECODE_AHEAD_SECONDS) {
+      return;
+    }
+    fetching = true;
+    inner.next().then((result) => {
+      fetching = false;
+      if (returned) {
+        return;
+      }
+      if (result.done) {
+        innerDone = true;
+        if (waiter) {
+          const w = waiter;
+          waiter = null;
+          w({ value: undefined, done: true });
+        }
+        return;
+      }
+      if (waiter) {
+        const w = waiter;
+        waiter = null;
+        const buf = result.value;
+        consumerEndTime = buf.timestamp + buf.duration;
+        w({ value: buf, done: false });
+        prefetch();
+        return;
+      }
+      buffer.push(result.value);
+      prefetch();
+    }, () => {
+      fetching = false;
+      innerDone = true;
+      if (waiter) {
+        const w = waiter;
+        waiter = null;
+        w({ value: undefined, done: true });
+      }
+    });
+  };
+  prefetch();
+  const _return = () => {
+    returned = true;
+    buffer.length = 0;
+    if (waiter) {
+      const w = waiter;
+      waiter = null;
+      w({ value: undefined, done: true });
+    }
+    inner.return(undefined);
+    return Promise.resolve({ value: undefined, done: true });
+  };
+  const iterator = {
+    next() {
+      if (buffer.length > 0) {
+        const buf = buffer.shift();
+        consumerEndTime = buf.timestamp + buf.duration;
+        prefetch();
+        return Promise.resolve({ value: buf, done: false });
+      }
+      if (innerDone) {
+        return Promise.resolve({
+          value: undefined,
+          done: true
+        });
+      }
+      return new Promise((resolve) => {
+        waiter = resolve;
+        prefetch();
+      });
+    },
+    return: _return,
+    throw(e) {
+      returned = true;
+      buffer.length = 0;
+      return inner.throw(e);
+    },
+    [Symbol.asyncIterator]() {
+      return iterator;
+    }
+  };
+  return iterator;
+}
+async function* makeIteratorWithPrimingInner(audioSink, timeToSeek, maximumTimestamp) {
+  const primingStart = Math.max(0, timeToSeek - AUDIO_PRIMING_SECONDS);
+  const iterator = audioSink.buffers(primingStart, maximumTimestamp);
+  for await (const buffer of iterator) {
+    if (buffer.timestamp + buffer.duration <= timeToSeek) {
+      continue;
+    }
+    yield buffer;
+  }
+}
+var makeIteratorWithPriming = ({
+  audioSink,
+  timeToSeek,
+  maximumTimestamp
+}) => {
+  return makePredecodingIterator(makeIteratorWithPrimingInner(audioSink, timeToSeek, maximumTimestamp));
+};
+
 // src/prewarm-iterator-for-looping.ts
 var makePrewarmedVideoIteratorCache = (videoSink) => {
   const prewarmedVideoIterators = new Map;
@@ -350,20 +517,30 @@ var makePrewarmedVideoIteratorCache = (videoSink) => {
     destroy
   };
 };
+var makeKey = (timeToSeek, maximumTimestamp) => {
+  return `${timeToSeek}-${maximumTimestamp}`;
+};
 var makePrewarmedAudioIteratorCache = (audioSink) => {
   const prewarmedAudioIterators = new Map;
-  const prewarmIteratorForLooping = ({ timeToSeek }) => {
-    if (!prewarmedAudioIterators.has(timeToSeek)) {
-      prewarmedAudioIterators.set(timeToSeek, audioSink.buffers(timeToSeek));
+  const prewarmIteratorForLooping = ({
+    timeToSeek,
+    maximumTimestamp
+  }) => {
+    if (!prewarmedAudioIterators.has(makeKey(timeToSeek, maximumTimestamp))) {
+      prewarmedAudioIterators.set(makeKey(timeToSeek, maximumTimestamp), makeIteratorWithPriming({ audioSink, timeToSeek, maximumTimestamp }));
     }
   };
-  const makeIteratorOrUsePrewarmed = (timeToSeek) => {
-    const prewarmedIterator = prewarmedAudioIterators.get(timeToSeek);
+  const makeIteratorOrUsePrewarmed = (timeToSeek, maximumTimestamp) => {
+    const prewarmedIterator = prewarmedAudioIterators.get(makeKey(timeToSeek, maximumTimestamp));
     if (prewarmedIterator) {
-      prewarmedAudioIterators.delete(timeToSeek);
+      prewarmedAudioIterators.delete(makeKey(timeToSeek, maximumTimestamp));
       return prewarmedIterator;
     }
-    const iterator = audioSink.buffers(timeToSeek);
+    const iterator = makeIteratorWithPriming({
+      audioSink,
+      timeToSeek,
+      maximumTimestamp
+    });
     return iterator;
   };
   const destroy = () => {
@@ -405,11 +582,14 @@ var audioIteratorManager = ({
     mediaTimestamp,
     playbackRate,
     scheduleAudioNode,
-    maxDuration
+    debugAudioScheduling
   }) => {
     if (!audioBufferIterator) {
       throw new Error("Audio buffer iterator not found");
     }
+    if (sharedAudioContext.state !== "running") {
+      throw new Error("Tried to schedule node while audio context is not running");
+    }
     if (muted) {
       return;
     }
@@ -417,42 +597,88 @@ var audioIteratorManager = ({
     node.buffer = buffer;
     node.playbackRate.value = playbackRate;
     node.connect(gainNode);
-    scheduleAudioNode(node, mediaTimestamp, maxDuration);
+    const started = scheduleAudioNode(node, mediaTimestamp);
+    if (started.type === "not-started") {
+      if (debugAudioScheduling) {
+        Internals4.Log.info({ logLevel: "trace", tag: "audio-scheduling" }, "not started, disconnected: %s %s", mediaTimestamp.toFixed(3), buffer.duration.toFixed(3));
+      }
+      node.disconnect();
+      return;
+    }
     const iterator = audioBufferIterator;
-    iterator.addQueuedAudioNode(node, mediaTimestamp, buffer, maxDuration);
+    iterator.addQueuedAudioNode({
+      node,
+      timestamp: mediaTimestamp,
+      buffer,
+      scheduledTime: started.scheduledTime,
+      playbackRate
+    });
     node.onended = () => {
       setTimeout(() => {
         iterator.removeQueuedAudioNode(node);
       }, 30);
     };
   };
+  const resumeScheduledAudioChunks = ({
+    playbackRate,
+    scheduleAudioNode,
+    debugAudioScheduling
+  }) => {
+    if (muted) {
+      return;
+    }
+    if (!audioBufferIterator) {
+      return;
+    }
+    for (const chunk of audioBufferIterator.getAndClearAudioChunksForAfterResuming()) {
+      scheduleAudioChunk({
+        buffer: chunk.buffer,
+        mediaTimestamp: chunk.timestamp,
+        playbackRate,
+        scheduleAudioNode,
+        debugAudioScheduling
+      });
+    }
+  };
   const onAudioChunk = ({
     getIsPlaying,
     buffer,
     playbackRate,
-    scheduleAudioNode
+    scheduleAudioNode,
+    debugAudioScheduling
   }) => {
     if (muted) {
       return;
     }
+    const startTime = getStartTime();
     const endTime = getEndTime();
+    if (buffer.timestamp + buffer.duration <= startTime) {
+      return;
+    }
     if (buffer.timestamp >= endTime) {
       return;
     }
-    const maxDuration = buffer.timestamp + buffer.duration > endTime ? endTime - buffer.timestamp : null;
-    if (getIsPlaying()) {
+    if (getIsPlaying() && sharedAudioContext.state === "running" && (sharedAudioContext.getOutputTimestamp().contextTime ?? 0) > 0) {
+      resumeScheduledAudioChunks({
+        playbackRate,
+        scheduleAudioNode,
+        debugAudioScheduling
+      });
       scheduleAudioChunk({
         buffer: buffer.buffer,
         mediaTimestamp: buffer.timestamp,
         playbackRate,
         scheduleAudioNode,
-        maxDuration
+        debugAudioScheduling
       });
     } else {
       if (!audioBufferIterator) {
         throw new Error("Audio buffer iterator not found");
       }
-      audioBufferIterator.addChunkForAfterResuming(buffer.buffer, buffer.timestamp, maxDuration);
+      if (debugAudioScheduling) {
+        Internals4.Log.info({ logLevel: "trace", tag: "audio-scheduling" }, "not ready, added to queue: %s %s", buffer.timestamp.toFixed(3), buffer.duration.toFixed(3));
+      }
+      audioBufferIterator.addChunkForAfterResuming(buffer.buffer, buffer.timestamp);
     }
     drawDebugOverlay();
   };
@@ -461,17 +687,18 @@ var audioIteratorManager = ({
     playbackRate,
     startFromSecond,
     getIsPlaying,
-    scheduleAudioNode
+    scheduleAudioNode,
+    debugAudioScheduling
   }) => {
     let __stack = [];
     try {
       if (muted) {
         return;
       }
-      audioBufferIterator?.destroy();
+      audioBufferIterator?.destroy(sharedAudioContext);
       const delayHandle = __using(__stack, delayPlaybackHandleIfNotPremounting(), 0);
       currentDelayHandle = delayHandle;
-      const iterator = makeAudioIterator(startFromSecond, prewarmedAudioIteratorCache);
+      const iterator = makeAudioIterator(startFromSecond, getEndTime(), prewarmedAudioIteratorCache, debugAudioScheduling);
       audioIteratorsCreated++;
       audioBufferIterator = iterator;
       try {
@@ -490,7 +717,8 @@ var audioIteratorManager = ({
             getIsPlaying,
             buffer: result.value,
             playbackRate,
-            scheduleAudioNode
+            scheduleAudioNode,
+            debugAudioScheduling
           });
         }
         await iterator.bufferAsFarAsPossible((buffer) => {
@@ -499,7 +727,8 @@ var audioIteratorManager = ({
               getIsPlaying,
               buffer,
               playbackRate,
-              scheduleAudioNode
+              scheduleAudioNode,
+              debugAudioScheduling
             });
           }
         }, Math.min(startFromSecond + MAX_BUFFER_AHEAD_SECONDS, getEndTime()));
@@ -526,7 +755,8 @@ var audioIteratorManager = ({
     nonce,
     playbackRate,
     getIsPlaying,
-    scheduleAudioNode
+    scheduleAudioNode,
+    debugAudioScheduling
   }) => {
     if (muted) {
       return;
@@ -534,7 +764,8 @@ var audioIteratorManager = ({
     if (getIsLooping()) {
       if (getEndTime() - newTime < 1) {
         prewarmedAudioIteratorCache.prewarmIteratorForLooping({
-          timeToSeek: getStartTime()
+          timeToSeek: getStartTime(),
+          maximumTimestamp: getEndTime()
         });
       }
     }
@@ -544,7 +775,8 @@ var audioIteratorManager = ({
         playbackRate,
         startFromSecond: newTime,
         getIsPlaying,
-        scheduleAudioNode
+        scheduleAudioNode,
+        debugAudioScheduling
       });
       return;
     }
@@ -557,7 +789,8 @@ var audioIteratorManager = ({
             getIsPlaying,
             buffer,
             playbackRate,
-            scheduleAudioNode
+            scheduleAudioNode,
+            debugAudioScheduling
           });
         }
       });
@@ -573,7 +806,8 @@ var audioIteratorManager = ({
           playbackRate,
           startFromSecond: newTime,
           getIsPlaying,
-          scheduleAudioNode
+          scheduleAudioNode,
+          debugAudioScheduling
         });
         return;
       }
@@ -585,31 +819,12 @@ var audioIteratorManager = ({
           getIsPlaying,
           buffer,
           playbackRate,
-          scheduleAudioNode
+          scheduleAudioNode,
+          debugAudioScheduling
         });
       }
     }, Math.min(newTime + MAX_BUFFER_AHEAD_SECONDS, getEndTime()));
   };
-  const resumeScheduledAudioChunks = ({
-    playbackRate,
-    scheduleAudioNode
-  }) => {
-    if (muted) {
-      return;
-    }
-    if (!audioBufferIterator) {
-      return;
-    }
-    for (const chunk of audioBufferIterator.getAndClearAudioChunksForAfterResuming()) {
-      scheduleAudioChunk({
-        buffer: chunk.buffer,
-        mediaTimestamp: chunk.timestamp,
-        playbackRate,
-        scheduleAudioNode,
-        maxDuration: chunk.maxDuration
-      });
-    }
-  };
   return {
     startAudioIterator,
     resumeScheduledAudioChunks,
@@ -617,7 +832,7 @@ var audioIteratorManager = ({
     getAudioBufferIterator: () => audioBufferIterator,
     destroyIterator: () => {
       prewarmedAudioIteratorCache.destroy();
-      audioBufferIterator?.destroy();
+      audioBufferIterator?.destroy(sharedAudioContext);
       audioBufferIterator = null;
       if (currentDelayHandle) {
         currentDelayHandle.unblock();
@@ -638,16 +853,6 @@ var audioIteratorManager = ({
   };
 };
 
-// src/calculate-playbacktime.ts
-var calculatePlaybackTime = ({
-  audioSyncAnchor,
-  currentTime,
-  playbackRate
-}) => {
-  const timeSinceAnchor = currentTime - audioSyncAnchor;
-  return timeSinceAnchor * playbackRate;
-};
-
 // src/debug-overlay/preview-overlay.ts
 var drawPreviewOverlay = ({
   context,
@@ -659,18 +864,19 @@ var drawPreviewOverlay = ({
   videoIteratorManager,
   playbackRate
 }) => {
+  const anchorValue = audioSyncAnchor?.value ?? 0;
   const lines = [
     "Debug overlay",
     `Video iterators created: ${videoIteratorManager?.getVideoIteratorsCreated()}`,
     `Audio iterators created: ${audioIteratorManager2?.getAudioIteratorsCreated()}`,
     `Frames rendered: ${videoIteratorManager?.getFramesRendered()}`,
     `Audio context state: ${audioContextState}`,
-    audioTime ? `Audio time: ${((audioTime - audioSyncAnchor) * playbackRate).toFixed(3)}s` : null
+    audioTime ? `Audio time: ${((audioTime - anchorValue) * playbackRate).toFixed(3)}s` : null
   ].filter(Boolean);
   if (audioIteratorManager2) {
     const queuedPeriod = audioIteratorManager2.getAudioBufferIterator()?.getQueuedPeriod();
     if (queuedPeriod) {
-      const aheadText = audioTime ? ` (${(queuedPeriod.until - (audioTime - audioSyncAnchor) * playbackRate).toFixed(3)}s ahead)` : "";
+      const aheadText = audioTime ? ` (${(queuedPeriod.until - (audioTime - anchorValue) * playbackRate).toFixed(3)}s ahead)` : "";
       lines.push(`Audio queued until ${queuedPeriod.until.toFixed(3)}s${aheadText}`);
     }
     lines.push(`Playing: ${playing}`);
@@ -720,7 +926,7 @@ var makeNonceManager = () => {
 
 // src/video-iterator-manager.ts
 import { CanvasSink } from "mediabunny";
-import { Internals as Internals2 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 
 // src/video/video-preview-iterator.ts
 var createVideoIterator = async (timeToSeek, cache) => {
@@ -890,7 +1096,7 @@ var videoIteratorManager = ({
     if (callback) {
       callback(frame.canvas);
     }
-    Internals2.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
+    Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
   };
   const startVideoIterator = async (timeToSeek, nonce) => {
     let __stack = [];
@@ -975,7 +1181,7 @@ class MediaPlayer {
   sharedAudioContext;
   audioIteratorManager = null;
   videoIteratorManager = null;
-  audioSyncAnchor = 0;
+  sequenceOffset;
   playing = false;
   loop = false;
   fps;
@@ -984,6 +1190,7 @@ class MediaPlayer {
   durationInFrames;
   totalDuration;
   debugOverlay = false;
+  debugAudioScheduling = false;
   nonceManager;
   onVideoFrameCallback = null;
   initializationPromise = null;
@@ -1004,12 +1211,14 @@ class MediaPlayer {
     audioStreamIndex,
     fps,
     debugOverlay,
+    debugAudioScheduling,
     bufferState,
     isPremounting,
     isPostmounting,
     durationInFrames,
     onVideoFrameCallback,
-    playing
+    playing,
+    sequenceOffset
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -1023,6 +1232,7 @@ class MediaPlayer {
     this.audioStreamIndex = audioStreamIndex ?? 0;
     this.fps = fps;
     this.debugOverlay = debugOverlay;
+    this.debugAudioScheduling = debugAudioScheduling;
     this.bufferState = bufferState;
     this.isPremounting = isPremounting;
     this.isPostmounting = isPostmounting;
@@ -1030,6 +1240,7 @@ class MediaPlayer {
     this.nonceManager = makeNonceManager();
     this.onVideoFrameCallback = onVideoFrameCallback;
     this.playing = playing;
+    this.sequenceOffset = sequenceOffset;
     this.input = new Input({
       source: new UrlSource(this.src),
       formats: ALL_FORMATS
@@ -1093,7 +1304,7 @@ class MediaPlayer {
           if (isNetworkError(err)) {
             throw error;
           }
-          Internals3.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
+          Internals6.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
           return { type: "unknown-container-format" };
         }
         const [durationInSeconds, videoTrack, audioTracks] = await Promise.all([
@@ -1134,7 +1345,6 @@ class MediaPlayer {
         if (startTime === null) {
           throw new Error(`should have asserted that the time is not null`);
         }
-        this.setAudioPlaybackTime(startTime);
         if (audioTrack && this.sharedAudioContext) {
           const canDecode = await audioTrack.canDecode();
           if (!canDecode) {
@@ -1146,7 +1356,7 @@ class MediaPlayer {
           this.audioIteratorManager = audioIteratorManager({
             audioTrack,
             delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
-            sharedAudioContext: this.sharedAudioContext,
+            sharedAudioContext: this.sharedAudioContext.audioContext,
             getIsLooping: () => this.loop,
             getEndTime: () => this.getEndTime(),
             getStartTime: () => this.getStartTime(),
@@ -1162,7 +1372,8 @@ class MediaPlayer {
               playbackRate: this.playbackRate * this.globalPlaybackRate,
               startFromSecond: startTime,
               getIsPlaying: () => this.playing,
-              scheduleAudioNode: this.scheduleAudioNode
+              scheduleAudioNode: this.scheduleAudioNode,
+              debugAudioScheduling: this.debugAudioScheduling
             }) : Promise.resolve(),
             this.videoIteratorManager ? this.videoIteratorManager.startVideoIterator(startTime, nonce) : Promise.resolve()
           ]);
@@ -1170,16 +1381,16 @@ class MediaPlayer {
           if (this.isDisposalError()) {
             return { type: "disposed" };
           }
-          Internals3.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio and video iterators", error);
+          Internals6.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio and video iterators", error);
         }
         return { type: "success", durationInSeconds };
       } catch (error) {
         const err = error;
         if (isNetworkError(err)) {
-          Internals3.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
+          Internals6.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
           return { type: "network-error" };
         }
-        Internals3.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
+        Internals6.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
         throw error;
       }
     } catch (_catch) {
@@ -1205,46 +1416,44 @@ class MediaPlayer {
     if (nonce.isStale()) {
       return;
     }
-    const shouldSeekAudio = this.audioIteratorManager && this.sharedAudioContext && this.getAudioPlaybackTime() !== newTime;
-    if (shouldSeekAudio) {
-      this.setAudioPlaybackTime(newTime);
-    }
-    await Promise.all([
-      this.videoIteratorManager?.seek({
-        newTime,
-        nonce
-      }),
-      shouldSeekAudio ? this.audioIteratorManager?.seek({
-        newTime,
-        nonce,
-        playbackRate: this.playbackRate * this.globalPlaybackRate,
-        getIsPlaying: () => this.playing,
-        scheduleAudioNode: this.scheduleAudioNode
-      }) : null
-    ]);
-  }
-  async playAudio(time) {
-    const newTime = this.getTrimmedTime(time);
-    if (newTime === null) {
-      throw new Error(`should have asserted that the time is not null`);
+    const shouldSeekAudio = this.audioIteratorManager && this.getAudioPlaybackTime(this.sharedAudioContext?.audioContext.currentTime ?? 0) !== newTime;
+    try {
+      await Promise.all([
+        this.videoIteratorManager?.seek({
+          newTime,
+          nonce
+        }),
+        shouldSeekAudio ? this.audioIteratorManager?.seek({
+          newTime,
+          nonce,
+          playbackRate: this.playbackRate * this.globalPlaybackRate,
+          getIsPlaying: () => this.playing,
+          scheduleAudioNode: this.scheduleAudioNode,
+          debugAudioScheduling: this.debugAudioScheduling
+        }) : null
+      ]);
+    } catch (error) {
+      if (this.isDisposalError()) {
+        return;
+      }
+      throw error;
     }
-    this.setAudioPlaybackTime(newTime);
-    if (this.audioIteratorManager) {
+  }
+  playAudio() {
+    if (this.audioIteratorManager && this.sharedAudioContext?.audioContext.state === "running" && (this.sharedAudioContext?.audioContext?.getOutputTimestamp().contextTime ?? 0) > 0) {
       this.audioIteratorManager.resumeScheduledAudioChunks({
         playbackRate: this.playbackRate * this.globalPlaybackRate,
-        scheduleAudioNode: this.scheduleAudioNode
+        scheduleAudioNode: this.scheduleAudioNode,
+        debugAudioScheduling: this.debugAudioScheduling
       });
     }
-    if (this.sharedAudioContext && this.sharedAudioContext.state === "suspended") {
-      await this.sharedAudioContext.resume();
-    }
   }
-  async play(time) {
+  play() {
+    this.playAudio();
     if (this.playing) {
       return;
     }
     this.playing = true;
-    await this.playAudio(time);
     this.drawDebugOverlay();
   }
   delayPlaybackHandleIfNotPremounting = () => {
@@ -1299,7 +1508,6 @@ class MediaPlayer {
     const newMediaTime = this.getTrimmedTime(unloopedTimeInSeconds);
     this.audioIteratorManager?.destroyIterator();
     if (newMediaTime !== null) {
-      this.setAudioPlaybackTime(newMediaTime);
       if (!this.playing && this.videoIteratorManager) {
         await this.seekToWithQueue(newMediaTime);
       }
@@ -1320,39 +1528,43 @@ class MediaPlayer {
   setDebugOverlay(debugOverlay) {
     this.debugOverlay = debugOverlay;
   }
-  updateAudioTimeAfterPlaybackRateChange(mediaTimeBeforeChange) {
+  setDebugAudioScheduling(debugAudioScheduling) {
+    this.debugAudioScheduling = debugAudioScheduling;
+  }
+  rescheduleAudioChunks() {
     if (!this.audioIteratorManager) {
       return;
     }
     if (!this.sharedAudioContext) {
       return;
     }
-    this.setAudioPlaybackTime(mediaTimeBeforeChange);
     const iterator = this.audioIteratorManager.getAudioBufferIterator();
     if (!iterator) {
       return;
     }
     iterator.moveQueuedChunksToPauseQueue();
-    if (this.playing) {
+    if (this.playing && this.sharedAudioContext.audioContext.state === "running" && (this.sharedAudioContext.audioContext?.getOutputTimestamp().contextTime ?? 0) > 0) {
       this.audioIteratorManager.resumeScheduledAudioChunks({
         playbackRate: this.playbackRate * this.globalPlaybackRate,
-        scheduleAudioNode: this.scheduleAudioNode
+        scheduleAudioNode: this.scheduleAudioNode,
+        debugAudioScheduling: this.debugAudioScheduling
       });
     }
   }
   async setPlaybackRate(rate, unloopedTimeInSeconds) {
     const previousRate = this.playbackRate;
-    const mediaTime = this.sharedAudioContext ? this.getAudioPlaybackTime() : 0;
-    this.playbackRate = rate;
-    this.updateAudioTimeAfterPlaybackRateChange(mediaTime);
     if (previousRate !== rate) {
+      this.playbackRate = rate;
+      this.rescheduleAudioChunks();
       await this.seekTo(unloopedTimeInSeconds);
     }
   }
   setGlobalPlaybackRate(rate) {
-    const mediaTime = this.sharedAudioContext ? this.getAudioPlaybackTime() : 0;
-    this.globalPlaybackRate = rate;
-    this.updateAudioTimeAfterPlaybackRateChange(mediaTime);
+    const previousRate = this.globalPlaybackRate;
+    if (previousRate !== rate) {
+      this.globalPlaybackRate = rate;
+      this.rescheduleAudioChunks();
+    }
   }
   setFps(fps) {
     this.fps = fps;
@@ -1366,6 +1578,9 @@ class MediaPlayer {
   setLoop(loop) {
     this.loop = loop;
   }
+  setSequenceOffset(offset) {
+    this.sequenceOffset = offset;
+  }
   setDurationInFrames(durationInFrames) {
     this.durationInFrames = durationInFrames;
   }
@@ -1380,41 +1595,40 @@ class MediaPlayer {
     this.audioIteratorManager?.destroyIterator();
     this.input.dispose();
   }
-  scheduleAudioNode = (node, mediaTimestamp, maxDuration) => {
-    const currentTime = this.getAudioPlaybackTime();
-    const delayWithoutPlaybackRate = mediaTimestamp - currentTime;
-    const delay = delayWithoutPlaybackRate / (this.playbackRate * this.globalPlaybackRate);
+  scheduleAudioNode = (node, mediaTimestamp) => {
     if (!this.sharedAudioContext) {
       throw new Error("Shared audio context not found");
     }
-    if (delay >= 0) {
-      node.start(this.sharedAudioContext.currentTime + delay, 0, maxDuration ?? undefined);
-    } else {
-      const offset = -delayWithoutPlaybackRate;
-      node.start(this.sharedAudioContext.currentTime, offset, maxDuration !== null ? maxDuration - offset : undefined);
-    }
+    const { audioContext } = this.sharedAudioContext;
+    const { currentTime } = audioContext;
+    const globalTime = (currentTime - this.sharedAudioContext.audioSyncAnchor.value) * this.globalPlaybackRate;
+    const timeInSeconds = globalTime - this.sequenceOffset;
+    const localTime = this.getTrimmedTime(timeInSeconds);
+    if (localTime === null) {
+      throw new Error("hmm, should not render!");
+    }
+    const targetTime = (mediaTimestamp - localTime) / (this.playbackRate * this.globalPlaybackRate);
+    return this.sharedAudioContext.scheduleAudioNode({
+      node,
+      mediaTimestamp,
+      targetTime,
+      currentTime,
+      sequenceEndTime: this.getEndTime(),
+      sequenceStartTime: this.getStartTime(),
+      debugAudioScheduling: this.debugAudioScheduling
+    });
   };
-  getAudioPlaybackTime() {
+  getAudioPlaybackTime(currentTime) {
     if (!this.sharedAudioContext) {
       throw new Error("Shared audio context not found");
     }
-    return calculatePlaybackTime({
-      audioSyncAnchor: this.audioSyncAnchor,
-      currentTime: this.sharedAudioContext.currentTime,
-      playbackRate: this.playbackRate * this.globalPlaybackRate
-    });
-  }
-  setAudioPlaybackTime(time) {
-    if (!this.sharedAudioContext) {
-      return;
+    const globalTime = (currentTime - this.sharedAudioContext.audioSyncAnchor.value) * this.globalPlaybackRate;
+    const localTime = globalTime - this.sequenceOffset;
+    const trimmedTime = this.getTrimmedTime(localTime);
+    if (trimmedTime !== null) {
+      return trimmedTime;
     }
-    const playbackRate = this.playbackRate * this.globalPlaybackRate;
-    const newAnchor = this.sharedAudioContext.currentTime - time / playbackRate;
-    const shift = Math.abs(newAnchor - this.audioSyncAnchor) * playbackRate;
-    if (shift < 0.05) {
-      return;
-    }
-    this.audioSyncAnchor = newAnchor;
+    return localTime * this.playbackRate + (this.trimBefore ?? 0) / this.fps;
   }
   setVideoFrameCallback(callback) {
     this.onVideoFrameCallback = callback;
@@ -1425,9 +1639,9 @@ class MediaPlayer {
     if (this.context && this.canvas) {
       drawPreviewOverlay({
         context: this.context,
-        audioTime: this.sharedAudioContext?.currentTime ?? null,
-        audioContextState: this.sharedAudioContext?.state ?? null,
-        audioSyncAnchor: this.audioSyncAnchor,
+        audioTime: this.sharedAudioContext?.audioContext.currentTime ?? null,
+        audioContextState: this.sharedAudioContext?.audioContext.state ?? null,
+        audioSyncAnchor: this.sharedAudioContext?.audioSyncAnchor ?? null,
         audioIteratorManager: this.audioIteratorManager,
         playing: this.playing,
         videoIteratorManager: this.videoIteratorManager,
@@ -1460,7 +1674,7 @@ var callOnErrorAndResolve = ({
 
 // src/show-in-timeline.ts
 import { useMemo } from "react";
-import { Internals as Internals4, useVideoConfig } from "remotion";
+import { Internals as Internals7, useVideoConfig } from "remotion";
 var useLoopDisplay = ({
   loop,
   mediaDurationInSeconds,
@@ -1473,7 +1687,7 @@ var useLoopDisplay = ({
     if (!loop || !mediaDurationInSeconds) {
       return;
     }
-    const durationInFrames = Internals4.calculateMediaDuration({
+    const durationInFrames = Internals7.calculateMediaDuration({
       mediaDurationInFrames: mediaDurationInSeconds * fps,
       playbackRate,
       trimAfter,
@@ -1497,9 +1711,177 @@ var useLoopDisplay = ({
   return loopDisplay;
 };
 
+// src/use-common-effects.ts
+import { useContext, useLayoutEffect } from "react";
+import { Internals as Internals8 } from "remotion";
+var useCommonEffects = ({
+  mediaPlayerRef,
+  mediaPlayerReady,
+  currentTimeRef,
+  playing,
+  isPlayerBuffering,
+  frame,
+  trimBefore,
+  trimAfter,
+  effectiveMuted,
+  userPreferredVolume,
+  playbackRate,
+  globalPlaybackRate,
+  fps,
+  sequenceOffset,
+  loop,
+  debugAudioScheduling,
+  durationInFrames,
+  isPremounting,
+  isPostmounting,
+  currentTime,
+  logLevel,
+  sharedAudioContext,
+  label
+}) => {
+  const absoluteTime = Internals8.useAbsoluteTimelinePosition();
+  const { playing: playingWhilePremounting } = useContext(Internals8.PremountContext);
+  useLayoutEffect(() => {
+    if (sharedAudioContext?.audioContext && sharedAudioContext.audioSyncAnchor) {
+      setGlobalTimeAnchor({
+        audioContext: sharedAudioContext.audioContext,
+        audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+        absoluteTimeInSeconds: absoluteTime / fps,
+        globalPlaybackRate,
+        debugAudioScheduling,
+        logLevel
+      });
+    }
+  }, [
+    absoluteTime,
+    globalPlaybackRate,
+    sharedAudioContext,
+    fps,
+    debugAudioScheduling,
+    logLevel
+  ]);
+  if (playingWhilePremounting) {
+    mediaPlayerRef.current?.playAudio();
+  }
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer)
+      return;
+    if (playing && !isPlayerBuffering) {
+      mediaPlayer.play();
+    } else {
+      mediaPlayer.pause();
+    }
+  }, [
+    isPlayerBuffering,
+    playing,
+    logLevel,
+    mediaPlayerReady,
+    frame,
+    mediaPlayerRef
+  ]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
+  }, [trimBefore, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
+  }, [trimAfter, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady)
+      return;
+    mediaPlayer.setMuted(effectiveMuted);
+  }, [effectiveMuted, mediaPlayerReady, mediaPlayerRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setVolume(userPreferredVolume);
+  }, [userPreferredVolume, mediaPlayerReady, mediaPlayerRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setPlaybackRate(playbackRate, currentTimeRef.current);
+  }, [playbackRate, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setGlobalPlaybackRate(globalPlaybackRate);
+  }, [globalPlaybackRate, mediaPlayerReady, mediaPlayerRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setLoop(loop);
+  }, [loop, mediaPlayerReady, mediaPlayerRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setDurationInFrames(durationInFrames);
+  }, [durationInFrames, mediaPlayerReady, mediaPlayerRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setIsPremounting(isPremounting);
+  }, [isPremounting, mediaPlayerReady, mediaPlayerRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setIsPostmounting(isPostmounting);
+  }, [isPostmounting, mediaPlayerReady, mediaPlayerRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setFps(fps);
+  }, [fps, mediaPlayerReady, mediaPlayerRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setSequenceOffset(sequenceOffset);
+  }, [sequenceOffset, mediaPlayerReady, mediaPlayerRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setDebugAudioScheduling(debugAudioScheduling);
+  }, [debugAudioScheduling, mediaPlayerReady, mediaPlayerRef]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady)
+      return;
+    mediaPlayer.seekTo(currentTime).catch(() => {});
+    Internals8.Log.trace({ logLevel, tag: "@remotion/media" }, `[${label}] Updating target time to ${currentTime.toFixed(3)}s`);
+  }, [currentTime, logLevel, mediaPlayerReady, label, mediaPlayerRef]);
+};
+
 // src/use-media-in-timeline.ts
-import { useContext, useEffect, useState } from "react";
-import { Internals as Internals5, useCurrentFrame } from "remotion";
+import { useContext as useContext2, useState, useEffect } from "react";
+import { Internals as Internals9, useCurrentFrame } from "remotion";
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -1516,9 +1898,9 @@ var useMediaInTimeline = ({
   trimAfter,
   controls
 }) => {
-  const parentSequence = useContext(Internals5.SequenceContext);
-  const startsAt = Internals5.useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext(Internals5.SequenceManager);
+  const parentSequence = useContext2(Internals9.SequenceContext);
+  const startsAt = Internals9.useMediaStartsAt();
+  const { registerSequence, unregisterSequence } = useContext2(Internals9.SequenceManager);
   const [sequenceId] = useState(() => String(Math.random()));
   const [mediaId] = useState(() => String(Math.random()));
   const frame = useCurrentFrame();
@@ -1530,7 +1912,7 @@ var useMediaInTimeline = ({
     rootId,
     isStudio,
     finalDisplayName
-  } = Internals5.useBasicMediaInTimeline({
+  } = Internals9.useBasicMediaInTimeline({
     volume,
     mediaVolume,
     mediaType,
@@ -1560,7 +1942,7 @@ var useMediaInTimeline = ({
         displayName: finalDisplayName,
         rootId,
         showInTimeline: true,
-        nonce,
+        nonce: nonce.get(),
         loopDisplay,
         stack,
         from: 0,
@@ -1580,7 +1962,7 @@ var useMediaInTimeline = ({
       rootId,
       volume: volumes,
       showInTimeline: true,
-      nonce,
+      nonce: nonce.get(),
       startMediaFrom: 0 - startsAt + (trimBefore ?? 0),
       doesVolumeChange,
       loopDisplay: undefined,
@@ -1640,7 +2022,7 @@ var {
   warnAboutTooHighVolume,
   usePreload,
   SequenceContext
-} = Internals6;
+} = Internals10;
 var AudioForPreviewAssertedShowing = ({
   src,
   playbackRate,
@@ -1658,6 +2040,7 @@ var AudioForPreviewAssertedShowing = ({
   toneFrequency,
   audioStreamIndex,
   fallbackHtml5AudioProps,
+  debugAudioScheduling,
   onError,
   controls
 }) => {
@@ -1669,9 +2052,9 @@ var AudioForPreviewAssertedShowing = ({
   const [mediaPlayerReady, setMediaPlayerReady] = useState2(false);
   const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState2(false);
   const [playing] = Timeline.usePlayingState();
-  const timelineContext = useContext2(Internals6.TimelineContext);
+  const timelineContext = Internals10.useTimelineContext();
   const globalPlaybackRate = timelineContext.playbackRate;
-  const sharedAudioContext = useContext2(SharedAudioContext);
+  const sharedAudioContext = useContext3(SharedAudioContext);
   const buffer = useBufferState();
   const [mediaMuted] = useMediaMutedState();
   const [mediaVolume] = useMediaVolumeState();
@@ -1693,9 +2076,10 @@ var AudioForPreviewAssertedShowing = ({
   const currentTimeRef = useRef(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload(src);
-  const parentSequence = useContext2(SequenceContext);
+  const parentSequence = useContext3(SequenceContext);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
+  const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
   const loopDisplay = useLoopDisplay({
     loop,
     mediaDurationInSeconds,
@@ -1719,28 +2103,55 @@ var AudioForPreviewAssertedShowing = ({
     trimBefore,
     controls
   });
-  const bufferingContext = useContext2(Internals6.BufferingContextReact);
+  const bufferingContext = useContext3(Internals10.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
-  const isPlayerBuffering = Internals6.useIsPlayerBuffering(bufferingContext);
+  const isPlayerBuffering = Internals10.useIsPlayerBuffering(bufferingContext);
   const initialPlaying = useRef(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef(isPremounting);
   const initialIsPostmounting = useRef(isPostmounting);
   const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
   const initialPlaybackRate = useRef(playbackRate);
   const initialMuted = useRef(effectiveMuted);
+  const initialSequenceOffset = useRef(sequenceOffset);
+  useCommonEffects({
+    mediaPlayerRef,
+    mediaPlayerReady,
+    currentTimeRef,
+    playing,
+    isPlayerBuffering,
+    frame,
+    trimBefore,
+    trimAfter,
+    effectiveMuted,
+    userPreferredVolume,
+    playbackRate,
+    globalPlaybackRate,
+    fps: videoConfig.fps,
+    sequenceOffset,
+    loop,
+    debugAudioScheduling,
+    durationInFrames: videoConfig.durationInFrames,
+    isPremounting,
+    isPostmounting,
+    currentTime,
+    logLevel,
+    sharedAudioContext,
+    label: "AudioForPreview"
+  });
   useEffect2(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
       return;
+    const { audioContext, audioSyncAnchor, scheduleAudioNode } = sharedAudioContext;
     try {
       const player = new MediaPlayer({
         src: preloadedSrc,
         logLevel,
-        sharedAudioContext: sharedAudioContext.audioContext,
+        sharedAudioContext: { audioContext, audioSyncAnchor, scheduleAudioNode },
         loop,
         trimAfter: initialTrimAfterRef.current,
         trimBefore: initialTrimBeforeRef.current,
@@ -1749,13 +2160,15 @@ var AudioForPreviewAssertedShowing = ({
         playbackRate: initialPlaybackRate.current,
         audioStreamIndex: audioStreamIndex ?? 0,
         debugOverlay: false,
+        debugAudioScheduling,
         bufferState: buffer,
         isPostmounting: initialIsPostmounting.current,
         isPremounting: initialIsPremounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
         durationInFrames: videoConfig.durationInFrames,
         onVideoFrameCallback: null,
-        playing: initialPlaying.current
+        playing: initialPlaying.current,
+        sequenceOffset: initialSequenceOffset.current
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -1773,7 +2186,7 @@ var AudioForPreviewAssertedShowing = ({
           if (action === "fail") {
             throw errorToUse;
           } else {
-            Internals6.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+            Internals10.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
             setShouldFallbackToNativeAudio(true);
           }
         };
@@ -1796,7 +2209,7 @@ var AudioForPreviewAssertedShowing = ({
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
-          Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] MediaPlayer initialized successfully`);
+          Internals10.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] MediaPlayer initialized successfully`);
         }
       }).catch((error) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -1809,7 +2222,7 @@ var AudioForPreviewAssertedShowing = ({
         if (action === "fail") {
           throw errorToUse;
         } else {
-          Internals6.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] Failed to initialize MediaPlayer", error);
+          Internals10.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] Failed to initialize MediaPlayer", error);
           setShouldFallbackToNativeAudio(true);
         }
       });
@@ -1824,12 +2237,12 @@ var AudioForPreviewAssertedShowing = ({
       if (action === "fail") {
         throw errorToUse;
       }
-      Internals6.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] MediaPlayer initialization failed", errorToUse);
+      Internals10.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] MediaPlayer initialization failed", errorToUse);
       setShouldFallbackToNativeAudio(true);
     }
     return () => {
       if (mediaPlayerRef.current) {
-        Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Disposing MediaPlayer`);
+        Internals10.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -1840,108 +2253,15 @@ var AudioForPreviewAssertedShowing = ({
     preloadedSrc,
     logLevel,
     sharedAudioContext,
-    currentTimeRef,
     loop,
     videoConfig.fps,
     audioStreamIndex,
     disallowFallbackToHtml5Audio,
+    debugAudioScheduling,
     buffer,
     onError,
     videoConfig.durationInFrames
-  ]);
-  useLayoutEffect(() => {
-    const audioPlayer = mediaPlayerRef.current;
-    if (!audioPlayer)
-      return;
-    if (playing && !isPlayerBuffering) {
-      audioPlayer.play(currentTimeRef.current);
-    } else {
-      audioPlayer.pause();
-    }
-  }, [isPlayerBuffering, logLevel, playing]);
-  useLayoutEffect(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
-  }, [trimBefore, mediaPlayerReady]);
-  useLayoutEffect(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
-  }, [trimAfter, mediaPlayerReady]);
-  useLayoutEffect(() => {
-    const audioPlayer = mediaPlayerRef.current;
-    if (!audioPlayer || !mediaPlayerReady)
-      return;
-    audioPlayer.setMuted(effectiveMuted);
-  }, [effectiveMuted, mediaPlayerReady]);
-  useEffect2(() => {
-    const audioPlayer = mediaPlayerRef.current;
-    if (!audioPlayer || !mediaPlayerReady) {
-      return;
-    }
-    audioPlayer.setVolume(userPreferredVolume);
-  }, [userPreferredVolume, mediaPlayerReady]);
-  useEffect2(() => {
-    const audioPlayer = mediaPlayerRef.current;
-    if (!audioPlayer || !mediaPlayerReady) {
-      return;
-    }
-    audioPlayer.setPlaybackRate(playbackRate, currentTimeRef.current);
-  }, [playbackRate, mediaPlayerReady]);
-  useLayoutEffect(() => {
-    const audioPlayer = mediaPlayerRef.current;
-    if (!audioPlayer || !mediaPlayerReady) {
-      return;
-    }
-    audioPlayer.setGlobalPlaybackRate(globalPlaybackRate);
-  }, [globalPlaybackRate, mediaPlayerReady]);
-  useLayoutEffect(() => {
-    const audioPlayer = mediaPlayerRef.current;
-    if (!audioPlayer || !mediaPlayerReady) {
-      return;
-    }
-    audioPlayer.setFps(videoConfig.fps);
-  }, [videoConfig.fps, mediaPlayerReady]);
-  useLayoutEffect(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setLoop(loop);
-  }, [loop, mediaPlayerReady]);
-  useLayoutEffect(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setDurationInFrames(videoConfig.durationInFrames);
-  }, [videoConfig.durationInFrames, mediaPlayerReady]);
-  useLayoutEffect(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setIsPremounting(isPremounting);
-  }, [isPremounting, mediaPlayerReady]);
-  useLayoutEffect(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setIsPostmounting(isPostmounting);
-  }, [isPostmounting, mediaPlayerReady]);
-  useLayoutEffect(() => {
-    const audioPlayer = mediaPlayerRef.current;
-    if (!audioPlayer || !mediaPlayerReady)
-      return;
-    audioPlayer.seekTo(currentTime).catch(() => {});
-    Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
-  }, [currentTime, logLevel, mediaPlayerReady]);
+  ]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
     return /* @__PURE__ */ jsx(RemotionAudio, {
       src,
@@ -1964,72 +2284,37 @@ var AudioForPreviewAssertedShowing = ({
   }
   return null;
 };
-var audioSchema = {
-  volume: {
-    type: "number",
-    min: 0,
-    max: 20,
-    step: 0.01,
-    default: 1,
-    description: "Volume"
-  },
-  playbackRate: {
-    type: "number",
-    min: 0,
-    step: 0.01,
-    default: 1,
-    description: "Playback Rate"
-  },
-  trimBefore: { type: "number", min: 0, default: 0 },
-  trimAfter: { type: "number", min: 0, default: 0 }
-};
 var AudioForPreview = ({
-  loop,
+  loop = false,
   src,
   logLevel,
   muted,
   name,
-  volume: volumeProp,
+  volume,
   loopVolumeCurveBehavior,
-  playbackRate: playbackRateProp,
-  trimAfter: trimAfterProp,
-  trimBefore: trimBeforeProp,
+  playbackRate = 1,
+  trimAfter,
+  trimBefore,
   showInTimeline,
   stack,
   disallowFallbackToHtml5Audio,
   toneFrequency,
   audioStreamIndex,
   fallbackHtml5AudioProps,
-  onError
+  debugAudioScheduling,
+  onError,
+  controls
 }) => {
-  const schemaInput = useMemo2(() => {
-    if (typeof volumeProp !== "number") {
-      return null;
-    }
-    return {
-      volume: volumeProp,
-      playbackRate: playbackRateProp,
-      trimBefore: trimBeforeProp,
-      trimAfter: trimAfterProp,
-      loop: loop ?? false
-    };
-  }, [volumeProp, playbackRateProp, trimBeforeProp, trimAfterProp, loop]);
-  const { controls, values } = Internals6.useSchema(schemaInput ? audioSchema : null, schemaInput);
-  const volume = schemaInput !== null ? values.volume : volumeProp;
-  const playbackRate = schemaInput !== null ? values.playbackRate : playbackRateProp;
-  const trimBefore = schemaInput !== null ? values.trimBefore : trimBeforeProp;
-  const trimAfter = schemaInput !== null ? values.trimAfter : trimAfterProp;
-  const effectiveLoop = schemaInput !== null ? values.loop : loop ?? false;
   const preloadedSrc = usePreload(src);
-  const defaultLogLevel = Internals6.useLogLevel();
+  const defaultLogLevel = Internals10.useLogLevel();
   const frame = useCurrentFrame2();
   const videoConfig = useVideoConfig2();
   const currentTime = frame / videoConfig.fps;
   const showShow = useMemo2(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
-      playbackRate: playbackRate ?? 1,
-      loop: effectiveLoop,
+      playbackRate,
+      loop,
       trimBefore,
       trimAfter,
       mediaDurationInSeconds: Infinity,
@@ -2039,12 +2324,12 @@ var AudioForPreview = ({
     }) !== null;
   }, [
     currentTime,
-    effectiveLoop,
     playbackRate,
     src,
     trimAfter,
     trimBefore,
-    videoConfig.fps
+    videoConfig.fps,
+    loop
   ]);
   if (!showShow) {
     return null;
@@ -2052,12 +2337,12 @@ var AudioForPreview = ({
   return /* @__PURE__ */ jsx(AudioForPreviewAssertedShowing, {
     audioStreamIndex: audioStreamIndex ?? 0,
     src: preloadedSrc,
-    playbackRate: playbackRate ?? 1,
+    playbackRate,
     logLevel: logLevel ?? defaultLogLevel,
     muted: muted ?? false,
     volume: volume ?? 1,
     loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
-    loop: effectiveLoop,
+    loop,
     trimAfter,
     trimBefore,
     name,
@@ -2065,6 +2350,7 @@ var AudioForPreview = ({
     stack,
     disallowFallbackToHtml5Audio: disallowFallbackToHtml5Audio ?? false,
     toneFrequency,
+    debugAudioScheduling: debugAudioScheduling ?? false,
     onError,
     fallbackHtml5AudioProps,
     controls
@@ -2072,11 +2358,11 @@ var AudioForPreview = ({
 };
 
 // src/audio/audio-for-rendering.tsx
-import { useContext as useContext3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useState as useState3 } from "react";
+import { useContext as useContext4, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useState as useState3 } from "react";
 import {
   cancelRender as cancelRender2,
   Html5Audio,
-  Internals as Internals14,
+  Internals as Internals18,
   random,
   useCurrentFrame as useCurrentFrame3,
   useDelayRender,
@@ -2085,13 +2371,13 @@ import {
 
 // src/caches.ts
 import React2 from "react";
-import { cancelRender, Internals as Internals11 } from "remotion";
+import { cancelRender, Internals as Internals15 } from "remotion";
 
 // src/audio-extraction/audio-manager.ts
-import { Internals as Internals8 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 
 // src/audio-extraction/audio-iterator.ts
-import { Internals as Internals7 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/audio-extraction/audio-cache.ts
 var makeAudioCache = () => {
@@ -2162,7 +2448,7 @@ var makeAudioCache = () => {
 };
 
 // src/audio-extraction/audio-iterator.ts
-var extraThreshold = 1.5;
+var EXTRA_THRESHOLD_IN_SECONDS = 1.5;
 var safetyOutOfOrderThreshold = 0.2;
 var warned = {};
 var warnAboutMatroskaOnce = (src, logLevel) => {
@@ -2170,7 +2456,7 @@ var warnAboutMatroskaOnce = (src, logLevel) => {
     return;
   }
   warned[src] = true;
-  Internals7.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio from ${src} will need to be read from the beginning. https://www.remotion.dev/docs/media/support#matroska-limitation`);
+  Internals11.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio from ${src} will need to be read from the beginning. https://www.remotion.dev/docs/media/support#matroska-limitation`);
 };
 var makeAudioIterator2 = ({
   audioSampleSink,
@@ -2180,7 +2466,7 @@ var makeAudioIterator2 = ({
   actualMatroskaTimestamps,
   logLevel
 }) => {
-  const sampleIterator = audioSampleSink.samples(isMatroska ? 0 : Math.max(0, startTimestamp - extraThreshold));
+  const sampleIterator = audioSampleSink.samples(isMatroska ? 0 : Math.max(0, startTimestamp - EXTRA_THRESHOLD_IN_SECONDS));
   if (isMatroska) {
     warnAboutMatroskaOnce(src, logLevel);
   }
@@ -2238,7 +2524,7 @@ var makeAudioIterator2 = ({
     if (openTimestamps.length > 0) {
       const first = openTimestamps[0];
       const last = openTimestamps[openTimestamps.length - 1];
-      Internals7.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
+      Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
     }
   };
   const getCacheStats = () => {
@@ -2335,7 +2621,7 @@ var makeAudioManager = () => {
       if (seenKeys.has(key)) {
         iterator.prepareForDeletion();
         iterators.splice(iterators.indexOf(iterator), 1);
-        Internals8.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
+        Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
       }
       seenKeys.add(key);
     }
@@ -2356,7 +2642,7 @@ var makeAudioManager = () => {
       attempts++;
     }
     if ((await getTotalCacheStats()).totalSize > maxCacheSize && attempts >= maxAttempts) {
-      Internals8.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio cache: Exceeded max cache size after ${maxAttempts} attempts. Still ${(await getTotalCacheStats()).totalSize} bytes used, target was ${maxCacheSize} bytes.`);
+      Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio cache: Exceeded max cache size after ${maxAttempts} attempts. Still ${(await getTotalCacheStats()).totalSize} bytes used, target was ${maxCacheSize} bytes.`);
     }
     for (const iterator of iterators) {
       if (iterator.src === src && await iterator.waitForCompletion() && iterator.canSatisfyRequestedTime(timeInSeconds)) {
@@ -2425,7 +2711,7 @@ var makeAudioManager = () => {
 };
 
 // src/video-extraction/keyframe-manager.ts
-import { Internals as Internals10 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 
 // src/render-timestamp-range.ts
 var renderTimestampRange = (timestamps) => {
@@ -2439,7 +2725,7 @@ var renderTimestampRange = (timestamps) => {
 };
 
 // src/video-extraction/keyframe-bank.ts
-import { Internals as Internals9 } from "remotion";
+import { Internals as Internals13 } from "remotion";
 
 // src/video-extraction/get-allocation-size.ts
 var getAllocationSize = (sample) => {
@@ -2502,7 +2788,7 @@ var makeKeyframeBank = async ({
       }
     }
     if (deletedTimestamps.length > 0) {
-      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? "" : "s"} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
+      Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? "" : "s"} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
     }
   };
   const hasDecodedEnoughForTimestamp = (timestamp) => {
@@ -2525,7 +2811,7 @@ var makeKeyframeBank = async ({
     frameTimestamps.push(frame.timestamp);
     allocationSize += getAllocationSize(frame);
     lastUsed = Date.now();
-    Internals9.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
+    Internals13.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
   };
   const ensureEnoughFramesForTimestamp = async (timestampInSeconds, logLevel, fps) => {
     while (!hasDecodedEnoughForTimestamp(timestampInSeconds)) {
@@ -2580,7 +2866,7 @@ var makeKeyframeBank = async ({
     throw new Error("No first frame found");
   }
   const startTimestampInSeconds = firstFrame.value.timestamp;
-  Internals9.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec`);
+  Internals13.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec`);
   addFrame(firstFrame.value, parentLogLevel);
   const getRangeOfTimestamps = () => {
     if (frameTimestamps.length === 0) {
@@ -2598,7 +2884,7 @@ var makeKeyframeBank = async ({
   const prepareForDeletion = (logLevel, reason) => {
     const range = getRangeOfTimestamps();
     if (range) {
-      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion (${reason}) of keyframe bank from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec`);
+      Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion (${reason}) of keyframe bank from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec`);
     }
     let framesDeleted = 0;
     for (const frameTimestamp of frameTimestamps.slice()) {
@@ -2671,10 +2957,10 @@ var makeKeyframeManager = () => {
         if (size === 0) {
           continue;
         }
-        Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
+        Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
       }
     }
-    Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
+    Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
   };
   const getCacheStats = () => {
     let count = 0;
@@ -2728,7 +3014,7 @@ var makeKeyframeManager = () => {
       const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel, "deleted oldest keyframe bank to stay under max cache size");
       sources[mostInThePastSrc].splice(mostInThePastIndex, 1);
       if (range) {
-        Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec to free up memory.`);
+        Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec to free up memory.`);
       }
     }
     return { finish: false };
@@ -2742,12 +3028,12 @@ var makeKeyframeManager = () => {
       if (finish) {
         break;
       }
-      Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, "Deleted oldest keyframe bank to stay under max cache size", (cacheStats.totalSize / 1024 / 1024).toFixed(1), "out of", (maxCacheSize / 1024 / 1024).toFixed(1));
+      Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, "Deleted oldest keyframe bank to stay under max cache size", (cacheStats.totalSize / 1024 / 1024).toFixed(1), "out of", (maxCacheSize / 1024 / 1024).toFixed(1));
       cacheStats = getTotalCacheStats();
       attempts++;
     }
     if (cacheStats.totalSize > maxCacheSize && attempts >= maxAttempts) {
-      Internals10.Log.warn({ logLevel, tag: "@remotion/media" }, `Exceeded max cache size after ${maxAttempts} attempts. Remaining cache size: ${(cacheStats.totalSize / 1024 / 1024).toFixed(1)} MB, target was ${(maxCacheSize / 1024 / 1024).toFixed(1)} MB.`);
+      Internals14.Log.warn({ logLevel, tag: "@remotion/media" }, `Exceeded max cache size after ${maxAttempts} attempts. Remaining cache size: ${(cacheStats.totalSize / 1024 / 1024).toFixed(1)} MB, target was ${(maxCacheSize / 1024 / 1024).toFixed(1)} MB.`);
     }
   };
   const clearKeyframeBanksBeforeTime = ({
@@ -2768,7 +3054,7 @@ var makeKeyframeManager = () => {
       }
       if (range.lastTimestamp < threshold) {
         bank.prepareForDeletion(logLevel, "cleared before threshold " + threshold);
-        Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${range.firstTimestamp}sec to ${range.lastTimestamp}sec`);
+        Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${range.firstTimestamp}sec to ${range.lastTimestamp}sec`);
         const bankIndex = banks.indexOf(bank);
         delete sources[src][bankIndex];
       } else {
@@ -2790,7 +3076,7 @@ var makeKeyframeManager = () => {
     const existingBanks = sources[src] ?? [];
     const existingBank = existingBanks?.find((bank) => bank.canSatisfyTimestamp(timestamp));
     if (!existingBank) {
-      Internals10.Log.trace({ logLevel, tag: "@remotion/media" }, `Creating new keyframe bank for src ${src} at timestamp ${timestamp}`);
+      Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `Creating new keyframe bank for src ${src} at timestamp ${timestamp}`);
       const newKeyframeBank = await makeKeyframeBank({
         videoSampleSink,
         logLevel,
@@ -2801,10 +3087,10 @@ var makeKeyframeManager = () => {
       return newKeyframeBank;
     }
     if (existingBank.canSatisfyTimestamp(timestamp)) {
-      Internals10.Log.trace({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists and satisfies timestamp ${timestamp}`);
+      Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists and satisfies timestamp ${timestamp}`);
       return existingBank;
     }
-    Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
+    Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
     existingBank.prepareForDeletion(logLevel, "already existed but evicted");
     sources[src] = sources[src].filter((bank) => bank !== existingBank);
     const replacementKeybank = await makeKeyframeBank({
@@ -2895,20 +3181,20 @@ var getUncachedMaxCacheSize = (logLevel) => {
     if (window.remotion_mediaCacheSizeInBytes > 20000 * 1024 * 1024) {
       cancelRender(new Error(`The maximum value for the "mediaCacheSizeInBytes" prop is 20GB (${20000 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
     }
-    Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
+    Internals15.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
     return window.remotion_mediaCacheSizeInBytes;
   }
   if (typeof window !== "undefined" && window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
     const value = window.remotion_initialMemoryAvailable / 2;
     if (value < 500 * 1024 * 1024) {
-      Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
+      Internals15.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
       return 500 * 1024 * 1024;
     }
     if (value > 20000 * 1024 * 1024) {
-      Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
+      Internals15.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
       return 20000 * 1024 * 1024;
     }
-    Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
+    Internals15.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
     return value;
   }
   return 1000 * 1000 * 1000;
@@ -2922,7 +3208,7 @@ var getMaxVideoCacheSize = (logLevel) => {
   return cachedMaxCacheSize;
 };
 var useMaxMediaCacheSize = (logLevel) => {
-  const context = React2.useContext(Internals11.MaxMediaCacheSizeContext);
+  const context = React2.useContext(Internals15.MaxMediaCacheSizeContext);
   if (context === null) {
     return getMaxVideoCacheSize(logLevel);
   }
@@ -3171,7 +3457,7 @@ var combineAudioDataAndClosePrevious = (audioDataArray) => {
 };
 
 // src/get-sink.ts
-import { Internals as Internals12 } from "remotion";
+import { Internals as Internals16 } from "remotion";
 
 // src/video-extraction/get-frames-since-keyframe.ts
 import {
@@ -3324,7 +3610,7 @@ var sinkPromises = {};
 var getSink = (src, logLevel) => {
   let promise = sinkPromises[src];
   if (!promise) {
-    Internals12.Log.verbose({
+    Internals16.Log.verbose({
       logLevel,
       tag: "@remotion/media"
     }, `Sink for ${src} was not found, creating new sink`);
@@ -3464,7 +3750,7 @@ var extractAudio = (params) => {
 };
 
 // src/video-extraction/extract-frame.ts
-import { Internals as Internals13 } from "remotion";
+import { Internals as Internals17 } from "remotion";
 var extractFrameInternal = async ({
   src,
   timeInSeconds: unloopedTimeInSeconds,
@@ -3545,7 +3831,7 @@ var extractFrameInternal = async ({
       durationInSeconds: await sink.getDuration()
     };
   } catch (err) {
-    Internals13.Log.info({ logLevel, tag: "@remotion/media" }, `Error decoding ${src} at time ${timeInSeconds}: ${err}`, err);
+    Internals17.Log.info({ logLevel, tag: "@remotion/media" }, `Error decoding ${src} at time ${timeInSeconds}: ${err}`, err);
     return { type: "cannot-decode", durationInSeconds: mediaDurationInSeconds };
   }
 };
@@ -3941,13 +4227,13 @@ var AudioForRendering = ({
   trimBefore,
   onError
 }) => {
-  const defaultLogLevel = Internals14.useLogLevel();
+  const defaultLogLevel = Internals18.useLogLevel();
   const logLevel = overriddenLogLevel ?? defaultLogLevel;
   const frame = useCurrentFrame3();
-  const absoluteFrame = Internals14.useTimelinePosition();
-  const videoConfig = Internals14.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext3(Internals14.RenderAssetManager);
-  const startsAt = Internals14.useMediaStartsAt();
+  const absoluteFrame = Internals18.useTimelinePosition();
+  const videoConfig = Internals18.useUnsafeVideoConfig();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext4(Internals18.RenderAssetManager);
+  const startsAt = Internals18.useMediaStartsAt();
   const environment = useRemotionEnvironment();
   if (!videoConfig) {
     throw new Error("No video config found");
@@ -3958,7 +4244,7 @@ var AudioForRendering = ({
   const { fps } = videoConfig;
   const { delayRender, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState3(false);
-  const sequenceContext = useContext3(Internals14.SequenceContext);
+  const sequenceContext = useContext4(Internals18.SequenceContext);
   const id = useMemo3(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -3966,7 +4252,7 @@ var AudioForRendering = ({
     sequenceContext?.durationInFrames
   ]);
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
-  const audioEnabled = Internals14.useAudioEnabled();
+  const audioEnabled = Internals18.useAudioEnabled();
   useLayoutEffect2(() => {
     const timestamp = frame / fps;
     const durationInSeconds = 1 / fps;
@@ -4016,7 +4302,7 @@ var AudioForRendering = ({
         if (action === "fail") {
           cancelRender2(errorToUse);
         }
-        Internals14.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+        Internals18.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
         setReplaceWithHtml5Audio(true);
       };
       if (result.type === "unknown-container-format") {
@@ -4043,12 +4329,12 @@ var AudioForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals14.evaluateVolume({
+      const volume = Internals18.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals14.warnAboutTooHighVolume(volume);
+      Internals18.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -4124,9 +4410,27 @@ var AudioForRendering = ({
 
 // src/audio/audio.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-var { validateMediaProps } = Internals15;
-var Audio = (props) => {
-  const { name, stack, showInTimeline, ...otherProps } = props;
+var { validateMediaProps } = Internals19;
+var audioSchema = {
+  volume: {
+    type: "number",
+    min: 0,
+    max: 20,
+    step: 0.01,
+    default: 1,
+    description: "Volume"
+  },
+  playbackRate: {
+    type: "number",
+    min: 0.1,
+    step: 0.01,
+    default: 1,
+    description: "Playback Rate"
+  },
+  loop: { type: "boolean", default: false, description: "Loop" }
+};
+var AudioInner = (props) => {
+  const { name, stack, showInTimeline, controls, ...otherProps } = props;
   const environment = useRemotionEnvironment2();
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
@@ -4140,17 +4444,19 @@ var Audio = (props) => {
   return /* @__PURE__ */ jsx3(AudioForPreview, {
     name,
     ...otherProps,
-    stack: stack ?? null
+    stack: stack ?? null,
+    controls
   });
 };
-Internals15.addSequenceStackTraces(Audio);
+var Audio = Internals19.wrapInSchema(AudioInner, audioSchema);
+Internals19.addSequenceStackTraces(Audio);
 
 // src/video/video.tsx
-import { Internals as Internals18, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
+import { Internals as Internals22, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
 
 // src/video/video-for-preview.tsx
 import {
-  useContext as useContext4,
+  useContext as useContext5,
   useEffect as useEffect3,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo4,
@@ -4159,7 +4465,7 @@ import {
 } from "react";
 import {
   Html5Video,
-  Internals as Internals16,
+  Internals as Internals20,
   useBufferState as useBufferState2,
   useCurrentFrame as useCurrentFrame4,
   useVideoConfig as useVideoConfig3
@@ -4177,7 +4483,7 @@ var {
   usePreload: usePreload2,
   SequenceContext: SequenceContext2,
   SequenceVisibilityToggleContext
-} = Internals16;
+} = Internals20;
 var VideoForPreviewAssertedShowing = ({
   src: unpreloadedSrc,
   style,
@@ -4198,6 +4504,7 @@ var VideoForPreviewAssertedShowing = ({
   fallbackOffthreadVideoProps,
   audioStreamIndex,
   debugOverlay,
+  debugAudioScheduling,
   headless,
   onError,
   controls
@@ -4213,26 +4520,28 @@ var VideoForPreviewAssertedShowing = ({
   const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState4(false);
   const [playing] = Timeline2.usePlayingState();
-  const timelineContext = useContext4(Internals16.TimelineContext);
+  const timelineContext = Internals20.useTimelineContext();
   const globalPlaybackRate = timelineContext.playbackRate;
-  const sharedAudioContext = useContext4(SharedAudioContext2);
+  const sharedAudioContext = useContext5(SharedAudioContext2);
   const buffer = useBufferState2();
   const [mediaMuted] = useMediaMutedState2();
   const [mediaVolume] = useMediaVolumeState2();
   const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState4(null);
-  const { hidden } = useContext4(SequenceVisibilityToggleContext);
+  const { hidden } = useContext5(SequenceVisibilityToggleContext);
   const volumePropFrame = useFrameForVolumeProp2(loopVolumeCurveBehavior);
   const userPreferredVolume = evaluateVolume2({
     frame: volumePropFrame,
     volume,
     mediaVolume
   });
+  if (!videoConfig) {
+    throw new Error("No video config found");
+  }
   warnAboutTooHighVolume2(userPreferredVolume);
-  const parentSequence = useContext4(SequenceContext2);
+  const parentSequence = useContext5(SequenceContext2);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
-  const { premountFramesRemaining, playing: playingWhilePremounting } = useContext4(Internals16.PremountContext);
-  const isNextFrameGoingToPlay = playingWhilePremounting && premountFramesRemaining > 0 && premountFramesRemaining <= 1.000000001;
+  const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
   const loopDisplay = useLoopDisplay({
     loop,
     mediaDurationInSeconds,
@@ -4257,34 +4566,35 @@ var VideoForPreviewAssertedShowing = ({
     controls
   });
   const isSequenceHidden = hidden[timelineId] ?? false;
-  if (!videoConfig) {
-    throw new Error("No video config found");
-  }
   const currentTime = frame / videoConfig.fps;
   const currentTimeRef = useRef2(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
-  const buffering = useContext4(Internals16.BufferingContextReact);
+  const buffering = useContext5(Internals20.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
-  const isPlayerBuffering = Internals16.useIsPlayerBuffering(buffering);
+  const isPlayerBuffering = Internals20.useIsPlayerBuffering(buffering);
   const initialPlaying = useRef2(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef2(isPremounting);
   const initialIsPostmounting = useRef2(isPostmounting);
   const initialGlobalPlaybackRate = useRef2(globalPlaybackRate);
   const initialPlaybackRate = useRef2(playbackRate);
   const initialMuted = useRef2(effectiveMuted);
+  const initialSequenceOffset = useRef2(sequenceOffset);
   useEffect3(() => {
     if (!sharedAudioContext)
       return;
+    if (!sharedAudioContext.audioContext)
+      return;
+    const { audioContext, audioSyncAnchor, scheduleAudioNode } = sharedAudioContext;
     try {
       const player = new MediaPlayer({
         canvas: canvasRef.current,
         src: preloadedSrc,
         logLevel,
-        sharedAudioContext: sharedAudioContext.audioContext,
+        sharedAudioContext: { audioContext, audioSyncAnchor, scheduleAudioNode },
         loop,
         trimAfter: initialTrimAfterRef.current,
         trimBefore: initialTrimBeforeRef.current,
@@ -4292,13 +4602,15 @@ var VideoForPreviewAssertedShowing = ({
         playbackRate: initialPlaybackRate.current,
         audioStreamIndex,
         debugOverlay,
+        debugAudioScheduling,
         bufferState: buffer,
         isPremounting: initialIsPremounting.current,
         isPostmounting: initialIsPostmounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
         durationInFrames: videoConfig.durationInFrames,
         onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
-        playing: initialPlaying.current
+        playing: initialPlaying.current,
+        sequenceOffset: initialSequenceOffset.current
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -4316,7 +4628,7 @@ var VideoForPreviewAssertedShowing = ({
           if (action === "fail") {
             throw errorToUse;
           }
-          Internals16.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+          Internals20.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
           setShouldFallbackToNativeVideo(true);
         };
         if (result.type === "unknown-container-format") {
@@ -4350,7 +4662,7 @@ var VideoForPreviewAssertedShowing = ({
         if (action === "fail") {
           throw errorToUse;
         }
-        Internals16.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
+        Internals20.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
         setShouldFallbackToNativeVideo(true);
       });
     } catch (error) {
@@ -4364,12 +4676,12 @@ var VideoForPreviewAssertedShowing = ({
       if (action === "fail") {
         throw errorToUse;
       }
-      Internals16.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
+      Internals20.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
       setShouldFallbackToNativeVideo(true);
     }
     return () => {
       if (mediaPlayerRef.current) {
-        Internals16.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
+        Internals20.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -4380,6 +4692,7 @@ var VideoForPreviewAssertedShowing = ({
     audioStreamIndex,
     buffer,
     debugOverlay,
+    debugAudioScheduling,
     disallowFallbackToOffthreadVideo,
     logLevel,
     loop,
@@ -4390,65 +4703,33 @@ var VideoForPreviewAssertedShowing = ({
     videoConfig.durationInFrames
   ]);
   const classNameValue = useMemo4(() => {
-    return [Internals16.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals16.truthy).join(" ");
+    return [Internals20.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals20.truthy).join(" ");
   }, [className]);
-  useEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer)
-      return;
-    if (isNextFrameGoingToPlay) {
-      const currentTimeUntilZero = premountFramesRemaining / videoConfig.fps / globalPlaybackRate;
-      mediaPlayer.playAudio(currentTimeRef.current - currentTimeUntilZero);
-    }
-  }, [
-    isNextFrameGoingToPlay,
-    premountFramesRemaining,
-    videoConfig.fps,
-    globalPlaybackRate
-  ]);
-  useEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer)
-      return;
-    if (playing && !isPlayerBuffering && !isNextFrameGoingToPlay) {
-      mediaPlayer.play(currentTimeRef.current);
-    } else {
-      mediaPlayer.pause();
-    }
-  }, [
-    isPlayerBuffering,
+  useCommonEffects({
+    mediaPlayerRef,
+    mediaPlayerReady,
+    currentTimeRef,
     playing,
+    isPlayerBuffering,
+    frame,
+    trimBefore,
+    trimAfter,
+    effectiveMuted,
+    userPreferredVolume,
+    playbackRate,
+    globalPlaybackRate,
+    fps: videoConfig.fps,
+    sequenceOffset,
+    loop,
+    debugAudioScheduling,
+    durationInFrames: videoConfig.durationInFrames,
+    isPremounting,
+    isPostmounting,
+    currentTime,
     logLevel,
-    mediaPlayerReady,
-    isNextFrameGoingToPlay
-  ]);
-  useEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
-  }, [trimBefore, mediaPlayerReady]);
-  useEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
-  }, [trimAfter, mediaPlayerReady]);
-  useLayoutEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady)
-      return;
-    mediaPlayer.setMuted(effectiveMuted);
-  }, [effectiveMuted, mediaPlayerReady]);
-  useLayoutEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setVolume(userPreferredVolume);
-  }, [userPreferredVolume, mediaPlayerReady]);
+    sharedAudioContext,
+    label: "VideoForPreview"
+  });
   useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
@@ -4456,55 +4737,6 @@ var VideoForPreviewAssertedShowing = ({
     }
     mediaPlayer.setDebugOverlay(debugOverlay);
   }, [debugOverlay, mediaPlayerReady]);
-  useLayoutEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setPlaybackRate(playbackRate, currentTimeRef.current);
-  }, [playbackRate, mediaPlayerReady]);
-  useLayoutEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setGlobalPlaybackRate(globalPlaybackRate);
-  }, [globalPlaybackRate, mediaPlayerReady]);
-  useLayoutEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setLoop(loop);
-  }, [loop, mediaPlayerReady]);
-  useLayoutEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setDurationInFrames(videoConfig.durationInFrames);
-  }, [videoConfig.durationInFrames, mediaPlayerReady]);
-  useLayoutEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setIsPremounting(isPremounting);
-  }, [isPremounting, mediaPlayerReady]);
-  useLayoutEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setIsPostmounting(isPostmounting);
-  }, [isPostmounting, mediaPlayerReady]);
-  useLayoutEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setFps(videoConfig.fps);
-  }, [videoConfig.fps, mediaPlayerReady]);
   useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
@@ -4512,13 +4744,6 @@ var VideoForPreviewAssertedShowing = ({
     }
     mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
   }, [onVideoFrame, mediaPlayerReady]);
-  useLayoutEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady)
-      return;
-    mediaPlayer.seekTo(currentTime).catch(() => {});
-    Internals16.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
-  }, [currentTime, logLevel, mediaPlayerReady]);
   const actualStyle = useMemo4(() => {
     return {
       ...style,
@@ -4548,66 +4773,21 @@ var VideoForPreviewAssertedShowing = ({
   }
   return /* @__PURE__ */ jsx4("canvas", {
     ref: canvasRef,
-    width: videoConfig.width,
-    height: videoConfig.height,
     style: actualStyle,
     className: classNameValue
   });
 };
-var videoSchema = {
-  volume: {
-    type: "number",
-    min: 0,
-    max: 20,
-    step: 0.01,
-    default: 1,
-    description: "Volume"
-  },
-  playbackRate: {
-    type: "number",
-    min: 0,
-    step: 0.01,
-    default: 1,
-    description: "Playback Rate"
-  },
-  trimBefore: { type: "number", min: 0, default: 0 },
-  trimAfter: { type: "number", min: 0, default: 0 }
-};
 var VideoForPreview = (props) => {
-  const schemaInput = useMemo4(() => {
-    if (typeof props.volume !== "number") {
-      return null;
-    }
-    return {
-      volume: props.volume,
-      playbackRate: props.playbackRate,
-      trimBefore: props.trimBefore,
-      trimAfter: props.trimAfter,
-      loop: props.loop
-    };
-  }, [
-    props.volume,
-    props.playbackRate,
-    props.trimBefore,
-    props.trimAfter,
-    props.loop
-  ]);
-  const { controls, values } = Internals16.useSchema(schemaInput ? videoSchema : null, schemaInput);
-  const volume = schemaInput !== null ? values.volume : props.volume;
-  const playbackRate = schemaInput !== null ? values.playbackRate : props.playbackRate;
-  const trimBefore = schemaInput !== null ? values.trimBefore : props.trimBefore;
-  const trimAfter = schemaInput !== null ? values.trimAfter : props.trimAfter;
-  const effectiveLoop = schemaInput !== null ? values.loop : props.loop;
   const frame = useCurrentFrame4();
   const videoConfig = useVideoConfig3();
   const currentTime = frame / videoConfig.fps;
   const showShow = useMemo4(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
-      playbackRate,
-      loop: effectiveLoop,
-      trimBefore,
-      trimAfter,
+      playbackRate: props.playbackRate,
+      loop: props.loop,
+      trimBefore: props.trimBefore,
+      trimAfter: props.trimAfter,
       mediaDurationInSeconds: Infinity,
       fps: videoConfig.fps,
       ifNoMediaDuration: "infinity",
@@ -4615,37 +4795,32 @@ var VideoForPreview = (props) => {
     }) !== null;
   }, [
     currentTime,
-    effectiveLoop,
-    playbackRate,
+    props.loop,
+    props.playbackRate,
     props.src,
-    trimAfter,
-    trimBefore,
-    videoConfig.fps
+    videoConfig.fps,
+    props.trimBefore,
+    props.trimAfter
   ]);
   if (!showShow) {
     return null;
   }
   return /* @__PURE__ */ jsx4(VideoForPreviewAssertedShowing, {
     ...props,
-    volume,
-    playbackRate,
-    loop: effectiveLoop,
-    trimBefore,
-    trimAfter,
-    controls
+    controls: props.controls
   });
 };
 
 // src/video/video-for-rendering.tsx
 import {
-  useContext as useContext5,
+  useContext as useContext6,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo5,
   useRef as useRef3,
   useState as useState5
 } from "react";
 import {
-  Internals as Internals17,
+  Internals as Internals21,
   Loop,
   random as random2,
   useCurrentFrame as useCurrentFrame5,
@@ -4682,11 +4857,11 @@ var VideoForRendering = ({
     throw new TypeError("No `src` was passed to <Video>.");
   }
   const frame = useCurrentFrame5();
-  const absoluteFrame = Internals17.useTimelinePosition();
+  const absoluteFrame = Internals21.useTimelinePosition();
   const { fps } = useVideoConfig4();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext5(Internals17.RenderAssetManager);
-  const startsAt = Internals17.useMediaStartsAt();
-  const sequenceContext = useContext5(Internals17.SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext6(Internals21.RenderAssetManager);
+  const startsAt = Internals21.useMediaStartsAt();
+  const sequenceContext = useContext6(Internals21.SequenceContext);
   const id = useMemo5(() => `media-video-${random2(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -4697,8 +4872,8 @@ var VideoForRendering = ({
   const { delayRender, continueRender, cancelRender: cancelRender3 } = useDelayRender2();
   const canvasRef = useRef3(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
-  const audioEnabled = Internals17.useAudioEnabled();
-  const videoEnabled = Internals17.useVideoEnabled();
+  const audioEnabled = Internals21.useAudioEnabled();
+  const videoEnabled = Internals21.useVideoEnabled();
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
   const [error, setError] = useState5(null);
   if (error) {
@@ -4762,7 +4937,7 @@ var VideoForRendering = ({
           return;
         }
         if (window.remotion_isMainTab) {
-          Internals17.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+          Internals21.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
         }
         setReplaceWithOffthreadVideo({
           durationInSeconds: mediaDurationInSeconds
@@ -4817,12 +4992,12 @@ var VideoForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals17.evaluateVolume({
+      const volume = Internals21.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals17.warnAboutTooHighVolume(volume);
+      Internals21.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -4878,10 +5053,10 @@ var VideoForRendering = ({
     onError
   ]);
   const classNameValue = useMemo5(() => {
-    return [Internals17.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals17.truthy).join(" ");
+    return [Internals21.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals21.truthy).join(" ");
   }, [className]);
   if (replaceWithOffthreadVideo) {
-    const fallback = /* @__PURE__ */ jsx5(Internals17.InnerOffthreadVideo, {
+    const fallback = /* @__PURE__ */ jsx5(Internals21.InnerOffthreadVideo, {
       src,
       playbackRate: playbackRate ?? 1,
       muted: muted ?? false,
@@ -4921,7 +5096,7 @@ var VideoForRendering = ({
       }
       return /* @__PURE__ */ jsx5(Loop, {
         layout: "none",
-        durationInFrames: Internals17.calculateMediaDuration({
+        durationInFrames: Internals21.calculateMediaDuration({
           trimAfter: trimAfterValue,
           mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
           playbackRate,
@@ -4944,7 +5119,53 @@ var VideoForRendering = ({
 
 // src/video/video.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals18;
+var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals22;
+var videoSchema = {
+  volume: {
+    type: "number",
+    min: 0,
+    max: 20,
+    step: 0.01,
+    default: 1,
+    description: "Volume"
+  },
+  playbackRate: {
+    type: "number",
+    min: 0.1,
+    step: 0.01,
+    default: 1,
+    description: "Playback Rate"
+  },
+  loop: { type: "boolean", default: false, description: "Loop" },
+  "style.translate": {
+    type: "translate",
+    step: 1,
+    default: "0px 0px",
+    description: "Position"
+  },
+  "style.scale": {
+    type: "number",
+    min: 0.05,
+    max: 100,
+    step: 0.01,
+    default: 1,
+    description: "Scale"
+  },
+  "style.rotate": {
+    type: "rotation",
+    step: 1,
+    default: "0deg",
+    description: "Rotation"
+  },
+  "style.opacity": {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Opacity"
+  }
+};
 var InnerVideo = ({
   src,
   audioStreamIndex,
@@ -4968,8 +5189,10 @@ var InnerVideo = ({
   toneFrequency,
   showInTimeline,
   debugOverlay,
+  debugAudioScheduling,
   headless,
-  onError
+  onError,
+  controls
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -5034,11 +5257,13 @@ var InnerVideo = ({
     disallowFallbackToOffthreadVideo,
     fallbackOffthreadVideoProps,
     debugOverlay: debugOverlay ?? false,
+    debugAudioScheduling: debugAudioScheduling ?? false,
     headless: headless ?? false,
-    onError
+    onError,
+    controls
   });
 };
-var Video = ({
+var VideoInner = ({
   src,
   audioStreamIndex,
   className,
@@ -5061,10 +5286,12 @@ var Video = ({
   stack,
   toneFrequency,
   debugOverlay,
+  debugAudioScheduling,
   headless,
-  onError
+  onError,
+  controls
 }) => {
-  const fallbackLogLevel = Internals18.useLogLevel();
+  const fallbackLogLevel = Internals22.useLogLevel();
   return /* @__PURE__ */ jsx6(InnerVideo, {
     audioStreamIndex: audioStreamIndex ?? 0,
     className,
@@ -5088,11 +5315,14 @@ var Video = ({
     toneFrequency: toneFrequency ?? 1,
     stack,
     debugOverlay: debugOverlay ?? false,
+    debugAudioScheduling: debugAudioScheduling ?? false,
     headless: headless ?? false,
-    onError
+    onError,
+    controls
   });
 };
-Internals18.addSequenceStackTraces(Video);
+var Video = Internals22.wrapInSchema(VideoInner, videoSchema);
+Internals22.addSequenceStackTraces(Video);
 
 // src/index.ts
 var experimental_Audio = Audio;