@remotion/media 4.0.364 → 4.0.365

package/dist/esm/index.mjs

@@ -20,22 +20,124 @@ import {
 } from "mediabunny";
 import { Internals as Internals2 } from "remotion";
 
+// src/helpers/round-to-4-digits.ts
+var roundTo4Digits = (timestamp) => {
+  return Math.round(timestamp * 1000) / 1000;
+};
+
 // src/audio/audio-preview-iterator.ts
-var HEALTHY_BUFFER_THRESHOLD_SECONDS = 1;
 var makeAudioIterator = (audioSink, startFromSecond) => {
   let destroyed = false;
   const iterator = audioSink.buffers(startFromSecond);
-  let audioIteratorStarted = false;
-  let audioBufferHealth = 0;
-  const queuedAudioNodes = new Set;
+  const queuedAudioNodes = [];
   const cleanupAudioQueue = () => {
     for (const node of queuedAudioNodes) {
-      node.stop();
+      node.node.stop();
+    }
+    queuedAudioNodes.length = 0;
+  };
+  let lastReturnedBuffer = null;
+  let iteratorEnded = false;
+  const getNextOrNullIfNotAvailable = async () => {
+    const next = iterator.next();
+    const result = await Promise.race([
+      next,
+      new Promise((resolve) => {
+        Promise.resolve().then(() => resolve());
+      })
+    ]);
+    if (!result) {
+      return {
+        type: "need-to-wait-for-it",
+        waitPromise: async () => {
+          const res = await next;
+          if (res.value) {
+            lastReturnedBuffer = res.value;
+          } else {
+            iteratorEnded = true;
+          }
+          return res.value;
+        }
+      };
+    }
+    if (result.value) {
+      lastReturnedBuffer = result.value;
+    } else {
+      iteratorEnded = true;
+    }
+    return {
+      type: "got-buffer-or-end",
+      buffer: result.value ?? null
+    };
+  };
+  const tryToSatisfySeek = async (time) => {
+    if (lastReturnedBuffer) {
+      const bufferTimestamp = roundTo4Digits(lastReturnedBuffer.timestamp);
+      const bufferEndTimestamp = roundTo4Digits(lastReturnedBuffer.timestamp + lastReturnedBuffer.duration);
+      if (roundTo4Digits(time) < bufferTimestamp) {
+        return {
+          type: "not-satisfied",
+          reason: `iterator is too far, most recently returned ${bufferTimestamp}-${bufferEndTimestamp}, requested ${time}`
+        };
+      }
+      if (roundTo4Digits(time) <= bufferEndTimestamp) {
+        return {
+          type: "satisfied",
+          buffers: [lastReturnedBuffer]
+        };
+      }
+    }
+    if (iteratorEnded) {
+      if (lastReturnedBuffer) {
+        return {
+          type: "satisfied",
+          buffers: [lastReturnedBuffer]
+        };
+      }
+      return {
+        type: "not-satisfied",
+        reason: "iterator ended"
+      };
+    }
+    const toBeReturned = [];
+    while (true) {
+      const buffer = await getNextOrNullIfNotAvailable();
+      if (buffer.type === "need-to-wait-for-it") {
+        return {
+          type: "not-satisfied",
+          reason: "iterator did not have buffer ready"
+        };
+      }
+      if (buffer.type === "got-buffer-or-end") {
+        if (buffer.buffer === null) {
+          iteratorEnded = true;
+          if (lastReturnedBuffer) {
+            return {
+              type: "satisfied",
+              buffers: [lastReturnedBuffer]
+            };
+          }
+          return {
+            type: "not-satisfied",
+            reason: "iterator ended and did not have buffer ready"
+          };
+        }
+        const bufferTimestamp = roundTo4Digits(buffer.buffer.timestamp);
+        const bufferEndTimestamp = roundTo4Digits(buffer.buffer.timestamp + buffer.buffer.duration);
+        const timestamp = roundTo4Digits(time);
+        if (bufferTimestamp <= timestamp && bufferEndTimestamp > timestamp) {
+          return {
+            type: "satisfied",
+            buffers: [...toBeReturned, buffer.buffer]
+          };
+        }
+        toBeReturned.push(buffer.buffer);
+        continue;
+      }
+      throw new Error("Unreachable");
     }
-    queuedAudioNodes.clear();
   };
   return {
-    cleanupAudioQueue,
     destroy: () => {
       cleanupAudioQueue();
       destroyed = true;
@@ -43,42 +145,96 @@ var makeAudioIterator = (audioSink, startFromSecond) => {
         return;
       });
     },
-    isReadyToPlay: () => {
-      return audioIteratorStarted && audioBufferHealth > 0;
-    },
-    setAudioIteratorStarted: (started) => {
-      audioIteratorStarted = started;
-    },
     getNext: () => {
       return iterator.next();
     },
-    setAudioBufferHealth: (health) => {
-      audioBufferHealth = health;
-    },
     isDestroyed: () => {
       return destroyed;
     },
-    addQueuedAudioNode: (node) => {
-      queuedAudioNodes.add(node);
+    addQueuedAudioNode: (node, timestamp, buffer) => {
+      queuedAudioNodes.push({ node, timestamp, buffer });
     },
     removeQueuedAudioNode: (node) => {
-      queuedAudioNodes.delete(node);
-    }
+      const index = queuedAudioNodes.findIndex((n) => n.node === node);
+      if (index !== -1) {
+        queuedAudioNodes.splice(index, 1);
+      }
+    },
+    removeAndReturnAllQueuedAudioNodes: () => {
+      const nodes = queuedAudioNodes.slice();
+      for (const node of nodes) {
+        node.node.stop();
+      }
+      queuedAudioNodes.length = 0;
+      return nodes;
+    },
+    getQueuedPeriod: () => {
+      const lastNode = queuedAudioNodes[queuedAudioNodes.length - 1];
+      if (!lastNode) {
+        return null;
+      }
+      const firstNode = queuedAudioNodes[0];
+      if (!firstNode) {
+        return null;
+      }
+      return {
+        from: firstNode.timestamp,
+        until: lastNode.timestamp + lastNode.buffer.duration
+      };
+    },
+    tryToSatisfySeek
   };
 };
