@remotion/player 4.0.451 → 4.0.453

package/dist/cjs/Player.d.ts

@@ -61,6 +61,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
     readonly acknowledgeRemotionLicense?: boolean;
     readonly audioLatencyHint?: AudioContextLatencyCategory;
     readonly volumePersistenceKey?: string;
+    readonly initialVolume?: number;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
 export type PlayerPropsWithoutZod<Props extends Record<string, unknown>> = PlayerProps<AnyZodObject, Props>;
 export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;

package/dist/cjs/Player.js

@@ -23,7 +23,7 @@ const componentOrNullIfLazy = (props) => {
     return null;
 };
 exports.componentOrNullIfLazy = componentOrNullIfLazy;
-const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, showPosterWhenBufferingAndPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, renderCustomControls, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'interactive', volumePersistenceKey, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, showPosterWhenBufferingAndPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, renderCustomControls, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'playback', volumePersistenceKey, initialVolume, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         window.remotion_isPlayer = true;
     }
@@ -102,6 +102,17 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         typeof spaceKeyToPlayOrPause !== 'undefined') {
         throw new TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof spaceKeyToPlayOrPause}' instead`);
     }
+    if (typeof initialVolume !== 'undefined' &&
+        typeof initialVolume !== 'number') {
+        throw new TypeError(`'initialVolume' must be a number or undefined but got '${typeof initialVolume}' instead`);
+    }
+    if (typeof initialVolume === 'number' &&
+        (!Number.isFinite(initialVolume) ||
+            Number.isNaN(initialVolume) ||
+            initialVolume < 0 ||
+            initialVolume > 1)) {
+        throw new TypeError(`'initialVolume' must be between 0 and 1 but got '${initialVolume}' instead`);
+    }
     if (typeof numberOfSharedAudioTags !== 'number' ||
         numberOfSharedAudioTags % 1 !== 0 ||
         !Number.isFinite(numberOfSharedAudioTags) ||
@@ -154,7 +165,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             mode: 'prevent-media-session',
         });
     }, [passedBrowserMediaControlsBehavior]);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, volumePersistenceKey: volumePersistenceKey, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: jsx_runtime_1.jsx(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
+    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, volumePersistenceKey: volumePersistenceKey, initialVolume: initialVolume, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: jsx_runtime_1.jsx(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
                             : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, renderCustomControls: renderCustomControls !== null && renderCustomControls !== void 0 ? renderCustomControls : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
 };

package/dist/cjs/SharedPlayerContext.d.ts

@@ -15,6 +15,7 @@ export declare const SharedPlayerContexts: React.FC<{
     readonly logLevel: LogLevel;
     readonly audioLatencyHint: AudioContextLatencyCategory;
     readonly volumePersistenceKey?: string;
+    readonly initialVolume?: number;
     readonly inputProps: Record<string, unknown>;
     readonly audioEnabled: boolean;
 }>;

package/dist/cjs/SharedPlayerContext.js

@@ -6,7 +6,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const volume_persistence_js_1 = require("./volume-persistence.js");
 exports.PLAYER_COMP_ID = 'player-comp';
-const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, logLevel, audioLatencyHint, volumePersistenceKey, inputProps, audioEnabled, }) => {
+const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, logLevel, audioLatencyHint, volumePersistenceKey, initialVolume, inputProps, audioEnabled, }) => {
+    const persistVolumeToStorage = initialVolume === undefined;
     const compositionManagerContext = (0, react_1.useMemo)(() => {
         const context = {
             compositions: [
@@ -51,7 +52,9 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
         inputProps,
     ]);
     const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => initiallyMuted);
-    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(() => (0, volume_persistence_js_1.getPreferredVolume)(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null));
+    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(() => persistVolumeToStorage
+        ? (0, volume_persistence_js_1.getPreferredVolume)(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null)
+        : initialVolume);
     const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
             mediaMuted,
@@ -60,8 +63,10 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
     }, [mediaMuted, mediaVolume]);
     const setMediaVolumeAndPersist = (0, react_1.useCallback)((vol) => {
         setMediaVolume(vol);
-        (0, volume_persistence_js_1.persistVolume)(vol, logLevel, volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null);
-    }, [logLevel, volumePersistenceKey]);
+        if (persistVolumeToStorage) {
+            (0, volume_persistence_js_1.persistVolume)(vol, logLevel, volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null);
+        }
+    }, [persistVolumeToStorage, logLevel, volumePersistenceKey]);
     const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
             setMediaMuted,
