remotion 4.0.451 → 4.0.452

package/dist/cjs/PremountContext.d.ts

@@ -1,6 +1,5 @@
 export type PremountContextValue = {
     premountFramesRemaining: number;
-    playing: boolean;
 };
 /**
  * @internal

package/dist/cjs/PremountContext.js

@@ -10,5 +10,4 @@ const react_1 = require("react");
  */
 exports.PremountContext = (0, react_1.createContext)({
     premountFramesRemaining: 0,
-    playing: false,
 });

package/dist/cjs/RemotionRoot.js

@@ -23,6 +23,6 @@ const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLate
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { visualModeEnabled: visualModeEnabled, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { visualModeEnabled: visualModeEnabled, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRootContexts = RemotionRootContexts;

package/dist/cjs/Sequence.js

@@ -202,15 +202,7 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
         styleWhilePremounted,
         styleWhilePostmounted,
     ]);
-    const { playing } = (0, timeline_position_state_js_1.useTimelineContext)();
-    const premountFramesRemaining = premountingActive ? from - frame : 0;
-    const premountContextValue = (0, react_1.useMemo)(() => {
-        return {
-            premountFramesRemaining,
-            playing: parentPremountContext.playing || playing,
-        };
-    }, [premountFramesRemaining, parentPremountContext.playing, playing]);
-    return ((0, jsx_runtime_1.jsx)(PremountContext_js_1.PremountContext.Provider, { value: premountContextValue, children: (0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }) }));
+    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
 };
 const PremountedPostmountedSequence = (0, react_1.forwardRef)(PremountedPostmountedSequenceRefForwardingFunction);
 const SequenceRefForwardingFunction = (props, ref) => {

package/dist/cjs/audio/Audio.js

@@ -21,7 +21,7 @@ const AudioForRendering_js_1 = require("./AudioForRendering.js");
 const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
-    const audioContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioContext);
+    const audioTagsContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioTagsContext);
     const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