+var isAlreadyQueued = (time, queuedPeriod) => {
+  if (!queuedPeriod) {
+    return false;
+  }
+  return time >= queuedPeriod.from && time < queuedPeriod.until;
+};
 
 // src/debug-overlay/preview-overlay.ts
-var drawPreviewOverlay = (context, stats, audioContextState, audioSyncAnchor) => {
+var drawPreviewOverlay = ({
+  context,
+  stats,
+  audioTime,
+  audioContextState,
+  audioIterator,
+  audioSyncAnchor,
+  audioChunksForAfterResuming,
+  playing
+}) => {
+  const lines = [
+    "Debug overlay",
+    `Video iterators created: ${stats.videoIteratorsCreated}`,
+    `Audio iterators created: ${stats.audioIteratorsCreated}`,
+    `Frames rendered: ${stats.framesRendered}`,
+    `Audio context state: ${audioContextState}`,
+    `Audio time: ${(audioTime - audioSyncAnchor).toFixed(3)}s`
+  ];
+  if (audioIterator) {
+    const queuedPeriod = audioIterator.getQueuedPeriod();
+    if (queuedPeriod) {
+      lines.push(`Audio queued until: ${(queuedPeriod.until - (audioTime - audioSyncAnchor)).toFixed(3)}s`);
+    } else if (audioChunksForAfterResuming.length > 0) {
+      lines.push(`Audio chunks for after resuming: ${audioChunksForAfterResuming.length}`);
+    }
+    lines.push(`Playing: ${playing}`);
+  }
+  const lineHeight = 30;
+  const boxPaddingX = 10;
+  const boxPaddingY = 10;
+  const boxLeft = 20;
+  const boxTop = 20;
+  const boxWidth = 600;
+  const boxHeight = lines.length * lineHeight + 2 * boxPaddingY;
   context.fillStyle = "rgba(0, 0, 0, 1)";
-  context.fillRect(20, 20, 600, 180);
+  context.fillRect(boxLeft, boxTop, boxWidth, boxHeight);
   context.fillStyle = "white";
   context.font = "24px sans-serif";
   context.textBaseline = "top";
-  context.fillText(`Debug overlay`, 30, 30);
-  context.fillText(`Video iterators created: ${stats.videoIteratorsCreated}`, 30, 60);
-  context.fillText(`Frames rendered: ${stats.framesRendered}`, 30, 90);
-  context.fillText(`Audio context state: ${audioContextState}`, 30, 120);
-  context.fillText(`Audio time: ${audioSyncAnchor.toFixed(3)}s`, 30, 150);
+  for (let i = 0;i < lines.length; i++) {
+    context.fillText(lines[i], boxLeft + boxPaddingX, boxTop + boxPaddingY + i * lineHeight);
+  }
 };
 
 // src/get-time-in-seconds.ts
@@ -121,37 +277,6 @@ function isNetworkError(error) {
   return false;
 }
 
-// src/video/timeout-utils.ts
-var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-
-class TimeoutError extends Error {
-  constructor(message = "Operation timed out") {
-    super(message);
-    this.name = "TimeoutError";
-  }
-}
-function withTimeout(promise, timeoutMs, errorMessage = "Operation timed out") {
-  let timeoutId = null;
-  const timeoutPromise = new Promise((_, reject) => {
-    timeoutId = window.setTimeout(() => {
-      reject(new TimeoutError(errorMessage));
-    }, timeoutMs);
-  });
-  return Promise.race([
-    promise.finally(() => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    }),
-    timeoutPromise
-  ]);
-}
-
-// src/helpers/round-to-4-digits.ts
-var roundTo4Digits = (timestamp) => {
-  return Math.round(timestamp * 1000) / 1000;
-};
-
 // src/video/video-preview-iterator.ts
 var createVideoIterator = (timeToSeek, videoSink) => {
   let destroyed = false;
@@ -276,8 +401,6 @@ var createVideoIterator = (timeToSeek, videoSink) => {
 };
 
 // src/media-player.ts
-var AUDIO_BUFFER_TOLERANCE_THRESHOLD = 0.1;
-
 class MediaPlayer {
   canvas;
   context;
@@ -289,6 +412,7 @@ class MediaPlayer {
   videoFrameIterator = null;
   debugStats = {
     videoIteratorsCreated: 0,
+    audioIteratorsCreated: 0,
     framesRendered: 0
   };
   audioSink = null;
@@ -305,9 +429,6 @@ class MediaPlayer {
   trimAfter;
   initialized = false;
   totalDuration;
-  isBuffering = false;
-  onBufferingChangeCallback;
-  mediaEnded = false;
   debugOverlay = false;
   onVideoFrameCallback;
   initializationPromise = null;
@@ -358,9 +479,6 @@ class MediaPlayer {
   hasAudio() {
     return Boolean(this.audioSink && this.sharedAudioContext && this.gainNode);
   }
-  isCurrentlyBuffering() {
-    return this.isBuffering && Boolean(this.bufferingStartedAtMs);
-  }
   isDisposalError() {
     return this.input?.disposed === true;
   }
@@ -437,11 +555,11 @@ class MediaPlayer {
         return { type: "success", durationInSeconds: this.totalDuration };
       }
       if (this.sharedAudioContext) {
-        this.audioSyncAnchor = this.sharedAudioContext.currentTime - startTime;
+        this.setPlaybackTime(startTime);
       }
       this.initialized = true;
       try {
-        this.startAudioIterator(startTime);
+        this.startAudioIterator(startTime, this.currentSeekNonce);
         await this.startVideoIterator(startTime, this.currentSeekNonce);
       } catch (error) {
         if (this.isDisposalError()) {
@@ -503,32 +621,87 @@ class MediaPlayer {
     if (currentPlaybackTime === newTime) {
       return;
     }
-    const satisfyResult = await this.videoFrameIterator?.tryToSatisfySeek(newTime);
-    if (satisfyResult?.type === "satisfied") {
-      this.drawFrame(satisfyResult.frame);
-      return;
+    const newAudioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
+    const diff = Math.abs(newAudioSyncAnchor - this.audioSyncAnchor);
+    if (diff > 0.1) {
+      this.setPlaybackTime(newTime);
+    }
+    const videoSatisfyResult = await this.videoFrameIterator?.tryToSatisfySeek(newTime);
+    if (videoSatisfyResult?.type === "satisfied") {
+      this.drawFrame(videoSatisfyResult.frame);
+    } else if (videoSatisfyResult && this.currentSeekNonce === nonce) {
+      this.startVideoIterator(newTime, nonce);
+    }
+    const queuedPeriod = this.audioBufferIterator?.getQueuedPeriod();
+    const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, queuedPeriod);
+    const toBeScheduled = [];
+    if (!currentTimeIsAlreadyQueued) {
+      const audioSatisfyResult = await this.audioBufferIterator?.tryToSatisfySeek(newTime);
+      if (this.currentSeekNonce !== nonce) {
+        return;
+      }
+      if (!audioSatisfyResult) {
+        return;
+      }
+      if (audioSatisfyResult.type === "not-satisfied") {
+        await this.startAudioIterator(newTime, nonce);
+        return;
+      }
+      toBeScheduled.push(...audioSatisfyResult.buffers);
     }
-    if (this.currentSeekNonce !== nonce) {
-      return;
+    const nextTime = newTime + 1 / this.fps * this.playbackRate + 1 / this.fps * this.playbackRate;
+    const nextIsAlreadyQueued = isAlreadyQueued(nextTime, queuedPeriod);
+    if (!nextIsAlreadyQueued) {
+      const audioSatisfyResult = await this.audioBufferIterator?.tryToSatisfySeek(nextTime);
+      if (this.currentSeekNonce !== nonce) {
+        return;
+      }
+      if (!audioSatisfyResult) {
+        return;
+      }
+      if (audioSatisfyResult.type === "not-satisfied") {
+        await this.startAudioIterator(nextTime, nonce);
+        return;
+      }
+      toBeScheduled.push(...audioSatisfyResult.buffers);
+    }
+    for (const buffer of toBeScheduled) {
+      if (this.playing) {
+        this.scheduleAudioChunk(buffer.buffer, buffer.timestamp);
+      } else {
+        this.audioChunksForAfterResuming.push({
+          buffer: buffer.buffer,
+          timestamp: buffer.timestamp
+        });
+      }
     }
-    this.mediaEnded = false;
-    this.audioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
-    this.startAudioIterator(newTime);
-    this.startVideoIterator(newTime, nonce);
   }
-  async play() {
+  async play(time) {
     if (!this.isReady())
       return;
-    if (!this.playing) {
-      if (this.sharedAudioContext.state === "suspended") {
-        await this.sharedAudioContext.resume();
-      }
-      this.playing = true;
+    this.setPlaybackTime(time);
+    this.playing = true;
+    for (const chunk of this.audioChunksForAfterResuming) {
+      this.scheduleAudioChunk(chunk.buffer, chunk.timestamp);
+    }
+    if (this.sharedAudioContext.state === "suspended") {
+      await this.sharedAudioContext.resume();
     }
+    this.audioChunksForAfterResuming.length = 0;
+    this.drawDebugOverlay();
   }
   pause() {
     this.playing = false;
-    this.audioBufferIterator?.cleanupAudioQueue();
+    const toQueue = this.audioBufferIterator?.removeAndReturnAllQueuedAudioNodes();
+    if (toQueue) {
+      for (const chunk of toQueue) {
+        this.audioChunksForAfterResuming.push({
+          buffer: chunk.buffer,
+          timestamp: chunk.timestamp
+        });
+      }
+    }
+    this.drawDebugOverlay();
   }
   setMuted(muted) {
     this.muted = muted;
@@ -574,27 +747,25 @@ class MediaPlayer {
   getPlaybackTime() {
     return this.sharedAudioContext.currentTime - this.audioSyncAnchor;
   }
+  setPlaybackTime(time) {
+    this.audioSyncAnchor = this.sharedAudioContext.currentTime - time;
+  }
+  audioChunksForAfterResuming = [];
   scheduleAudioChunk(buffer, mediaTimestamp) {
-    const targetTime = mediaTimestamp + this.audioSyncAnchor;
-    const delay = targetTime - this.sharedAudioContext.currentTime;
+    const targetTime = (mediaTimestamp - (this.trimBefore ?? 0) / this.fps) / this.playbackRate;
+    const delay = targetTime + this.audioSyncAnchor - this.sharedAudioContext.currentTime;
     const node = this.sharedAudioContext.createBufferSource();
     node.buffer = buffer;
     node.playbackRate.value = this.playbackRate;
     node.connect(this.gainNode);
     if (delay >= 0) {
-      node.start(targetTime);
+      node.start(targetTime + this.audioSyncAnchor);
     } else {
       node.start(this.sharedAudioContext.currentTime, -delay);
     }
-    this.audioBufferIterator?.addQueuedAudioNode(node);
-    node.onended = () => this.audioBufferIterator?.removeQueuedAudioNode(node);
-  }
-  onBufferingChange(callback) {
-    this.onBufferingChangeCallback = callback;
-    return () => {
-      if (this.onBufferingChangeCallback === callback) {
-        this.onBufferingChangeCallback = undefined;
-      }
+    this.audioBufferIterator.addQueuedAudioNode(node, mediaTimestamp, buffer);
+    node.onended = () => {
+      return this.audioBufferIterator.removeQueuedAudioNode(node);
     };
   }
   onVideoFrame(callback) {
@@ -621,26 +792,51 @@ class MediaPlayer {
     }
     Internals2.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
   };
-  startAudioIterator = (startFromSecond) => {
+  startAudioIterator = async (startFromSecond, nonce) => {
     if (!this.hasAudio())
       return;
     this.audioBufferIterator?.destroy();
-    try {
-      const iterator = makeAudioIterator(this.audioSink, startFromSecond);
-      this.audioBufferIterator = iterator;
-      this.runAudioIterator(startFromSecond, iterator);
-    } catch (error) {
-      if (this.isDisposalError()) {
+    this.audioChunksForAfterResuming = [];
+    const delayHandle = this.bufferState.delayPlayback();
+    const iterator = makeAudioIterator(this.audioSink, startFromSecond);
+    this.debugStats.audioIteratorsCreated++;
+    this.audioBufferIterator = iterator;
+    for (let i = 0;i < 3; i++) {
+      const result = await iterator.getNext();
+      if (iterator.isDestroyed()) {
+        delayHandle.unblock();
+        return;
+      }
+      if (nonce !== this.currentSeekNonce) {
+        delayHandle.unblock();
+        return;
+      }
+      if (!result.value) {
+        delayHandle.unblock();
         return;
       }
-      Internals2.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio iterator", error);
+      const { buffer, timestamp } = result.value;
+      this.audioChunksForAfterResuming.push({
+        buffer,
+        timestamp
+      });
     }
+    delayHandle.unblock();
   };
   drawDebugOverlay() {
     if (!this.debugOverlay)
       return;
     if (this.context && this.canvas) {
-      drawPreviewOverlay(this.context, this.debugStats, this.sharedAudioContext.state, this.sharedAudioContext.currentTime);
+      drawPreviewOverlay({
+        context: this.context,
+        stats: this.debugStats,
+        audioTime: this.sharedAudioContext.currentTime,
+        audioContextState: this.sharedAudioContext.state,
+        audioSyncAnchor: this.audioSyncAnchor,
+        audioIterator: this.audioBufferIterator,
+        audioChunksForAfterResuming: this.audioChunksForAfterResuming,
+        playing: this.playing
+      });
     }
   }
   startVideoIterator = async (timeToSeek, nonce) => {
@@ -651,9 +847,9 @@ class MediaPlayer {
     const iterator = createVideoIterator(timeToSeek, this.canvasSink);
     this.debugStats.videoIteratorsCreated++;
     this.videoFrameIterator = iterator;
-    const delayHandle = this.bufferState?.delayPlayback();
+    const delayHandle = this.bufferState.delayPlayback();
     const frameResult = await iterator.getNext();
-    delayHandle?.unblock();
+    delayHandle.unblock();
     if (iterator.isDestroyed()) {
       return;
     }
@@ -663,101 +859,10 @@ class MediaPlayer {
     if (this.videoFrameIterator.isDestroyed()) {
       return;
     }
-    if (frameResult.value) {
-      this.audioSyncAnchor = this.sharedAudioContext.currentTime - frameResult.value.timestamp;
-      this.drawFrame(frameResult.value);
-    } else {}
-  };
-  bufferingStartedAtMs = null;
-  minBufferingTimeoutMs = 500;
-  setBufferingState(isBuffering) {
-    if (this.isBuffering !== isBuffering) {
-      this.isBuffering = isBuffering;
-      if (isBuffering) {
-        this.bufferingStartedAtMs = performance.now();
-        this.onBufferingChangeCallback?.(true);
-      } else {
-        this.bufferingStartedAtMs = null;
-        this.onBufferingChangeCallback?.(false);
-      }
-    }
-  }
-  maybeResumeFromBuffering(currentBufferDuration) {
-    if (!this.isCurrentlyBuffering())
+    if (!frameResult.value) {
       return;
-    const now = performance.now();
-    const bufferingDuration = now - this.bufferingStartedAtMs;
-    const minTimeElapsed = bufferingDuration >= this.minBufferingTimeoutMs;
-    const bufferHealthy = currentBufferDuration >= HEALTHY_BUFFER_THRESHOLD_SECONDS;
-    if (minTimeElapsed && bufferHealthy) {
-      Internals2.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Resuming from buffering after ${bufferingDuration}ms - buffer recovered`);
-      this.setBufferingState(false);
-    }
-  }
-  runAudioIterator = async (startFromSecond, audioIterator) => {
-    if (!this.hasAudio())
-      return;
-    try {
-      let totalBufferDuration = 0;
-      let isFirstBuffer = true;
-      audioIterator.setAudioIteratorStarted(true);
-      while (true) {
-        if (audioIterator.isDestroyed()) {
-          return;
-        }
-        const BUFFERING_TIMEOUT_MS = 50;
-        let result;
-        try {
-          result = await withTimeout(audioIterator.getNext(), BUFFERING_TIMEOUT_MS, "Iterator timeout");
-        } catch (error) {
-          if (error instanceof TimeoutError && !this.mediaEnded) {
-            this.setBufferingState(true);
-          }
-          await sleep(10);
-          continue;
-        }
-        if (result.done || !result.value) {
-          this.mediaEnded = true;
-          break;
-        }
-        const { buffer, timestamp, duration } = result.value;
-        totalBufferDuration += duration;
-        audioIterator.setAudioBufferHealth(Math.max(0, totalBufferDuration / this.playbackRate));
-        this.maybeResumeFromBuffering(totalBufferDuration / this.playbackRate);
-        if (this.playing) {
-          if (isFirstBuffer) {
-            this.audioSyncAnchor = this.sharedAudioContext.currentTime - timestamp;
-            isFirstBuffer = false;
-          }
-          if (timestamp < startFromSecond - AUDIO_BUFFER_TOLERANCE_THRESHOLD) {
-            continue;
-          }
-          this.scheduleAudioChunk(buffer, timestamp);
-        }
-        const playbackTime = this.getPlaybackTime();
-        if (playbackTime === null) {
-          continue;
-        }
-        if (timestamp - playbackTime >= 1) {
-          await new Promise((resolve) => {
-            const check = () => {
-              const currentPlaybackTime = this.getPlaybackTime();
-              if (currentPlaybackTime !== null && timestamp - currentPlaybackTime < 1) {
-                resolve();
-              } else {
-                requestAnimationFrame(check);
-              }
-            };
-            check();
-          });
-        }
-      }
-    } catch (error) {
-      if (this.isDisposalError()) {
-        return;
-      }
-      Internals2.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to run audio iterator", error);
     }
+    this.drawFrame(frameResult.value);
   };
 }
 
@@ -1010,6 +1115,11 @@ var NewAudioForPreview = ({
     trimAfter,
     trimBefore
   });
+  const buffering = useContext2(Internals5.BufferingContextReact);
+  if (!buffering) {
+    throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
+  }
+  const isPlayerBuffering = Internals5.useIsPlayerBuffering(buffering);
   useEffect2(() => {
     if (!sharedAudioContext)
       return;
@@ -1107,14 +1217,12 @@ var NewAudioForPreview = ({
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer)
       return;
-    if (playing) {
-      audioPlayer.play().catch((error) => {
-        Internals5.Log.error({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] Failed to play", error);
-      });
+    if (playing && !isPlayerBuffering) {
+      audioPlayer.play(currentTimeRef.current);
     } else {
       audioPlayer.pause();
     }
-  }, [playing, logLevel, mediaPlayerReady]);
+  }, [isPlayerBuffering, logLevel, playing]);
   useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady)
@@ -1122,21 +1230,6 @@ var NewAudioForPreview = ({
     audioPlayer.seekTo(currentTime);
     Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
   }, [currentTime, logLevel, mediaPlayerReady]);
-  useEffect2(() => {
-    const audioPlayer = mediaPlayerRef.current;
-    if (!audioPlayer || !mediaPlayerReady)
-      return;
-    audioPlayer.onBufferingChange((newBufferingState) => {
-      if (newBufferingState && !delayHandleRef.current) {
-        delayHandleRef.current = buffer.delayPlayback();
-        Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] MediaPlayer buffering - blocking Remotion playback");
-      } else if (!newBufferingState && delayHandleRef.current) {
-        delayHandleRef.current.unblock();
-        delayHandleRef.current = null;
-        Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] MediaPlayer unbuffering - unblocking Remotion playback");
-      }
-    });
-  }, [mediaPlayerReady, buffer, logLevel]);
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
   useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
@@ -3137,6 +3230,11 @@ var VideoForPreview = ({
   const currentTimeRef = useRef2(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
+  const buffering = useContext4(Internals14.BufferingContextReact);
+  if (!buffering) {
+    throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
+  }
+  const isPlayerBuffering = Internals14.useIsPlayerBuffering(buffering);
   useEffect3(() => {
     if (!canvasRef.current)
       return;
@@ -3238,14 +3336,12 @@ var VideoForPreview = ({
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
       return;
-    if (playing) {
-      mediaPlayer.play().catch((error) => {
-        Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to play", error);
-      });
+    if (playing && !isPlayerBuffering) {
+      mediaPlayer.play(currentTimeRef.current);
     } else {
       mediaPlayer.pause();
     }
-  }, [playing, logLevel, mediaPlayerReady]);
+  }, [isPlayerBuffering, playing, logLevel, mediaPlayerReady]);
   useLayoutEffect2(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady)
@@ -3253,29 +3349,6 @@ var VideoForPreview = ({
     mediaPlayer.seekTo(currentTime);
     Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
   }, [currentTime, logLevel, mediaPlayerReady]);
-  useEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady)
-      return;
-    let currentBlock = null;
-    const unsubscribe = mediaPlayer.onBufferingChange((newBufferingState) => {
-      if (newBufferingState && !currentBlock) {
-        currentBlock = buffer.delayPlayback();
-        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer buffering - blocking Remotion playback");
-      } else if (!newBufferingState && currentBlock) {
-        currentBlock.unblock();
-        currentBlock = null;
-        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer unbuffering - unblocking Remotion playback");
-      }
-    });
-    return () => {
-      unsubscribe();
-      if (currentBlock) {
-        currentBlock.unblock();
-        currentBlock = null;
-      }
-    };
-  }, [mediaPlayerReady, buffer, logLevel]);
   const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
   useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;