remotion 4.0.455 → 4.0.457

package/dist/cjs/HtmlInCanvas.d.ts

@@ -55,5 +55,5 @@ export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFram
     readonly onInit?: HtmlInCanvasOnInit;
 };
 export declare const HtmlInCanvas: React.ForwardRefExoticComponent<HtmlInCanvasProps & React.RefAttributes<HTMLCanvasElement>> & {
-    readonly isHtmlInCanvasSupported: typeof isHtmlInCanvasSupported;
+    readonly isSupported: typeof isHtmlInCanvasSupported;
 };

package/dist/cjs/HtmlInCanvas.js

@@ -53,6 +53,7 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
     element.style.transform = transform.toString();
 };
 /* eslint-enable react/require-default-props */
+const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
 const htmlInCanvasSchema = {
     'style.translate': {
         type: 'translate',
@@ -83,7 +84,8 @@ const htmlInCanvasSchema = {
         description: 'Opacity',
     },
 };
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: experimentalEffects = [], children, onPaint, onInit, controls, style, durationInFrames, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: experimentalEffects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, ...sequenceProps }, ref) => {
+    const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
     const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     if (!(0, exports.isHtmlInCanvasSupported)()) {
@@ -246,12 +248,15 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
             ...style,
         };
     }, [width, height, style]);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", controls: controls, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }));
+    if (isInsideAncestorHtmlInCanvas) {
+        throw new Error('<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.');
+    }
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", _experimentalControls: controls, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasAncestorContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, htmlInCanvasSchema);
 exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
-    isHtmlInCanvasSupported: exports.isHtmlInCanvasSupported,
+    isSupported: exports.isHtmlInCanvasSupported,
 });
 exports.HtmlInCanvas.displayName = 'HtmlInCanvas';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.HtmlInCanvas);

package/dist/cjs/Img.js

@@ -54,7 +54,7 @@ const imgSchema = {
         description: 'Opacity',
     },
 };
-const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ref, controls, ...props }) => {
+const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ref, _experimentalControls: controls, ...props }) => {
     var _a, _b;
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});

package/dist/cjs/Sequence.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { LoopDisplay, SequenceControls } from './CompositionManager.js';
 import type { EffectsProp } from './effects/effect-types.js';