@@ -83,6 +88,6 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
             isReadOnlyStudio: false,
         };
     }, []);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.RemotionEnvironmentContext.Provider, { value: env, children: jsx_runtime_1.jsx(remotion_1.Internals.LogLevelContext.Provider, { value: logLevelContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteTimeContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.TimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PrefetchProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DurationsContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: jsx_runtime_1.jsx(remotion_1.Internals.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Internals.RemotionEnvironmentContext.Provider, { value: env, children: jsx_runtime_1.jsx(remotion_1.Internals.LogLevelContext.Provider, { value: logLevelContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteTimeContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.TimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PrefetchProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DurationsContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.BufferingProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.SharedPlayerContexts = SharedPlayerContexts;

package/dist/cjs/set-global-time-anchor.d.ts

@@ -0,0 +1,10 @@
+export declare const ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
+export declare const setGlobalTimeAnchor: ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, logLevel, }: {
+    audioContext: AudioContext;
+    audioSyncAnchor: {
+        value: number;
+    };
+    absoluteTimeInSeconds: number;
+    globalPlaybackRate: number;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => boolean;

package/dist/cjs/set-global-time-anchor.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setGlobalTimeAnchor = exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = void 0;
+const remotion_1 = require("remotion");
+exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
+const setGlobalTimeAnchor = ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, logLevel, }) => {
+    const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
+    const shift = (newAnchor - audioSyncAnchor.value) * globalPlaybackRate;
+    const { outputLatency } = audioContext;
+    const safeOutputLatency = outputLatency === 0 ? 0.3 : outputLatency;
+    const latency = audioContext.baseLatency + safeOutputLatency;
+    // Skip small shifts to avoid audio glitches from frame-quantized re-anchoring
+    if (Math.abs(shift) < exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency) {
+        return false;
+    }
+    remotion_1.Internals.Log.verbose({ logLevel, tag: 'audio-scheduling' }, 'Anchor changed from %s to %s with shift %s', audioSyncAnchor.value, newAnchor, shift);
+    audioSyncAnchor.value = newAnchor;
+    return true;
+};
+exports.setGlobalTimeAnchor = setGlobalTimeAnchor;

package/dist/cjs/use-playback.js

@@ -1,24 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlayback = void 0;
-/* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const react_2 = require("react");
 const remotion_1 = require("remotion");
 const browser_mediasession_js_1 = require("./browser-mediasession.js");
 const calculate_next_frame_js_1 = require("./calculate-next-frame.js");
 const is_backgrounded_js_1 = require("./is-backgrounded.js");
+const set_global_time_anchor_js_1 = require("./set-global-time-anchor.js");
 const use_player_js_1 = require("./use-player.js");
 const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const { playing, pause, emitter, isPlaying } = (0, use_player_js_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
+    const sharedAudioContext = (0, react_2.useContext)(remotion_1.Internals.SharedAudioContext);
+    const logLevel = remotion_1.Internals.useLogLevel();
+    const timelineContext = remotion_1.Internals.useTimelineContext();
     // requestAnimationFrame() does not work if the tab is not active.
     // This means that audio will keep playing even if it has ended.
     // In that case, we use setTimeout() instead.
     const isBackgroundedRef = (0, is_backgrounded_js_1.useIsBackgrounded)();
-    const lastTimeUpdateEvent = (0, react_1.useRef)(null);
-    const context = (0, react_1.useContext)(remotion_1.Internals.BufferingContextReact);
+    const lastTimeUpdateTimestamp = (0, react_2.useRef)(0);
+    const context = (0, react_2.useContext)(remotion_1.Internals.BufferingContextReact);
     if (!context) {
         throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
     }
@@ -27,12 +32,40 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         playbackRate,
         videoConfig: config,
     });
-    //	complete code for media session API
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
+        if (!sharedAudioContext) {
+            return;
+        }
+        if (!sharedAudioContext.audioContext) {
+            return;
+        }
+        if (!config) {
+            return;
+        }
+        const changed = (0, set_global_time_anchor_js_1.setGlobalTimeAnchor)({
+            audioContext: sharedAudioContext.audioContext,
+            audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+            absoluteTimeInSeconds: frame / config.fps,
+            globalPlaybackRate: timelineContext.playbackRate,
+            logLevel,
+        });
+        if (changed) {
+            sharedAudioContext.audioSyncAnchorEmitter.dispatch('changed');
+        }
+    }, [
+        config,
+        frame,
+        logLevel,
+        sharedAudioContext,
+        timelineContext.playbackRate,
+    ]);
+    (0, react_2.useEffect)(() => {
+        var _a;
         if (!config) {
             return;
         }
         if (!playing) {
+            (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext);
             return;
         }
         let hasBeenStopped = false;
@@ -54,12 +87,15 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             cancelQueuedFrame();
         };
         const callback = () => {
+            var _a, _b;
             if (hasBeenStopped) {
                 return;
             }
             if (!isPlaying()) {
+                (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext);
                 return;
             }
+            (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.resume) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
             const time = performance.now() - startedTime;
             const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
             const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
@@ -88,7 +124,36 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             queueNextFrame();
         };
         const queueNextFrame = () => {
+            var _a, _b;
+            var _c;
+            const getIsResumingAudioContext = (_c = (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.getIsResumingAudioContext) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext)) !== null && _c !== void 0 ? _c : null;
+            if (getIsResumingAudioContext !== null) {
+                getIsResumingAudioContext.then(() => {
+                    if (!(sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.audioContext)) {
+                        return;
+                    }
+                    if (!sharedAudioContext.audioSyncAnchor) {
+                        return;
+                    }
+                    // set it here and DON'T propagate an event
+                    // the useLayoutEffect above is supposed to handle a user seek,
+                    // this is a natural wait for the audio playback to start.
+                    // we don't wanna destroy the iterators.
+                    (0, set_global_time_anchor_js_1.setGlobalTimeAnchor)({
+                        audioContext: sharedAudioContext.audioContext,
+                        audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+                        absoluteTimeInSeconds: getCurrentFrame() / config.fps,
+                        globalPlaybackRate: timelineContext.playbackRate,
+                        logLevel,
+                    });
+                    startedTime = performance.now();
+                    framesAdvanced = 0;
+                    queueNextFrame();
+                });
+                return;
+            }
             if (context.buffering.current) {
+                (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
                 const stopListening = context.listenForResume(() => {
                     stopListening.remove();
                     startedTime = performance.now();
@@ -137,18 +202,25 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         getCurrentFrame,
         context,
         isPlaying,
+        sharedAudioContext,
+        timelineContext.playbackRate,
+        logLevel,
     ]);
-    (0, react_1.useEffect)(() => {
-        const interval = setInterval(() => {
-            if (lastTimeUpdateEvent.current === getCurrentFrame()) {
-                return;
-            }
-            emitter.dispatchTimeUpdate({ frame: getCurrentFrame() });
-            lastTimeUpdateEvent.current = getCurrentFrame();
-        }, 250);
-        return () => clearInterval(interval);
-    }, [emitter, getCurrentFrame]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
+        const now = performance.now();
+        const timeSinceLastUpdate = now - lastTimeUpdateTimestamp.current;
+        if (timeSinceLastUpdate >= 250) {
+            emitter.dispatchTimeUpdate({ frame });
+            lastTimeUpdateTimestamp.current = now;
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            emitter.dispatchTimeUpdate({ frame });
+            lastTimeUpdateTimestamp.current = performance.now();
+        }, 250 - timeSinceLastUpdate);
+        return () => clearTimeout(timeoutId);
+    }, [emitter, frame]);
+    (0, react_2.useEffect)(() => {
         emitter.dispatchFrameUpdate({ frame });
     }, [emitter, frame]);
 };

package/dist/cjs/use-player.js

@@ -13,6 +13,7 @@ const usePlayer = () => {
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
+    const audioTagsContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioTagsContext);
     const { audioAndVideoTags } = remotion_1.Internals.useTimelineContext();
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
@@ -38,7 +39,6 @@ const usePlayer = () => {
         emitter.dispatchSeek(newFrame);
     }, [emitter, setTimelinePosition, video === null || video === void 0 ? void 0 : video.id]);
     const play = (0, react_1.useCallback)((e) => {
-        var _a;
         if (imperativePlaying.current) {
             return;
         }
@@ -46,12 +46,12 @@ const usePlayer = () => {
         if (isLastFrame) {
             seek(0);
         }
-        (_a = audioContext === null || audioContext === void 0 ? void 0 : audioContext.audioContext) === null || _a === void 0 ? void 0 : _a.resume();
+        audioContext === null || audioContext === void 0 ? void 0 : audioContext.resume();
         /**
          * Play silent audio tags to warm them up for autoplay
          */
-        if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
-            audioContext.playAllAudios();
+        if (audioTagsContext && audioTagsContext.numberOfAudioTags > 0 && e) {
+            audioTagsContext.playAllAudios();
         }
         /**
          * Play audios and videos directly here so they can benefit from
@@ -66,18 +66,18 @@ const usePlayer = () => {
         imperativePlaying,
         isLastFrame,
         audioContext,
+        audioTagsContext,
         setPlaying,
         emitter,
         seek,
         audioAndVideoTags,
     ]);
     const pause = (0, react_1.useCallback)(() => {
-        var _a;
         if (imperativePlaying.current) {
             imperativePlaying.current = false;
             setPlaying(false);
             emitter.dispatchPause();
-            (_a = audioContext === null || audioContext === void 0 ? void 0 : audioContext.audioContext) === null || _a === void 0 ? void 0 : _a.suspend();
+            audioContext === null || audioContext === void 0 ? void 0 : audioContext.suspend();
         }
     }, [emitter, imperativePlaying, setPlaying, audioContext]);
     const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {

package/dist/cjs/utils/use-element-size.js

@@ -34,21 +34,24 @@ const useElementSize = (ref, options) => {
             return null;
         }
         return new ResizeObserver((entries) => {
-            // The contentRect returns the width without any `scale()`'s being applied. The height is wrong
+            // `contentRect` is the element's pre-transform content box.
+            // `getClientRects()` is the post-transform AABB. Dividing each AABB
+            // axis by its content-box counterpart cancels the parent CSS transform
+            // whether it is uniform or not.
             const { contentRect, target } = entries[0];
-            // The clientRect returns the size with `scale()` being applied.
             const newSize = target.getClientRects();
             if (!(newSize === null || newSize === void 0 ? void 0 : newSize[0])) {
                 setSize(null);
                 return;
             }
-            const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
-            const width = options.shouldApplyCssTransforms || probableCssParentScale === 0
+            const probableCssParentScaleX = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
+            const probableCssParentScaleY = contentRect.height === 0 ? 1 : newSize[0].height / contentRect.height;
+            const width = options.shouldApplyCssTransforms || probableCssParentScaleX === 0
                 ? newSize[0].width
-                : newSize[0].width * (1 / probableCssParentScale);
-            const height = options.shouldApplyCssTransforms || probableCssParentScale === 0
+                : newSize[0].width * (1 / probableCssParentScaleX);
+            const height = options.shouldApplyCssTransforms || probableCssParentScaleY === 0
                 ? newSize[0].height
-                : newSize[0].height * (1 / probableCssParentScale);
+                : newSize[0].height * (1 / probableCssParentScaleY);
             setSize((prevState) => {
                 const isSame = prevState &&
                     prevState.width === width &&

package/dist/cjs/utils/validate-playbackrate.js

@@ -5,11 +5,11 @@ const validatePlaybackRate = (playbackRate) => {
     if (playbackRate === undefined) {
         return;
     }
-    if (playbackRate > 4) {
-        throw new Error(`The highest possible playback rate is 4. You passed: ${playbackRate}`);
+    if (playbackRate > 10) {
+        throw new Error(`The highest possible playback rate is 10. You passed: ${playbackRate}`);
     }
-    if (playbackRate < -4) {
-        throw new Error(`The lowest possible playback rate is -4. You passed: ${playbackRate}`);
+    if (playbackRate < -10) {
+        throw new Error(`The lowest possible playback rate is -10. You passed: ${playbackRate}`);
     }
     if (playbackRate === 0) {
         throw new Error(`A playback rate of 0 is not supported.`);

package/dist/esm/index.mjs

@@ -552,8 +552,9 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 
 // src/use-playback.ts
+import { useLayoutEffect as useLayoutEffect2 } from "react";
 import { useContext as useContext4, useEffect as useEffect5, useRef as useRef5 } from "react";
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals7 } from "remotion";
 
 // src/browser-mediasession.ts
 import { useEffect as useEffect3, useRef as useRef3 } from "react";
@@ -569,6 +570,7 @@ var usePlayer = () => {
   const setFrame = Internals5.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals5.Timeline.useTimelineSetFrame();
   const audioContext = useContext3(Internals5.SharedAudioContext);
+  const audioTagsContext = useContext3(Internals5.SharedAudioTagsContext);
   const { audioAndVideoTags } = Internals5.useTimelineContext();
   const frameRef = useRef2(frame);
   frameRef.current = frame;
@@ -601,9 +603,9 @@ var usePlayer = () => {
     if (isLastFrame) {
       seek(0);
     }
-    audioContext?.audioContext?.resume();
-    if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
-      audioContext.playAllAudios();
+    audioContext?.resume();
+    if (audioTagsContext && audioTagsContext.numberOfAudioTags > 0 && e) {
+      audioTagsContext.playAllAudios();
     }
     audioAndVideoTags.current.forEach((a) => a.play("player play() was called and playing audio from a click"));
     imperativePlaying.current = true;
@@ -614,6 +616,7 @@ var usePlayer = () => {
     imperativePlaying,
     isLastFrame,
     audioContext,
+    audioTagsContext,
     setPlaying,
     emitter,
     seek,
@@ -624,7 +627,7 @@ var usePlayer = () => {
       imperativePlaying.current = false;
       setPlaying(false);
       emitter.dispatchPause();
-      audioContext?.audioContext?.suspend();
+      audioContext?.suspend();
     }
   }, [emitter, imperativePlaying, setPlaying, audioContext]);
   const pauseAndReturnToPlayStart = useCallback2(() => {
@@ -901,6 +904,29 @@ var useIsBackgrounded = () => {
   return isBackgrounded;
 };
 
+// src/set-global-time-anchor.ts
+import { Internals as Internals6 } from "remotion";
+var ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
+var setGlobalTimeAnchor = ({
+  audioContext,
+  audioSyncAnchor,
+  absoluteTimeInSeconds,
+  globalPlaybackRate,
+  logLevel
+}) => {
+  const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
+  const shift = (newAnchor - audioSyncAnchor.value) * globalPlaybackRate;
+  const { outputLatency } = audioContext;
+  const safeOutputLatency = outputLatency === 0 ? 0.3 : outputLatency;
+  const latency = audioContext.baseLatency + safeOutputLatency;
+  if (Math.abs(shift) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency) {
+    return false;
+  }
+  Internals6.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
+  audioSyncAnchor.value = newAnchor;
+  return true;
+};
+
 // src/use-playback.ts
 var usePlayback = ({
   loop,
@@ -911,13 +937,16 @@ var usePlayback = ({
   browserMediaControlsBehavior,
   getCurrentFrame
 }) => {
-  const config = Internals6.useUnsafeVideoConfig();
-  const frame = Internals6.Timeline.useTimelinePosition();
+  const config = Internals7.useUnsafeVideoConfig();
+  const frame = Internals7.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
-  const setFrame = Internals6.Timeline.useTimelineSetFrame();
+  const setFrame = Internals7.Timeline.useTimelineSetFrame();
+  const sharedAudioContext = useContext4(Internals7.SharedAudioContext);
+  const logLevel = Internals7.useLogLevel();
+  const timelineContext = Internals7.useTimelineContext();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateEvent = useRef5(null);
-  const context = useContext4(Internals6.BufferingContextReact);
+  const lastTimeUpdateTimestamp = useRef5(0);
+  const context = useContext4(Internals7.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -926,11 +955,39 @@ var usePlayback = ({
     playbackRate,
     videoConfig: config
   });
+  useLayoutEffect2(() => {
+    if (!sharedAudioContext) {
+      return;
+    }
+    if (!sharedAudioContext.audioContext) {
+      return;
+    }
+    if (!config) {
+      return;
+    }
+    const changed = setGlobalTimeAnchor({
+      audioContext: sharedAudioContext.audioContext,
+      audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+      absoluteTimeInSeconds: frame / config.fps,
+      globalPlaybackRate: timelineContext.playbackRate,
+      logLevel
+    });
+    if (changed) {
+      sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
+    }
+  }, [
+    config,
+    frame,
+    logLevel,
+    sharedAudioContext,
+    timelineContext.playbackRate
+  ]);
   useEffect5(() => {
     if (!config) {
       return;
     }
     if (!playing) {
+      sharedAudioContext?.suspend?.();
       return;
     }
     let hasBeenStopped = false;
@@ -955,8 +1012,10 @@ var usePlayback = ({
         return;
       }
       if (!isPlaying()) {
+        sharedAudioContext?.suspend?.();
         return;
       }
+      sharedAudioContext?.resume?.();
       const time = performance.now() - startedTime;
       const actualLastFrame = outFrame ?? config.durationInFrames - 1;
       const actualFirstFrame = inFrame ?? 0;
@@ -984,7 +1043,30 @@ var usePlayback = ({
       queueNextFrame();
     };
     const queueNextFrame = () => {
+      const getIsResumingAudioContext = sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
+      if (getIsResumingAudioContext !== null) {
+        getIsResumingAudioContext.then(() => {
+          if (!sharedAudioContext?.audioContext) {
+            return;
+          }
+          if (!sharedAudioContext.audioSyncAnchor) {
+            return;
+          }
+          setGlobalTimeAnchor({
+            audioContext: sharedAudioContext.audioContext,
+            audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+            absoluteTimeInSeconds: getCurrentFrame() / config.fps,
+            globalPlaybackRate: timelineContext.playbackRate,
+            logLevel
+          });
+          startedTime = performance.now();
+          framesAdvanced = 0;
+          queueNextFrame();
+        });
+        return;
+      }
       if (context.buffering.current) {
+        sharedAudioContext?.suspend?.();
         const stopListening = context.listenForResume(() => {
           stopListening.remove();
           startedTime = performance.now();
@@ -1029,18 +1111,25 @@ var usePlayback = ({
     isBackgroundedRef,
     getCurrentFrame,
     context,
-    isPlaying
+    isPlaying,
+    sharedAudioContext,
+    timelineContext.playbackRate,
+    logLevel
   ]);
   useEffect5(() => {
-    const interval = setInterval(() => {
-      if (lastTimeUpdateEvent.current === getCurrentFrame()) {
-        return;
-      }
-      emitter.dispatchTimeUpdate({ frame: getCurrentFrame() });
-      lastTimeUpdateEvent.current = getCurrentFrame();
-    }, 250);
-    return () => clearInterval(interval);
-  }, [emitter, getCurrentFrame]);
+    const now = performance.now();
+    const timeSinceLastUpdate = now - lastTimeUpdateTimestamp.current;
+    if (timeSinceLastUpdate >= 250) {
+      emitter.dispatchTimeUpdate({ frame });
+      lastTimeUpdateTimestamp.current = now;
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      emitter.dispatchTimeUpdate({ frame });
+      lastTimeUpdateTimestamp.current = performance.now();
+    }, 250 - timeSinceLastUpdate);
+    return () => clearTimeout(timeoutId);
+  }, [emitter, frame]);
   useEffect5(() => {
     emitter.dispatchFrameUpdate({ frame });
   }, [emitter, frame]);
@@ -1085,9 +1174,10 @@ var useElementSize = (ref, options) => {
         setSize(null);
         return;
       }
-      const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
-      const width = options.shouldApplyCssTransforms || probableCssParentScale === 0 ? newSize[0].width : newSize[0].width * (1 / probableCssParentScale);
-      const height = options.shouldApplyCssTransforms || probableCssParentScale === 0 ? newSize[0].height : newSize[0].height * (1 / probableCssParentScale);
+      const probableCssParentScaleX = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
+      const probableCssParentScaleY = contentRect.height === 0 ? 1 : newSize[0].height / contentRect.height;
+      const width = options.shouldApplyCssTransforms || probableCssParentScaleX === 0 ? newSize[0].width : newSize[0].width * (1 / probableCssParentScaleX);
+      const height = options.shouldApplyCssTransforms || probableCssParentScaleY === 0 ? newSize[0].height : newSize[0].height * (1 / probableCssParentScaleY);
       setSize((prevState) => {
         const isSame = prevState && prevState.width === width && prevState.height === height && prevState.left === newSize[0].x && prevState.top === newSize[0].y && prevState.windowSize.height === window.innerHeight && prevState.windowSize.width === window.innerWidth;
         if (isSame) {
@@ -1174,12 +1264,12 @@ import {
   forwardRef as forwardRef2,
   useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo14,
   useRef as useRef12,
   useState as useState13
 } from "react";
-import { Composition, Internals as Internals15 } from "remotion";
+import { Composition, Internals as Internals16 } from "remotion";
 
 // src/player-css-classname.ts
 var playerCssClassname = (override) => {
@@ -1198,7 +1288,7 @@ import React10, {
   useRef as useRef11,
   useState as useState11
 } from "react";
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 
 // src/error-boundary.tsx
 import React3 from "react";
@@ -1341,7 +1431,7 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
 
 // src/MediaVolumeSlider.tsx
 import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
-import { Internals as Internals7 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 
 // src/render-volume-slider.tsx
 import React5, { useCallback as useCallback4, useMemo as useMemo3, useState as useState5 } from "react";
@@ -1455,8 +1545,8 @@ var renderDefaultVolumeSlider = (props) => {
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var VOLUME_SLIDER_WIDTH = 100;
 var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-  const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
-  const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
+  const [mediaMuted, setMediaMuted] = Internals8.useMediaMutedState();
+  const [mediaVolume, setMediaVolume] = Internals8.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
   const parentDivRef = useRef6(null);
   const inputRef = useRef6(null);
@@ -1517,7 +1607,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
   }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
   const volumeSlider = useMemo4(() => {
-    return (focused || hover) && !mediaMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+    return (focused || hover) && !mediaMuted && !Internals8.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
       onBlur: () => setFocused(false),
@@ -1545,7 +1635,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 
 // src/PlaybackrateControl.tsx
 import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo5, useState as useState8 } from "react";
-import { Internals as Internals8 } from "remotion";
+import { Internals as Internals9 } from "remotion";
 
 // src/utils/use-component-visible.ts
 import { useEffect as useEffect8, useRef as useRef7, useState as useState7 } from "react";
@@ -1637,7 +1727,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
   }, rate);
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = Internals8.useTimelineContext();
+  const { setPlaybackRate, playbackRate } = Internals9.useTimelineContext();
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
   useEffect9(() => {
     const listener = (e) => {
@@ -1739,7 +1829,7 @@ var button = {
 };
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
-  const { playbackRate } = Internals8.useTimelineContext();
+  const { playbackRate } = Internals9.useTimelineContext();
   const onClick = useCallback6((e) => {
     e.stopPropagation();
     e.preventDefault();
@@ -1772,7 +1862,7 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 
 // src/PlayerSeekBar.tsx
 import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef8, useState as useState9 } from "react";
-import { Internals as Internals9, interpolate } from "remotion";
+import { Internals as Internals10, interpolate } from "remotion";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
@@ -1816,7 +1906,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     shouldApplyCssTransforms: true
   });
   const { seek, play, pause, playing } = usePlayer();
-  const frame = Internals9.Timeline.useTimelinePosition();
+  const frame = Internals10.Timeline.useTimelinePosition();
   const [dragging, setDragging] = useState9({
     dragging: false
   });
@@ -1929,7 +2019,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
 
 // src/PlayerTimeLabel.tsx
 import { useMemo as useMemo7 } from "react";
-import { Internals as Internals10 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/format-time.ts
 var formatTime = (timeInSeconds) => {
@@ -1941,7 +2031,7 @@ var formatTime = (timeInSeconds) => {
 // src/PlayerTimeLabel.tsx
 import { jsxs as jsxs7 } from "react/jsx-runtime";
 var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
-  const frame = Internals10.Timeline.useTimelinePosition();
+  const frame = Internals11.Timeline.useTimelinePosition();
   const timeLabel = useMemo7(() => {
     return {
       color: "white",
@@ -2429,8 +2519,8 @@ var PlayerUI = ({
   overrideInternalClassName,
   noSuspense
 }, ref) => {
-  const config = Internals11.useUnsafeVideoConfig();
-  const video = Internals11.useVideo();
+  const config = Internals12.useUnsafeVideoConfig();
+  const video = Internals12.useVideo();
   const container = useRef11(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
@@ -2550,8 +2640,8 @@ var PlayerUI = ({
     }
     player.emitter.dispatchScaleChange(scale);
   }, [player.emitter, scale]);
-  const { setMediaVolume, setMediaMuted } = useContext5(Internals11.SetMediaVolumeContext);
-  const { mediaMuted, mediaVolume } = useContext5(Internals11.MediaVolumeContext);
+  const { setMediaVolume, setMediaMuted } = useContext5(Internals12.SetMediaVolumeContext);
+  const { mediaMuted, mediaVolume } = useContext5(Internals12.MediaVolumeContext);
   useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
@@ -2786,7 +2876,7 @@ var PlayerUI = ({
               VideoComponent ? /* @__PURE__ */ jsx12(ErrorBoundary, {
                 onError,
                 errorFallback,
-                children: /* @__PURE__ */ jsx12(Internals11.CurrentScaleContext.Provider, {
+                children: /* @__PURE__ */ jsx12(Internals12.CurrentScaleContext.Provider, {
                   value: currentScale,
                   children: /* @__PURE__ */ jsx12(VideoComponent, {
                     ...video?.props ?? {},
@@ -2869,10 +2959,10 @@ var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
 import { useCallback as useCallback12, useMemo as useMemo13, useState as useState12 } from "react";
-import { Internals as Internals13 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 
 // src/volume-persistence.ts
-import { Internals as Internals12 } from "remotion";
+import { Internals as Internals13 } from "remotion";
 var DEFAULT_VOLUME_PERSISTENCE_KEY = "remotion.volumePreference";
 var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
@@ -2881,7 +2971,7 @@ var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   try {
     window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTENCE_KEY, String(volume));
   } catch (e) {
-    Internals12.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
+    Internals13.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
   }
 };
 var getPreferredVolume = (volumePersistenceKey) => {
@@ -2912,9 +3002,11 @@ var SharedPlayerContexts = ({
   logLevel,
   audioLatencyHint,
   volumePersistenceKey,
+  initialVolume,
   inputProps,
   audioEnabled
 }) => {
+  const persistVolumeToStorage = initialVolume === undefined;
   const compositionManagerContext = useMemo13(() => {
     const context = {
       compositions: [
@@ -2959,7 +3051,7 @@ var SharedPlayerContexts = ({
     inputProps
   ]);
   const [mediaMuted, setMediaMuted] = useState12(() => initiallyMuted);
-  const [mediaVolume, setMediaVolume] = useState12(() => getPreferredVolume(volumePersistenceKey ?? null));
+  const [mediaVolume, setMediaVolume] = useState12(() => persistVolumeToStorage ? getPreferredVolume(volumePersistenceKey ?? null) : initialVolume);
   const mediaVolumeContextValue = useMemo13(() => {
     return {
       mediaMuted,
@@ -2968,8 +3060,10 @@ var SharedPlayerContexts = ({
   }, [mediaMuted, mediaVolume]);
   const setMediaVolumeAndPersist = useCallback12((vol) => {
     setMediaVolume(vol);
-    persistVolume(vol, logLevel, volumePersistenceKey ?? null);
-  }, [logLevel, volumePersistenceKey]);
+    if (persistVolumeToStorage) {
+      persistVolume(vol, logLevel, volumePersistenceKey ?? null);
+    }
+  }, [persistVolumeToStorage, logLevel, volumePersistenceKey]);
   const setMediaVolumeContextValue = useMemo13(() => {
     return {
       setMediaMuted,
@@ -2991,29 +3085,31 @@ var SharedPlayerContexts = ({
       isReadOnlyStudio: false
     };
   }, []);
-  return /* @__PURE__ */ jsx13(Internals13.RemotionEnvironmentContext.Provider, {
+  return /* @__PURE__ */ jsx13(Internals14.RemotionEnvironmentContext.Provider, {
     value: env,
-    children: /* @__PURE__ */ jsx13(Internals13.LogLevelContext.Provider, {
+    children: /* @__PURE__ */ jsx13(Internals14.LogLevelContext.Provider, {
       value: logLevelContext,
-      children: /* @__PURE__ */ jsx13(Internals13.CanUseRemotionHooksProvider, {
-        children: /* @__PURE__ */ jsx13(Internals13.AbsoluteTimeContext.Provider, {
+      children: /* @__PURE__ */ jsx13(Internals14.CanUseRemotionHooksProvider, {
+        children: /* @__PURE__ */ jsx13(Internals14.AbsoluteTimeContext.Provider, {
           value: timelineContext,
-          children: /* @__PURE__ */ jsx13(Internals13.TimelineContext.Provider, {
+          children: /* @__PURE__ */ jsx13(Internals14.TimelineContext.Provider, {
             value: timelineContext,
-            children: /* @__PURE__ */ jsx13(Internals13.CompositionManager.Provider, {
+            children: /* @__PURE__ */ jsx13(Internals14.CompositionManager.Provider, {
               value: compositionManagerContext,
-              children: /* @__PURE__ */ jsx13(Internals13.PrefetchProvider, {
-                children: /* @__PURE__ */ jsx13(Internals13.DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx13(Internals13.MediaVolumeContext.Provider, {
+              children: /* @__PURE__ */ jsx13(Internals14.PrefetchProvider, {
+                children: /* @__PURE__ */ jsx13(Internals14.DurationsContextProvider, {
+                  children: /* @__PURE__ */ jsx13(Internals14.MediaVolumeContext.Provider, {
                     value: mediaVolumeContextValue,
-                    children: /* @__PURE__ */ jsx13(Internals13.SetMediaVolumeContext.Provider, {
+                    children: /* @__PURE__ */ jsx13(Internals14.SetMediaVolumeContext.Provider, {
                       value: setMediaVolumeContextValue,
-                      children: /* @__PURE__ */ jsx13(Internals13.SharedAudioContextProvider, {
-                        numberOfAudioTags: numberOfSharedAudioTags,
-                        audioLatencyHint,
-                        audioEnabled,
-                        children: /* @__PURE__ */ jsx13(Internals13.BufferingProvider, {
-                          children
+                      children: /* @__PURE__ */ jsx13(Internals14.BufferingProvider, {
+                        children: /* @__PURE__ */ jsx13(Internals14.SharedAudioContextProvider, {
+                          audioLatencyHint,
+                          audioEnabled,
+                          children: /* @__PURE__ */ jsx13(Internals14.SharedAudioTagsContextProvider, {
+                            numberOfAudioTags: numberOfSharedAudioTags,
+                            children
+                          })
                         })
                       })
                     })
@@ -3029,7 +3125,7 @@ var SharedPlayerContexts = ({
 };
 
 // src/use-remotion-license-acknowledge.ts
-import { Internals as Internals14 } from "remotion";
+import { Internals as Internals15 } from "remotion";
 var warningShown = false;
 var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
   if (acknowledge) {
@@ -3039,7 +3135,7 @@ var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
     return;
   }
   warningShown = true;
-  Internals14.Log.warn({ logLevel, tag: null }, "Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license\nPass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear.");
+  Internals15.Log.warn({ logLevel, tag: null }, "Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license\nPass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear.");
 };
 
 // src/utils/validate-in-out-frame.ts
@@ -3121,11 +3217,11 @@ var validatePlaybackRate = (playbackRate) => {
   if (playbackRate === undefined) {
     return;
   }
-  if (playbackRate > 4) {
-    throw new Error(`The highest possible playback rate is 4. You passed: ${playbackRate}`);
+  if (playbackRate > 10) {
+    throw new Error(`The highest possible playback rate is 10. You passed: ${playbackRate}`);
   }
-  if (playbackRate < -4) {
-    throw new Error(`The lowest possible playback rate is -4. You passed: ${playbackRate}`);
+  if (playbackRate < -10) {
+    throw new Error(`The lowest possible playback rate is -10. You passed: ${playbackRate}`);
   }
   if (playbackRate === 0) {
     throw new Error(`A playback rate of 0 is not supported.`);
@@ -3195,8 +3291,9 @@ var PlayerFn = ({
   logLevel = "info",
   noSuspense,
   acknowledgeRemotionLicense,
-  audioLatencyHint = "interactive",
+  audioLatencyHint = "playback",
   volumePersistenceKey,
+  initialVolume,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -3213,7 +3310,7 @@ var PlayerFn = ({
     throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
   }
   useState13(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
-  const component = Internals15.useLazyComponent({
+  const component = Internals16.useLazyComponent({
     compProps: componentProps,
     componentName: "Player",
     noSuspense: Boolean(noSuspense)
@@ -3271,6 +3368,12 @@ var PlayerFn = ({
   if (typeof spaceKeyToPlayOrPause !== "boolean" && typeof spaceKeyToPlayOrPause !== "undefined") {
     throw new TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof spaceKeyToPlayOrPause}' instead`);
   }
+  if (typeof initialVolume !== "undefined" && typeof initialVolume !== "number") {
+    throw new TypeError(`'initialVolume' must be a number or undefined but got '${typeof initialVolume}' instead`);
+  }
+  if (typeof initialVolume === "number" && (!Number.isFinite(initialVolume) || Number.isNaN(initialVolume) || initialVolume < 0 || initialVolume > 1)) {
+    throw new TypeError(`'initialVolume' must be between 0 and 1 but got '${initialVolume}' instead`);
+  }
   if (typeof numberOfSharedAudioTags !== "number" || numberOfSharedAudioTags % 1 !== 0 || !Number.isFinite(numberOfSharedAudioTags) || Number.isNaN(numberOfSharedAudioTags) || numberOfSharedAudioTags < 0) {
     throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
   }
@@ -3280,7 +3383,7 @@ var PlayerFn = ({
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
   useState13(() => {
-    Internals15.playbackLogging({
+    Internals16.playbackLogging({
       logLevel,
       message: `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
       tag: "player",
@@ -3307,8 +3410,8 @@ var PlayerFn = ({
     };
   }, [setFrame]);
   if (typeof window !== "undefined") {
-    useLayoutEffect2(() => {
-      Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
+    useLayoutEffect3(() => {
+      Internals16.CSSUtils.injectCSS(Internals16.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
   const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
@@ -3317,7 +3420,7 @@ var PlayerFn = ({
       mode: "prevent-media-session"
     };
   }, [passedBrowserMediaControlsBehavior]);
-  return /* @__PURE__ */ jsx14(Internals15.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx14(Internals16.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
       component,
@@ -3330,9 +3433,10 @@ var PlayerFn = ({
       logLevel,
       audioLatencyHint,
       volumePersistenceKey,
+      initialVolume,
       inputProps: actualInputProps,
       audioEnabled: true,
-      children: /* @__PURE__ */ jsx14(Internals15.SetTimelineContext.Provider, {
+      children: /* @__PURE__ */ jsx14(Internals16.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
           currentPlaybackRate,
@@ -3388,12 +3492,12 @@ var Player = forward(PlayerFn);
 import {
   forwardRef as forwardRef4,
   useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo17,
   useRef as useRef14,
   useState as useState14
 } from "react";
-import { Internals as Internals17, random as random2 } from "remotion";
+import { Internals as Internals18, random as random2 } from "remotion";
 
 // src/ThumbnailUI.tsx
 import React13, {
@@ -3404,7 +3508,7 @@ import React13, {
   useMemo as useMemo16,
   useRef as useRef13
 } from "react";
-import { Internals as Internals16 } from "remotion";
+import { Internals as Internals17 } from "remotion";
 
 // src/use-thumbnail.ts
 import { useContext as useContext6, useMemo as useMemo15 } from "react";
@@ -3438,8 +3542,8 @@ var ThumbnailUI = ({
   noSuspense,
   overrideInternalClassName
 }, ref) => {
-  const config = Internals16.useUnsafeVideoConfig();
-  const video = Internals16.useVideo();
+  const config = Internals17.useUnsafeVideoConfig();
+  const video = Internals17.useVideo();
   const container = useRef13(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
@@ -3514,7 +3618,7 @@ var ThumbnailUI = ({
       children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
         onError,
         errorFallback,
-        children: /* @__PURE__ */ jsx15(Internals16.CurrentScaleContext.Provider, {
+        children: /* @__PURE__ */ jsx15(Internals17.CurrentScaleContext.Provider, {
           value: currentScaleContext,
           children: /* @__PURE__ */ jsx15(VideoComponent, {
             ...video?.props ?? {},
@@ -3564,7 +3668,7 @@ var ThumbnailFn = ({
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
-    useLayoutEffect3(() => {
+    useLayoutEffect4(() => {
       window.remotion_isPlayer = true;
     }, []);
   }
@@ -3589,7 +3693,7 @@ var ThumbnailFn = ({
     return value;
   }, [frameToDisplay, thumbnailId]);
   useImperativeHandle4(ref, () => rootRef.current, []);
-  const Component = Internals17.useLazyComponent({
+  const Component = Internals18.useLazyComponent({
     compProps: componentProps,
     componentName: "Thumbnail",
     noSuspense: Boolean(noSuspense)
@@ -3598,7 +3702,7 @@ var ThumbnailFn = ({
   const passedInputProps = useMemo17(() => {
     return inputProps ?? {};
   }, [inputProps]);
-  return /* @__PURE__ */ jsx16(Internals17.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx16(Internals18.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
       timelineContext: timelineState,
       component: Component,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.451",
+	"version": "4.0.453",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -36,7 +36,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.451"
+		"remotion": "4.0.453"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -50,7 +50,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.451",
+		"@remotion/eslint-config-internal": "4.0.453",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/cjs/volume-persistance.d.ts

@@ -1,2 +0,0 @@
-export declare const persistVolume: (volume: number, logLevel: "error" | "info" | "trace" | "verbose" | "warn", volumePersistenceKey: string | null) => void;
-export declare const getPreferredVolume: (volumePersistenceKey: string | null) => number;

package/dist/cjs/volume-persistance.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPreferredVolume = exports.persistVolume = void 0;
-const remotion_1 = require("remotion");
-const DEFAULT_VOLUME_PERSISTANCE_KEY = 'remotion.volumePreference';
-const persistVolume = (volume, logLevel, volumePersistenceKey) => {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    try {
-        window.localStorage.setItem(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : DEFAULT_VOLUME_PERSISTANCE_KEY, String(volume));
-    }
-    catch (e) {
-        // User can disallow localStorage access
-        // https://github.com/remotion-dev/remotion/issues/3540
-        remotion_1.Internals.Log.error({ logLevel, tag: null }, 'Could not persist volume', e);
-    }
-};
-exports.persistVolume = persistVolume;
-const getPreferredVolume = (volumePersistenceKey) => {
-    if (typeof window === 'undefined') {
-        return 1;
-    }
-    try {
-        const val = window.localStorage.getItem(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : DEFAULT_VOLUME_PERSISTANCE_KEY);
-        return val ? Number(val) : 1;
-    }
-    catch (_a) {
-        // User can disallow localStorage access
-        // https://github.com/remotion-dev/remotion/issues/3540
-        return 1;
-    }
-};
-exports.getPreferredVolume = getPreferredVolume;