@remotion/media: Fix audio scheduling and debug overlay at non-1x playback rates

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JonnyBurger

packages/media/src/debug-overlay/preview-overlay.ts

@@ -9,6 +9,7 @@ export const drawPreviewOverlay = ({
 	playing,
 	audioIteratorManager,
 	videoIteratorManager,
+	playbackRate,
 }: {
 	context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
 	audioTime: number | null;
@@ -17,6 +18,7 @@ export const drawPreviewOverlay = ({
 	playing: boolean;
 	audioIteratorManager: AudioIteratorManager | null;
 	videoIteratorManager: VideoIteratorManager | null;
+	playbackRate: number;
 }) => {
 	// Collect all lines to be rendered
 	const lines: string[] = [
@@ -26,7 +28,7 @@ export const drawPreviewOverlay = ({
 		`Frames rendered: ${videoIteratorManager?.getFramesRendered()}`,
 		`Audio context state: ${audioContextState}`,
 		audioTime
-			? `Audio time: ${(audioTime - audioSyncAnchor).toFixed(3)}s`
+			? `Audio time: ${((audioTime - audioSyncAnchor) * playbackRate).toFixed(3)}s`
 			: null,
 	].filter(Boolean) as string[];
 
@@ -40,7 +42,7 @@ export const drawPreviewOverlay = ({
 			?.getNumberOfChunksAfterResuming();
 		if (queuedPeriod && audioTime) {
 			lines.push(
-				`Audio queued until: ${(queuedPeriod.until - (audioTime - audioSyncAnchor)).toFixed(3)}s`,
+				`Audio queued until: ${(queuedPeriod.until - (audioTime - audioSyncAnchor) * playbackRate).toFixed(3)}s`,
 			);
 		} else if (numberOfChunksAfterResuming) {
 			lines.push(

packages/media/src/media-player.ts

@@ -640,7 +640,10 @@ export class MediaPlayer {
 		if (delay >= 0) {
 			node.start(this.sharedAudioContext.currentTime + delay);
 		} else {
-			node.start(this.sharedAudioContext.currentTime, -delay);
+			node.start(
+				this.sharedAudioContext.currentTime,
+				-delayWithoutPlaybackRate,
+			);
 		}
 	};
 
@@ -682,6 +685,7 @@ export class MediaPlayer {
 				audioIteratorManager: this.audioIteratorManager,
 				playing: this.playing,
 				videoIteratorManager: this.videoIteratorManager,
+				playbackRate: this.playbackRate * this.globalPlaybackRate,
 			});
 		}
 	};