+import type { BasicMediaInTimelineReturnType } from './use-media-in-timeline.js';
 export type AbsoluteFillLayout = {
     layout?: 'absolute-fill';
     premountFor?: number;
@@ -20,7 +21,7 @@ export type SequencePropsWithoutDuration = {
     readonly from?: number;
     readonly name?: string;
     readonly showInTimeline?: boolean;
-    readonly controls?: SequenceControls;
+    readonly _experimentalControls?: SequenceControls;
     readonly _experimentalEffects?: EffectsProp;
     /**
      * @deprecated For internal use only.
@@ -46,6 +47,13 @@ export type SequencePropsWithoutDuration = {
      * @deprecated For internal use only.
      */
     readonly _remotionInternalIsPostmounting?: boolean;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalIsMedia?: {
+        type: 'video' | 'audio';
+        data: BasicMediaInTimelineReturnType;
+    };
 } & LayoutAndStyle;
 export type SequenceProps = {
     readonly durationInFrames?: number;

package/dist/cjs/Sequence.js

@@ -17,7 +17,7 @@ const use_current_frame_1 = require("./use-current-frame");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
-const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, controls, _experimentalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, _experimentalControls: controls, _experimentalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
     var _a, _b;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -99,16 +99,43 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const inheritedStack = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)((0, effect_internals_js_1.flattenEffects)(_experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : []));
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b;
         if (!env.isStudio) {
             return;
         }
+        if (isMedia) {
+            registerSequence({
+                type: isMedia.type,
+                controls: controls !== null && controls !== void 0 ? controls : null,
+                effects: memoizedEffects,
+                displayName: timelineClipName,
+                doesVolumeChange: isMedia.data.doesVolumeChange,
+                duration: actualDurationInFrames,
+                from,
+                id,
+                loopDisplay,
+                nonce: nonce.get(),
+                parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
+                playbackRate: isMedia.data.playbackRate,
+                postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
+                premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
+                rootId,
+                showInTimeline,
+                src: isMedia.data.src,
+                stack: stack !== null && stack !== void 0 ? stack : inheritedStack,
+                startMediaFrom: isMedia.data.startMediaFrom,
+                volume: isMedia.data.volumes,
+            });
+            return () => {
+                unregisterSequence(id);
+            };
+        }
         registerSequence({
             from,
             duration: actualDurationInFrames,
             id,
             displayName: timelineClipName,
-            parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
+            parent: (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _b !== void 0 ? _b : null,
             type: 'sequence',
             rootId,
             showInTimeline,
@@ -144,6 +171,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         inheritedStack,
         controls,
         memoizedEffects,
+        isMedia,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958

package/dist/cjs/audio/Audio.d.ts

@@ -5,52 +5,52 @@ import type { RemotionMainAudioProps } from './props.js';
  * @see [Documentation](https://remotion.dev/docs/html5-audio)
  */
 export declare const Html5Audio: React.ForwardRefExoticComponent<Omit<import("./props.js").NativeAudioProps & {
-    name?: string;
-    volume?: import("../volume-prop.js").VolumeProp;
-    playbackRate?: number;
-    acceptableTimeShiftInSeconds?: number;
-    allowAmplificationDuringRender?: boolean;
-    _remotionInternalNeedsDurationCalculation?: boolean;
-    _remotionInternalNativeLoopPassed?: boolean;
-    toneFrequency?: number;
-    useWebAudioApi?: boolean;
-    pauseWhenBuffering?: boolean;
-    showInTimeline?: boolean;
-    delayRenderTimeoutInMilliseconds?: number;
-    delayRenderRetries?: number;
-    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
-    onError?: (err: Error) => void;
-    audioStreamIndex?: number;
+    name?: string | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
+    playbackRate?: number | undefined;
+    acceptableTimeShiftInSeconds?: number | undefined;
+    allowAmplificationDuringRender?: boolean | undefined;
+    _remotionInternalNeedsDurationCalculation?: boolean | undefined;
+    _remotionInternalNativeLoopPassed?: boolean | undefined;
+    toneFrequency?: number | undefined;
+    useWebAudioApi?: boolean | undefined;
+    pauseWhenBuffering?: boolean | undefined;
+    showInTimeline?: boolean | undefined;
+    delayRenderTimeoutInMilliseconds?: number | undefined;
+    delayRenderRetries?: number | undefined;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
+    onError?: ((err: Error) => void) | undefined;
+    audioStreamIndex?: number | undefined;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string;
+    readonly stack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;
 /**
  * @deprecated This component has been renamed to `Html5Audio`.
  * @see [Documentation](https://remotion.dev/docs/mediabunny/new-video)
  */
 export declare const Audio: React.ForwardRefExoticComponent<Omit<import("./props.js").NativeAudioProps & {
-    name?: string;
-    volume?: import("../volume-prop.js").VolumeProp;
-    playbackRate?: number;
-    acceptableTimeShiftInSeconds?: number;
-    allowAmplificationDuringRender?: boolean;
-    _remotionInternalNeedsDurationCalculation?: boolean;
-    _remotionInternalNativeLoopPassed?: boolean;
-    toneFrequency?: number;
-    useWebAudioApi?: boolean;
-    pauseWhenBuffering?: boolean;
-    showInTimeline?: boolean;
-    delayRenderTimeoutInMilliseconds?: number;
-    delayRenderRetries?: number;
-    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
-    onError?: (err: Error) => void;
-    audioStreamIndex?: number;
+    name?: string | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
+    playbackRate?: number | undefined;
+    acceptableTimeShiftInSeconds?: number | undefined;
+    allowAmplificationDuringRender?: boolean | undefined;
+    _remotionInternalNeedsDurationCalculation?: boolean | undefined;
+    _remotionInternalNativeLoopPassed?: boolean | undefined;
+    toneFrequency?: number | undefined;
+    useWebAudioApi?: boolean | undefined;
+    pauseWhenBuffering?: boolean | undefined;
+    showInTimeline?: boolean | undefined;
+    delayRenderTimeoutInMilliseconds?: number | undefined;
+    delayRenderRetries?: number | undefined;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
+    onError?: ((err: Error) => void) | undefined;
+    audioStreamIndex?: number | undefined;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string;
+    readonly stack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/Audio.js

@@ -66,25 +66,25 @@ const AudioRefForwardingFunction = (props, ref) => {
     });
     if (loop && durationFetched !== undefined) {
         if (!Number.isFinite(durationFetched)) {
-            return ((0, jsx_runtime_1.jsx)(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
+            return (jsx_runtime_1.jsx(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
         }
         const duration = durationFetched * fps;
-        return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
+        return (jsx_runtime_1.jsx(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
                 trimAfter: trimAfterValue,
                 mediaDurationInFrames: duration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
                 trimBefore: trimBeforeValue,
-            }), children: (0, jsx_runtime_1.jsx)(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
+            }), children: jsx_runtime_1.jsx(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
     }
     if (typeof trimBeforeValue !== 'undefined' ||
         typeof trimAfterValue !== 'undefined') {
-        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: (0, jsx_runtime_1.jsx)(exports.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: jsx_runtime_1.jsx(exports.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)({ playbackRate: props.playbackRate, volume: props.volume }, 'Html5Audio');
     if (environment.isRendering) {
-        return ((0, jsx_runtime_1.jsx)(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onNativeError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
+        return (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: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, 
+    return (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/html5-audio.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { RemotionMainAudioProps } from './props.js';
+/**
+ * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
+ * @see [Documentation](https://remotion.dev/docs/html5-audio)
+ */
+export declare const Html5Audio: React.ForwardRefExoticComponent<Omit<import("./props.js").NativeAudioProps & {
+    name?: string;
+    volume?: import("../volume-prop.js").VolumeProp;
+    playbackRate?: number;
+    acceptableTimeShiftInSeconds?: number;
+    allowAmplificationDuringRender?: boolean;
+    _remotionInternalNeedsDurationCalculation?: boolean;
+    _remotionInternalNativeLoopPassed?: boolean;
+    toneFrequency?: number;
+    useWebAudioApi?: boolean;
+    pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
+    delayRenderTimeoutInMilliseconds?: number;
+    delayRenderRetries?: number;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
+    onError?: (err: Error) => void;
+    audioStreamIndex?: number;
+} & RemotionMainAudioProps & {
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
+}, "ref"> & React.RefAttributes<HTMLAudioElement>>;
+/**
+ * @deprecated This component has been renamed to `Html5Audio`.
+ * @see [Documentation](https://remotion.dev/docs/mediabunny/new-video)
+ */
+export declare const Audio: React.ForwardRefExoticComponent<Omit<import("./props.js").NativeAudioProps & {
+    name?: string;
+    volume?: import("../volume-prop.js").VolumeProp;
+    playbackRate?: number;
+    acceptableTimeShiftInSeconds?: number;
+    allowAmplificationDuringRender?: boolean;
+    _remotionInternalNeedsDurationCalculation?: boolean;
+    _remotionInternalNativeLoopPassed?: boolean;
+    toneFrequency?: number;
+    useWebAudioApi?: boolean;
+    pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
+    delayRenderTimeoutInMilliseconds?: number;
+    delayRenderRetries?: number;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
+    onError?: (err: Error) => void;
+    audioStreamIndex?: number;
+} & RemotionMainAudioProps & {
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
+}, "ref"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/html5-audio.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Audio = exports.Html5Audio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const react_1 = require("react");
+const absolute_src_js_1 = require("../absolute-src.js");
+const calculate_media_duration_js_1 = require("../calculate-media-duration.js");
+const cancel_render_js_1 = require("../cancel-render.js");
+const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
+const index_js_1 = require("../loop/index.js");
+const prefetch_js_1 = require("../prefetch.js");
+const Sequence_js_1 = require("../Sequence.js");
+const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
+const use_video_config_js_1 = require("../use-video-config.js");
+const validate_media_props_js_1 = require("../validate-media-props.js");
+const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
+const duration_state_js_1 = require("../video/duration-state.js");
+const AudioForPreview_js_1 = require("./AudioForPreview.js");
+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 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)();
+    const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    if (environment.isClientSideRendering) {
+        throw new Error('<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations');
+    }
+    const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    const preloadedSrc = (0, prefetch_js_1.usePreload)(props.src);
+    const onError = (0, react_1.useCallback)((e) => {
+        // eslint-disable-next-line no-console
+        console.log(e.currentTarget.error);
+        // If there is no `loop` property, we don't need to get the duration
+        // and this does not need to be a fatal error
+        const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
+        if (loop) {
+            if (onRemotionError) {
+                onRemotionError(new Error(errMessage));
+                return;
+            }
+            (0, cancel_render_js_1.cancelRender)(new Error(errMessage));
+        }
+        else {
+            onRemotionError === null || onRemotionError === void 0 ? void 0 : onRemotionError(new Error(errMessage));
+            // eslint-disable-next-line no-console
+            console.warn(errMessage);
+        }
+    }, [loop, onRemotionError, preloadedSrc]);
+    const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
+        setDurations({ type: 'got-duration', durationInSeconds, src });
+    }, [setDurations]);
+    const durationFetched = (_a = durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)]) !== null && _a !== void 0 ? _a : durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)];
+    (0, validate_start_from_props_js_1.validateMediaTrimProps)({ startFrom, endAt, trimBefore, trimAfter });
+    const { trimBeforeValue, trimAfterValue } = (0, validate_start_from_props_js_1.resolveTrimProps)({
+        startFrom,
+        endAt,
+        trimBefore,
+        trimAfter,
+    });
+    if (loop && durationFetched !== undefined) {
+        if (!Number.isFinite(durationFetched)) {
+            return ((0, jsx_runtime_1.jsx)(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
+        }
+        const duration = durationFetched * fps;
+        return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
+                trimAfter: trimAfterValue,
+                mediaDurationInFrames: duration,
+                playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
+                trimBefore: trimBeforeValue,
+            }), children: (0, jsx_runtime_1.jsx)(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
+    }
+    if (typeof trimBeforeValue !== 'undefined' ||
+        typeof trimAfterValue !== 'undefined') {
+        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: (0, jsx_runtime_1.jsx)(exports.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
+    }
+    (0, validate_media_props_js_1.validateMediaProps)({ playbackRate: props.playbackRate, volume: props.volume }, 'Html5Audio');
+    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: 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 }));
+};
+/**
+ * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
+ * @see [Documentation](https://remotion.dev/docs/html5-audio)
+ */
+exports.Html5Audio = (0, react_1.forwardRef)(AudioRefForwardingFunction);
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Html5Audio);
+/**
+ * @deprecated This component has been renamed to `Html5Audio`.
+ * @see [Documentation](https://remotion.dev/docs/mediabunny/new-video)
+ */
+exports.Audio = exports.Html5Audio;

package/dist/cjs/audio/index.d.ts

@@ -1,2 +1,2 @@
-export { Audio, Html5Audio } from './Audio.js';
+export { Audio, Html5Audio } from './html5-audio.js';
 export * from './props.js';

package/dist/cjs/audio/index.js

@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Html5Audio = exports.Audio = void 0;
-var Audio_js_1 = require("./Audio.js");
-Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return Audio_js_1.Audio; } });
-Object.defineProperty(exports, "Html5Audio", { enumerable: true, get: function () { return Audio_js_1.Html5Audio; } });
+var html5_audio_js_1 = require("./html5-audio.js");
+Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return html5_audio_js_1.Audio; } });
+Object.defineProperty(exports, "Html5Audio", { enumerable: true, get: function () { return html5_audio_js_1.Html5Audio; } });
 __exportStar(require("./props.js"), exports);

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

@@ -169,17 +169,27 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
             return Promise.resolve();
         }
         audioContextIsPlayingEventually.current = true;
-        isResuming.current = (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel)
-            .then(() => { })
-            .finally(() => {
+        const resumePromise = ctxAndGain.audioContext.resume();
+        isResuming.current = new Promise((resolve) => {
+            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel).then(resolve);
+            resumePromise.catch((err) => {
+                log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'AudioContext resume rejected, continuing without audio sync', err);
+                resolve();
+            });
+        }).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(() => {
+        return resumePromise
+            .then(() => {
             nodesToResume.current.forEach((r, node) => node.start(r.scheduledTime, r.offset, r.duration));
             nodesToResume.current.clear();
+        })
+            .catch(() => {
+            // Already logged above; swallow to avoid unhandled rejection
+            // since callers (e.g. use-playback.ts) do not await this.
         });
     }, [ctxAndGain, logLevel]);
     const getIsResumingAudioContext = (0, react_1.useCallback)(() => {

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.ComponentType<HtmlInCanvasProps>;