@@ -84,7 +84,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return ((0, jsx_runtime_1.jsx)(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onNativeError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return ((0, jsx_runtime_1.jsx)(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, 
+    return ((0, jsx_runtime_1.jsx)(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, 
         // Proposal: Make this default to true in v5
         pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -28,17 +28,39 @@ export type ScheduleAudioNodeResult = {
     scheduledTime: number;
 } | {
     type: 'not-started';
+    reason: string;
 };
 export type ScheduleAudioNodeOptions = {
     readonly node: AudioBufferSourceNode;
-    readonly targetTime: number;
     readonly mediaTimestamp: number;
     readonly currentTime: number;
-    readonly sequenceEndTime: number;
-    readonly sequenceStartTime: number;
-    readonly debugAudioScheduling: boolean;
+    readonly scheduledTime: number;
+    readonly originalUnloopedMediaTimestamp: number;
+    readonly duration: number;
+    readonly offset: number;
 };
-type SharedContext = {
+export type AudioSyncAnchorEvent = 'changed';
+export type AudioSyncAnchorListener = (event: AudioSyncAnchorEvent) => void;
+export type AudioSyncAnchorEmitter = {
+    dispatch: (event: AudioSyncAnchorEvent) => void;
+    subscribe: (listener: AudioSyncAnchorListener) => {
+        remove: () => void;
+    };
+};
+type SharedAudioContextValue = {
+    audioContext: AudioContext | null;
+    gainNode: GainNode | null;
+    audioSyncAnchor: {
+        value: number;
+    };
+    audioSyncAnchorEmitter: AudioSyncAnchorEmitter;
+    scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
+    resume: () => Promise<void>;
+    suspend: () => void;
+    getIsResumingAudioContext: () => Promise<void> | null;
+    unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
+};
+type SharedAudioTagsContextValue = {
     registerAudio: (options: {
         aud: AudioHTMLAttributes<HTMLAudioElement>;
         audioId: string;
@@ -55,19 +77,18 @@ type SharedContext = {
     }) => void;
     playAllAudios: () => void;
     numberOfAudioTags: number;
-    audioContext: AudioContext | null;
-    audioSyncAnchor: {
-        value: number;
-    };
-    scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
 };
-export declare const SharedAudioContext: React.Context<SharedContext | null>;
+export declare const SharedAudioContext: React.Context<SharedAudioContextValue | null>;
+export declare const SharedAudioTagsContext: React.Context<SharedAudioTagsContextValue | null>;
 export declare const SharedAudioContextProvider: React.FC<{
-    readonly numberOfAudioTags: number;
     readonly children: React.ReactNode;
     readonly audioLatencyHint: AudioContextLatencyCategory;
     readonly audioEnabled: boolean;
 }>;
+export declare const SharedAudioTagsContextProvider: React.FC<{
+    readonly numberOfAudioTags: number;
+    readonly children: React.ReactNode;
+}>;
 export declare const useSharedAudio: ({ aud, audioId, premounting, postmounting, }: {
     aud: AudioHTMLAttributes<HTMLAudioElement>;
     audioId: string;

package/dist/cjs/audio/shared-audio-tags.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSharedAudio = exports.SharedAudioContextProvider = exports.SharedAudioContext = void 0;
+exports.useSharedAudio = exports.SharedAudioTagsContextProvider = exports.SharedAudioContextProvider = exports.SharedAudioTagsContext = exports.SharedAudioContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const log_level_context_js_1 = require("../log-level-context.js");
@@ -42,6 +42,7 @@ const play_and_handle_not_allowed_error_js_1 = require("../play-and-handle-not-a
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const shared_element_source_node_js_1 = require("./shared-element-source-node.js");
 const use_audio_context_js_1 = require("./use-audio-context.js");
+const wait_until_actually_resumed_js_1 = require("./wait-until-actually-resumed.js");
 const EMPTY_AUDIO = 'data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV';
 const compareProps = (obj1, obj2) => {
     const keysA = Object.keys(obj1).sort();
@@ -75,75 +76,77 @@ const didPropChange = (key, newProp, prevProp) => {
     return true;
 };
 exports.SharedAudioContext = (0, react_1.createContext)(null);
-const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, audioEnabled }) => {
-    var _a;
-    const audios = (0, react_1.useRef)([]);
-    const [initialNumberOfAudioTags] = (0, react_1.useState)(numberOfAudioTags);
-    if (numberOfAudioTags !== initialNumberOfAudioTags) {
-        throw new Error('The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.');
-    }
+exports.SharedAudioTagsContext = (0, react_1.createContext)(null);
+const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
-    const audioContext = (0, use_audio_context_js_1.useSingletonAudioContext)({
+    const ctxAndGain = (0, use_audio_context_js_1.useSingletonAudioContext)({
         logLevel,
         latencyHint: audioLatencyHint,
         audioEnabled,
     });
+    const audioContextIsPlayingEventually = (0, react_1.useRef)(false);
+    const isResuming = (0, react_1.useRef)(null);
     const audioSyncAnchor = (0, react_1.useMemo)(() => ({ value: 0 }), []);
+    const audioSyncAnchorListeners = (0, react_1.useRef)([]);
+    const audioSyncAnchorEmitter = (0, react_1.useMemo)(() => {
+        return {
+            dispatch: (event) => {
+                audioSyncAnchorListeners.current.forEach((l) => l(event));
+            },
+            subscribe: (listener) => {
+                audioSyncAnchorListeners.current.push(listener);
+                return {
+                    remove: () => {
+                        audioSyncAnchorListeners.current =
+                            audioSyncAnchorListeners.current.filter((l) => l !== listener);
+                    },
+                };
+            },
+        };
+    }, []);
     const prevEndTimes = (0, react_1.useRef)({ scheduledEndTime: null, mediaEndTime: null });
+    const nodesToResume = (0, react_1.useRef)(new Map());
+    const unscheduleAudioNode = (0, react_1.useCallback)((node) => {
+        nodesToResume.current.delete(node);
+    }, []);
     const scheduleAudioNode = (0, react_1.useMemo)(() => {
-        return ({ node, mediaTimestamp, targetTime, currentTime, sequenceEndTime, sequenceStartTime, debugAudioScheduling, }) => {
-            var _a, _b;
-            if (!audioContext) {
+        return ({ node, mediaTimestamp, currentTime, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {
+            if (!ctxAndGain) {
                 throw new Error('Audio context not found');
             }
-            const bufferDuration = (_b = (_a = node.buffer) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0;
-            const unclampedMediaEndTime = mediaTimestamp + bufferDuration;
-            const needsTrimEnd = unclampedMediaEndTime > sequenceEndTime;
-            const needsTrimStart = mediaTimestamp < sequenceStartTime;
-            const offsetBecauseOfTrim = needsTrimStart
-                ? sequenceStartTime - mediaTimestamp
-                : 0;
-            const offsetBecauseOfTooLate = targetTime < 0 ? -targetTime : 0;
-            const offset = offsetBecauseOfTrim + offsetBecauseOfTooLate;
-            const duration = needsTrimEnd
-                ? bufferDuration -
-                    Math.max(0, unclampedMediaEndTime - sequenceEndTime) -
-                    offset
-                : bufferDuration - offset;
-            const scheduledTime = targetTime + currentTime + offset;
-            if (offset < 0) {
-                throw new Error('offset < 0: ' +
-                    JSON.stringify({
-                        offset,
-                        targetTime,
-                        currentTime,
-                        offsetBecauseOfTrim,
-                        offsetBecauseOfTooLate,
-                    }));
-            }
             if (duration > 0) {
-                node.start(scheduledTime, offset, duration);
+                if (ctxAndGain.audioContext.state === 'suspended') {
+                    nodesToResume.current.set(node, {
+                        scheduledTime,
+                        offset,
+                        duration,
+                    });
+                }
+                else {
+                    node.start(scheduledTime, offset, duration);
+                }
             }
             const scheduledEndTime = scheduledTime + duration / node.playbackRate.value;
             const mediaTime = mediaTimestamp + offset;
             const mediaEndTime = mediaTime + duration;
-            const latency = audioContext.baseLatency + audioContext.outputLatency;
-            const timeDiff = scheduledTime - currentTime - latency;
+            const latency = ctxAndGain.audioContext.baseLatency +
+                ctxAndGain.audioContext.outputLatency;
+            const timeDiff = scheduledTime - ctxAndGain.audioContext.currentTime;
             const prev = prevEndTimes.current;
             const scheduledMismatch = prev.scheduledEndTime !== null &&
                 Math.abs(scheduledTime - prev.scheduledEndTime) > 0.001;
             const mediaMismatch = prev.mediaEndTime !== null &&
                 Math.abs(mediaTime - prev.mediaEndTime) > 0.001;
-            if (debugAudioScheduling) {
-                log_js_1.Log.info({ logLevel, tag: 'audio-scheduling' }, 'scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s', scheduledMismatch ? 'color: red; font-weight: bold' : '', scheduledTime.toFixed(4), '', scheduledEndTime.toFixed(4), mediaMismatch ? 'color: red; font-weight: bold' : '', mediaTime.toFixed(4), '', mediaEndTime.toFixed(4), duration < 0
+            log_js_1.Log.verbose({ logLevel, tag: 'audio-scheduling' }, 'scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s', scheduledMismatch ? 'color: red; font-weight: bold' : '', scheduledTime.toFixed(4), '', scheduledEndTime.toFixed(4), mediaMismatch ? 'color: red; font-weight: bold' : '', mediaTime.toFixed(4), '', mediaEndTime.toFixed(4), duration < 0
+                ? 'color: red; font-weight: bold'
+                : timeDiff < 0
                     ? 'color: red; font-weight: bold'
-                    : timeDiff < 0
-                        ? 'color: red; font-weight: bold'
-                        : 'color: blue; font-weight: bold', duration < 0
-                    ? 'missed ' + Math.abs(offset).toFixed(2) + 's'
-                    : Math.abs(timeDiff).toFixed(2) +
-                        (timeDiff < 0 ? ' delay' : ' ahead'), '', 'current=' + currentTime.toFixed(4), 'offset=' + offset.toFixed(4), 'latency=' + latency.toFixed(4), 'state=' + audioContext.state);
-            }
+                    : 'color: blue; font-weight: bold', duration < 0
+                ? 'missed ' + Math.abs(offset).toFixed(2) + 's'
+                : Math.abs(timeDiff).toFixed(2) +
+                    (timeDiff < 0 ? ' delay' : ' ahead'), '', 'current=' + currentTime.toFixed(4), 'offset=' + offset.toFixed(4), 'latency=' + latency.toFixed(4), 'state=' + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime
+                ? 'original_ts=' + originalUnloopedMediaTimestamp.toFixed(4)
+                : '');
             prev.scheduledEndTime = scheduledEndTime;
             prev.mediaEndTime = mediaEndTime;
             return duration > 0
@@ -153,9 +156,84 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
                 }
                 : {
                     type: 'not-started',
+                    reason: 'missed ' + Math.abs(offset).toFixed(2) + 's',
                 };
         };
-    }, [audioContext, logLevel]);
+    }, [ctxAndGain, logLevel]);
+    const resume = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        if (!ctxAndGain) {
+            return Promise.resolve();
+        }
+        if (audioContextIsPlayingEventually.current) {
+            return Promise.resolve();
+        }
+        audioContextIsPlayingEventually.current = true;
+        isResuming.current = (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel)
+            .then(() => { })
+            .finally(() => {
+            isResuming.current = null;
+        });
+        ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
+        (_a = ctxAndGain.gainNode) === null || _a === void 0 ? void 0 : _a.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
+        (_b = ctxAndGain.gainNode) === null || _b === void 0 ? void 0 : _b.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
+        return ctxAndGain.audioContext.resume().then(() => {
+            nodesToResume.current.forEach((r, node) => node.start(r.scheduledTime, r.offset, r.duration));
+            nodesToResume.current.clear();
+        });
+    }, [ctxAndGain, logLevel]);
+    const getIsResumingAudioContext = (0, react_1.useCallback)(() => {
+        return isResuming.current;
+    }, []);
+    const suspend = (0, react_1.useCallback)(() => {
+        if (!ctxAndGain) {
+            return;
+        }
+        if (!audioContextIsPlayingEventually.current) {
+            return;
+        }
+        audioContextIsPlayingEventually.current = false;
+        ctxAndGain.audioContext.suspend();
+    }, [ctxAndGain]);
+    const audioContextValue = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return {
+            audioContext: (_a = ctxAndGain === null || ctxAndGain === void 0 ? void 0 : ctxAndGain.audioContext) !== null && _a !== void 0 ? _a : null,
+            gainNode: (_b = ctxAndGain === null || ctxAndGain === void 0 ? void 0 : ctxAndGain.gainNode) !== null && _b !== void 0 ? _b : null,
+            audioSyncAnchor,
+            audioSyncAnchorEmitter,
+            scheduleAudioNode,
+            resume,
+            suspend,
+            getIsResumingAudioContext,
+            unscheduleAudioNode,
+        };
+    }, [
+        ctxAndGain,
+        audioSyncAnchor,
+        audioSyncAnchorEmitter,
+        scheduleAudioNode,
+        resume,
+        suspend,
+        getIsResumingAudioContext,
+        unscheduleAudioNode,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(exports.SharedAudioContext.Provider, { value: audioContextValue, children: children }));
+};
+exports.SharedAudioContextProvider = SharedAudioContextProvider;
+const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
+    var _a, _b;
+    const audios = (0, react_1.useRef)([]);
+    const [initialNumberOfAudioTags] = (0, react_1.useState)(numberOfAudioTags);
+    if (numberOfAudioTags !== initialNumberOfAudioTags) {
+        throw new Error('The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.');
+    }
+    const logLevel = (0, log_level_context_js_1.useLogLevel)();
+    const mountTime = (0, log_level_context_js_1.useMountTime)();
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const audioCtx = (0, react_1.useContext)(exports.SharedAudioContext);
+    const audioContext = (_a = audioCtx === null || audioCtx === void 0 ? void 0 : audioCtx.audioContext) !== null && _a !== void 0 ? _a : null;
+    const resume = audioCtx === null || audioCtx === void 0 ? void 0 : audioCtx.resume;
     const refs = (0, react_1.useMemo)(() => {
         return new Array(numberOfAudioTags).fill(true).map(() => {
             const ref = (0, react_1.createRef)();
@@ -178,7 +256,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
      *
      * Need to import it from React to fix React 17 ESM support.
      */
-    const effectToUse = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_1.default.useLayoutEffect;
+    const effectToUse = (_b = react_1.default.useInsertionEffect) !== null && _b !== void 0 ? _b : react_1.default.useLayoutEffect;
     // Disconnecting the SharedElementSourceNodes if the Player unmounts to prevent leak.
     // https://github.com/remotion-dev/remotion/issues/6285
     // But useInsertionEffect will fire before other effects, meaning the
@@ -294,8 +372,6 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
             rerenderAudios();
         }
     }, [rerenderAudios]);
-    const mountTime = (0, log_level_context_js_1.useMountTime)();
-    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const playAllAudios = (0, react_1.useCallback)(() => {
         refs.forEach((ref) => {
             const audio = audios.current.find((a) => a.el === ref.ref);
@@ -312,18 +388,15 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
                 isPlayer: env.isPlayer,
             });
         });
-        audioContext === null || audioContext === void 0 ? void 0 : audioContext.resume();
-    }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
-    const value = (0, react_1.useMemo)(() => {
+        resume === null || resume === void 0 ? void 0 : resume();
+    }, [logLevel, mountTime, refs, env.isPlayer, resume]);
+    const audioTagsValue = (0, react_1.useMemo)(() => {
         return {
             registerAudio,
             unregisterAudio,
             updateAudio,
             playAllAudios,
             numberOfAudioTags,
-            audioContext,
-            audioSyncAnchor,
-            scheduleAudioNode,
         };
     }, [
         numberOfAudioTags,
@@ -331,11 +404,8 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
         registerAudio,
         unregisterAudio,
         updateAudio,
-        audioContext,
-        audioSyncAnchor,
-        scheduleAudioNode,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(exports.SharedAudioContext.Provider, { value: value, children: [refs.map(({ id, ref }) => {
+    return ((0, jsx_runtime_1.jsxs)(exports.SharedAudioTagsContext.Provider, { value: audioTagsValue, children: [refs.map(({ id, ref }) => {
                 return (
                 // Without preload="metadata", iOS will seek the time internally
                 // but not actually with sound. Adding `preload="metadata"` helps here.
@@ -343,22 +413,23 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
                 (0, jsx_runtime_1.jsx)("audio", { ref: ref, preload: "metadata", src: EMPTY_AUDIO }, id));
             }), children] }));
 };
-exports.SharedAudioContextProvider = SharedAudioContextProvider;
+exports.SharedAudioTagsContextProvider = SharedAudioTagsContextProvider;
 const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {
     var _a;
-    const ctx = (0, react_1.useContext)(exports.SharedAudioContext);
+    const audioCtx = (0, react_1.useContext)(exports.SharedAudioContext);
+    const tagsCtx = (0, react_1.useContext)(exports.SharedAudioTagsContext);
     /**
      * We work around this in React 18 so an audio tag will only register itself once
      */
     const [elem] = (0, react_1.useState)(() => {
-        if (ctx && ctx.numberOfAudioTags > 0) {
-            return ctx.registerAudio({ aud, audioId, premounting, postmounting });
+        if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
+            return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
         }
         // numberOfSharedAudioTags is 0
         const el = react_1.default.createRef();
-        const mediaElementSourceNode = (ctx === null || ctx === void 0 ? void 0 : ctx.audioContext)
+        const mediaElementSourceNode = (audioCtx === null || audioCtx === void 0 ? void 0 : audioCtx.audioContext)
             ? (0, shared_element_source_node_js_1.makeSharedElementSourceNode)({
-                audioContext: ctx.audioContext,
+                audioContext: audioCtx.audioContext,
                 ref: el,
             })
             : null;
@@ -386,17 +457,23 @@ const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {
     const effectToUse = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_1.default.useLayoutEffect;
     if (typeof document !== 'undefined') {
         effectToUse(() => {
-            if (ctx && ctx.numberOfAudioTags > 0) {
-                ctx.updateAudio({ id: elem.id, aud, audioId, premounting, postmounting });
+            if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
+                tagsCtx.updateAudio({
+                    id: elem.id,
+                    aud,
+                    audioId,
+                    premounting,
+                    postmounting,
+                });
             }
-        }, [aud, ctx, elem.id, audioId, premounting, postmounting]);
+        }, [aud, tagsCtx, elem.id, audioId, premounting, postmounting]);
         effectToUse(() => {
             return () => {
-                if (ctx && ctx.numberOfAudioTags > 0) {
-                    ctx.unregisterAudio(elem.id);
+                if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
+                    tagsCtx.unregisterAudio(elem.id);
                 }
             };
-        }, [ctx, elem.id]);
+        }, [tagsCtx, elem.id]);
     }
     return elem;
 };

package/dist/cjs/audio/use-audio-context.d.ts

@@ -3,4 +3,7 @@ export declare const useSingletonAudioContext: ({ logLevel, latencyHint, audioEn
     logLevel: LogLevel;
     latencyHint: AudioContextLatencyCategory;
     audioEnabled: boolean;
-}) => AudioContext | null;
+}) => {
+    audioContext: AudioContext;
+    gainNode: GainNode;
+} | null;

package/dist/cjs/audio/use-audio-context.js

@@ -17,7 +17,7 @@ const warnOnce = (logLevel) => {
 };
 const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
     const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
-    const audioContext = (0, react_1.useMemo)(() => {
+    return (0, react_1.useMemo)(() => {
         if (env.isRendering) {
             return null;
         }
@@ -28,14 +28,19 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
             warnOnce(logLevel);
             return null;
         }
-        return new AudioContext({
+        const audioContext = new AudioContext({
             latencyHint,
             // By default, this can end up being 44100Hz.
             // Playing a 48000Hz file in a 44100Hz context, such as https://remotion.media/video.mp4 in a @remotion/media tag
             // we observe some issues that seem to go away when we set the sample rate to 48000 with Sony LinkBuds Bluetooth headphones.
             sampleRate: 48000,
         });
+        const gainNode = audioContext.createGain();
+        gainNode.connect(audioContext.destination);
+        return {
+            audioContext,
+            gainNode,
+        };
     }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
-    return audioContext;
 };
 exports.useSingletonAudioContext = useSingletonAudioContext;

package/dist/cjs/audio/wait-until-actually-resumed.d.ts

@@ -0,0 +1,2 @@
+import { type LogLevel } from '../log.js';
+export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: LogLevel) => Promise<void>;

package/dist/cjs/audio/wait-until-actually-resumed.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.waitUntilActuallyResumed = void 0;
+const log_js_1 = require("../log.js");
+const waitUntilActuallyResumed = (audioContext, logLevel) => {
+    return new Promise((resolve) => {
+        const startCurrentTime = audioContext.currentTime;
+        const start = audioContext.getOutputTimestamp();
+        const startOutputPerformanceTime = start.performanceTime;
+        const startWallClock = performance.now();
+        const check = () => {
+            var _a, _b;
+            const { currentTime } = audioContext;
+            const outputTimestamp = audioContext.getOutputTimestamp();
+            const elapsedWallClock = performance.now() - startWallClock;
+            if (startOutputPerformanceTime !== undefined &&
+                outputTimestamp.performanceTime !== undefined &&
+                outputTimestamp.performanceTime > startOutputPerformanceTime &&
+                outputTimestamp.contextTime !== undefined &&
+                outputTimestamp.contextTime > startCurrentTime) {
+                log_js_1.Log.verbose({ logLevel, tag: 'audio' }, `waitUntilActuallyResumed: getOutputTimestamp.performanceTime advanced from ${startOutputPerformanceTime.toFixed(6)} to ${outputTimestamp.performanceTime.toFixed(6)} after ${elapsedWallClock.toFixed(1)}ms. currentTime=${currentTime.toFixed(6)} (advanced by ${(currentTime - startCurrentTime).toFixed(6)}), getOutputTimestamp.performanceTime=${(_b = (_a = outputTimestamp.performanceTime) === null || _a === void 0 ? void 0 : _a.toFixed(1)) !== null && _b !== void 0 ? _b : 'undefined'}`);
+                resolve();
+                return;
+            }
+            requestAnimationFrame(check);
+        };
+        requestAnimationFrame(check);
+    });
+};
+exports.waitUntilActuallyResumed = waitUntilActuallyResumed;

package/dist/cjs/canvas-effects/HtmlInCanvas.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { EffectsProp } from './effect-types.js';
+export type HtmlInCanvasProps = {
+    readonly width: number;
+    readonly height: number;
+    readonly effects?: EffectsProp;
+    readonly children: React.ReactNode;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly pixelRatio?: number;
+};
+export declare const HtmlInCanvas: React.FC<HtmlInCanvasProps>;