@remotion/media 4.0.423 → 4.0.424

package/dist/esm/index.mjs

@@ -36,6 +36,9 @@ var __callDispose = (stack, error, hasError) => {
   return next();
 };
 
+// src/index.ts
+import { registerAc3Decoder } from "@mediabunny/ac3";
+
 // src/audio/audio.tsx
 import { Internals as Internals15, useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
 
@@ -2409,6 +2412,17 @@ var makeKeyframeBank = async ({
   let hasReachedEndOfVideo = false;
   let lastUsed = Date.now();
   let allocationSize = 0;
+  const getDurationOfFrame = (timestamp) => {
+    const index = frameTimestamps.indexOf(timestamp);
+    if (index === -1) {
+      throw new Error(`Frame ${timestamp} not found`);
+    }
+    const nextTimestamp = frameTimestamps[index + 1];
+    if (!nextTimestamp) {
+      return null;
+    }
+    return nextTimestamp - timestamp;
+  };
   const deleteFrameAtTimestamp = (timestamp) => {
     allocationSize -= getAllocationSize(frames[timestamp]);
     frameTimestamps.splice(frameTimestamps.indexOf(timestamp), 1);
@@ -2430,7 +2444,7 @@ var makeKeyframeBank = async ({
       if (!frames[frameTimestamp]) {
         continue;
       }
-      const { duration } = frames[frameTimestamp];
+      const duration = getDurationOfFrame(frameTimestamp) ?? frames[frameTimestamp].duration;
       if (frameTimestamp + duration < timestampInSeconds) {
         deleteFrameAtTimestamp(frameTimestamp);
         deletedTimestamps.push(frameTimestamp);
@@ -2449,7 +2463,8 @@ var makeKeyframeBank = async ({
     if (!lastFrame) {
       return true;
     }
-    return roundTo4Digits(lastFrame.timestamp + lastFrame.duration) > roundTo4Digits(timestamp);
+    const duration = getDurationOfFrame(lastFrameTimestamp) ?? lastFrame.duration;
+    return roundTo4Digits(lastFrameTimestamp + duration) > roundTo4Digits(timestamp);
   };
   const addFrame = (frame, logLevel) => {
     if (frames[frame.timestamp]) {
@@ -2523,9 +2538,10 @@ var makeKeyframeBank = async ({
     const firstTimestamp = frameTimestamps[0];
     const lastTimestamp = frameTimestamps[frameTimestamps.length - 1];
     const lastFrame = frames[lastTimestamp];
+    const lastFrameDuration = getDurationOfFrame(lastTimestamp) ?? lastFrame.duration ?? 0;
     return {
       firstTimestamp,
-      lastTimestamp: lastTimestamp + lastFrame.duration
+      lastTimestamp: lastTimestamp + lastFrameDuration
     };
   };
   const prepareForDeletion = (logLevel, reason) => {
@@ -4944,9 +4960,11 @@ var Video = ({
   });
 };
 Internals18.addSequenceStackTraces(Video);
+
 // src/index.ts
 var experimental_Audio = Audio;
 var experimental_Video = Video;
+registerAc3Decoder();
 export {
   experimental_Video,
   experimental_Audio,

package/dist/video-extraction/get-allocation-size.d.ts

@@ -1,2 +1,2 @@
-import type { VideoSample } from 'mediabunny';
-export declare const getAllocationSize: (sample: VideoSample) => number;
+import type { VideoSampleWithoutDuration } from './keyframe-bank';
+export declare const getAllocationSize: (sample: VideoSampleWithoutDuration) => number;

package/dist/video-extraction/keyframe-bank.d.ts

@@ -1,8 +1,9 @@
 import type { VideoSample, VideoSampleSink } from 'mediabunny';
 import { type LogLevel } from 'remotion';
+export type VideoSampleWithoutDuration = Omit<VideoSample, 'duration'>;
 export type KeyframeBank = {
     src: string;
-    getFrameFromTimestamp: (timestamp: number, fps: number) => Promise<VideoSample | null>;
+    getFrameFromTimestamp: (timestamp: number, fps: number) => Promise<VideoSampleWithoutDuration | null>;
     prepareForDeletion: (logLevel: LogLevel, reason: string) => {
         framesDeleted: number;
     };

package/package.json

@@ -1,13 +1,12 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.423",
+	"version": "4.0.424",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/media"
 	},
-	"sideEffects": false,
 	"author": "Jonny Burger <jonny@remotion.dev>, Hunain Ahmed <junaidhunain6@gmail.com>",
 	"bugs": {
 		"url": "https://github.com/remotion-dev/remotion/issues"
@@ -22,23 +21,23 @@
 		"make": "tsgo && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"dependencies": {
-		"mediabunny": "1.34.2",
-		"@mediabunny/ac3": "1.34.2",
-		"remotion": "4.0.423"
+		"mediabunny": "1.34.4",
+		"@mediabunny/ac3": "1.34.4",
+		"remotion": "4.0.424"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.423",
+		"@remotion/eslint-config-internal": "4.0.424",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"vitest": "4.0.9",
 		"webdriverio": "9.19.2",
-		"@typescript/native-preview": "7.0.0-dev.20260105.1"
+		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
 	"keywords": [],
 	"publishConfig": {

package/dist/audio/allow-wait.js

@@ -1,15 +0,0 @@
-export const allowWaitRoutine = async (next, waitFn) => {
-    const result = await Promise.race([
-        next,
-        new Promise((resolve) => {
-            Promise.resolve().then(() => resolve());
-        }),
-    ]);
-    if (!result) {
-        const unblock = waitFn.waitCallback();
-        const newRes = await next;
-        unblock();
-        return newRes;
-    }
-    return result;
-};

package/dist/audio/audio-for-preview.js

@@ -1,304 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { Internals, Audio as RemotionAudio, useBufferState, useCurrentFrame, useVideoConfig, } from 'remotion';
-import { getTimeInSeconds } from '../get-time-in-seconds';
-import { MediaPlayer } from '../media-player';
-import { useLoopDisplay } from '../show-in-timeline';
-import { useMediaInTimeline } from '../use-media-in-timeline';
-const { useUnsafeVideoConfig, Timeline, SharedAudioContext, useMediaMutedState, useMediaVolumeState, useFrameForVolumeProp, evaluateVolume, warnAboutTooHighVolume, usePreload, SequenceContext, } = Internals;
-const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, volume, loopVolumeCurveBehavior, loop, trimAfter, trimBefore, name, showInTimeline, stack, disallowFallbackToHtml5Audio, toneFrequency, audioStreamIndex, fallbackHtml5AudioProps, }) => {
-    const videoConfig = useUnsafeVideoConfig();
-    const frame = useCurrentFrame();
-    const mediaPlayerRef = useRef(null);
-    const initialTrimBeforeRef = useRef(trimBefore);
-    const initialTrimAfterRef = useRef(trimAfter);
-    const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
-    const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState(false);
-    const [playing] = Timeline.usePlayingState();
-    const timelineContext = useContext(Internals.TimelineContext);
-    const globalPlaybackRate = timelineContext.playbackRate;
-    const sharedAudioContext = useContext(SharedAudioContext);
-    const buffer = useBufferState();
-    const [mediaMuted] = useMediaMutedState();
-    const [mediaVolume] = useMediaVolumeState();
-    const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState(null);
-    const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
-    const userPreferredVolume = evaluateVolume({
-        frame: volumePropFrame,
-        volume,
-        mediaVolume,
-    });
-    warnAboutTooHighVolume(userPreferredVolume);
-    if (!videoConfig) {
-        throw new Error('No video config found');
-    }
-    if (!src) {
-        throw new TypeError('No `src` was passed to <NewAudioForPreview>.');
-    }
-    const currentTime = frame / videoConfig.fps;
-    const currentTimeRef = useRef(currentTime);
-    currentTimeRef.current = currentTime;
-    const preloadedSrc = usePreload(src);
-    const parentSequence = useContext(SequenceContext);
-    const isPremounting = Boolean(parentSequence?.premounting);
-    const isPostmounting = Boolean(parentSequence?.postmounting);
-    const loopDisplay = useLoopDisplay({
-        loop,
-        mediaDurationInSeconds,
-        playbackRate,
-        trimAfter,
-        trimBefore,
-    });
-    useMediaInTimeline({
-        volume,
-        mediaVolume,
-        mediaType: 'audio',
-        src,
-        playbackRate,
-        displayName: name ?? null,
-        stack,
-        showInTimeline,
-        premountDisplay: parentSequence?.premountDisplay ?? null,
-        postmountDisplay: parentSequence?.postmountDisplay ?? null,
-        loopDisplay,
-        trimAfter,
-        trimBefore,
-    });
-    const bufferingContext = useContext(Internals.BufferingContextReact);
-    if (!bufferingContext) {
-        throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
-    }
-    const isPlayerBuffering = Internals.useIsPlayerBuffering(bufferingContext);
-    const initialPlaying = useRef(playing && !isPlayerBuffering);
-    const initialIsPremounting = useRef(isPremounting);
-    const initialIsPostmounting = useRef(isPostmounting);
-    const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
-    const initialPlaybackRate = useRef(playbackRate);
-    useEffect(() => {
-        if (!sharedAudioContext)
-            return;
-        if (!sharedAudioContext.audioContext)
-            return;
-        try {
-            const player = new MediaPlayer({
-                src: preloadedSrc,
-                logLevel,
-                sharedAudioContext: sharedAudioContext.audioContext,
-                loop,
-                trimAfter: initialTrimAfterRef.current,
-                trimBefore: initialTrimBeforeRef.current,
-                fps: videoConfig.fps,
-                canvas: null,
-                playbackRate: initialPlaybackRate.current,
-                audioStreamIndex: audioStreamIndex ?? 0,
-                debugOverlay: false,
-                bufferState: buffer,
-                isPostmounting: initialIsPostmounting.current,
-                isPremounting: initialIsPremounting.current,
-                globalPlaybackRate: initialGlobalPlaybackRate.current,
-                onVideoFrameCallback: null,
-                playing: initialPlaying.current,
-            });
-            mediaPlayerRef.current = player;
-            player
-                .initialize(currentTimeRef.current)
-                .then((result) => {
-                if (result.type === 'disposed') {
-                    return;
-                }
-                if (result.type === 'unknown-container-format') {
-                    if (disallowFallbackToHtml5Audio) {
-                        throw new Error(`Unknown container format ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
-                    }
-                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
-                    setShouldFallbackToNativeAudio(true);
-                    return;
-                }
-                if (result.type === 'network-error') {
-                    if (disallowFallbackToHtml5Audio) {
-                        throw new Error(`Network error fetching ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
-                    }
-                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${preloadedSrc}, falling back to <Html5Audio>`);
-                    setShouldFallbackToNativeAudio(true);
-                    return;
-                }
-                if (result.type === 'cannot-decode') {
-                    if (disallowFallbackToHtml5Audio) {
-                        throw new Error(`Cannot decode ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
-                    }
-                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${preloadedSrc}, falling back to <Html5Audio>`);
-                    setShouldFallbackToNativeAudio(true);
-                    return;
-                }
-                if (result.type === 'no-tracks') {
-                    if (disallowFallbackToHtml5Audio) {
-                        throw new Error(`No video or audio tracks found for ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
-                    }
-                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `No video or audio tracks found for ${preloadedSrc}, falling back to <Html5Audio>`);
-                    setShouldFallbackToNativeAudio(true);
-                    return;
-                }
-                if (result.type === 'success') {
-                    setMediaPlayerReady(true);
-                    setMediaDurationInSeconds(result.durationInSeconds);
-                    Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[AudioForPreview] MediaPlayer initialized successfully`);
-                }
-            })
-                .catch((error) => {
-                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[AudioForPreview] Failed to initialize MediaPlayer', error);
-                setShouldFallbackToNativeAudio(true);
-            });
-        }
-        catch (error) {
-            Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[AudioForPreview] MediaPlayer initialization failed', error);
-            setShouldFallbackToNativeAudio(true);
-        }
-        return () => {
-            if (mediaPlayerRef.current) {
-                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[AudioForPreview] Disposing MediaPlayer`);
-                mediaPlayerRef.current.dispose();
-                mediaPlayerRef.current = null;
-            }
-            setMediaPlayerReady(false);
-            setShouldFallbackToNativeAudio(false);
-        };
-    }, [
-        preloadedSrc,
-        logLevel,
-        sharedAudioContext,
-        currentTimeRef,
-        loop,
-        videoConfig.fps,
-        audioStreamIndex,
-        disallowFallbackToHtml5Audio,
-        buffer,
-    ]);
-    useLayoutEffect(() => {
-        const audioPlayer = mediaPlayerRef.current;
-        if (!audioPlayer)
-            return;
-        if (playing && !isPlayerBuffering) {
-            audioPlayer.play(currentTimeRef.current);
-        }
-        else {
-            audioPlayer.pause();
-        }
-    }, [isPlayerBuffering, logLevel, playing]);
-    useLayoutEffect(() => {
-        const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady) {
-            return;
-        }
-        mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
-    }, [trimBefore, mediaPlayerReady]);
-    useLayoutEffect(() => {
-        const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady) {
-            return;
-        }
-        mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
-    }, [trimAfter, mediaPlayerReady]);
-    const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
-    useLayoutEffect(() => {
-        const audioPlayer = mediaPlayerRef.current;
-        if (!audioPlayer || !mediaPlayerReady)
-            return;
-        audioPlayer.setMuted(effectiveMuted);
-    }, [effectiveMuted, mediaPlayerReady]);
-    useEffect(() => {
-        const audioPlayer = mediaPlayerRef.current;
-        if (!audioPlayer || !mediaPlayerReady) {
-            return;
-        }
-        audioPlayer.setVolume(userPreferredVolume);
-    }, [userPreferredVolume, mediaPlayerReady]);
-    useEffect(() => {
-        const audioPlayer = mediaPlayerRef.current;
-        if (!audioPlayer || !mediaPlayerReady) {
-            return;
-        }
-        audioPlayer.setPlaybackRate(playbackRate);
-    }, [playbackRate, mediaPlayerReady]);
-    useLayoutEffect(() => {
-        const audioPlayer = mediaPlayerRef.current;
-        if (!audioPlayer || !mediaPlayerReady) {
-            return;
-        }
-        audioPlayer.setGlobalPlaybackRate(globalPlaybackRate);
-    }, [globalPlaybackRate, mediaPlayerReady]);
-    useLayoutEffect(() => {
-        const audioPlayer = mediaPlayerRef.current;
-        if (!audioPlayer || !mediaPlayerReady) {
-            return;
-        }
-        audioPlayer.setFps(videoConfig.fps);
-    }, [videoConfig.fps, mediaPlayerReady]);
-    useLayoutEffect(() => {
-        const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady) {
-            return;
-        }
-        mediaPlayer.setLoop(loop);
-    }, [loop, mediaPlayerReady]);
-    useLayoutEffect(() => {
-        const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady) {
-            return;
-        }
-        mediaPlayer.setIsPremounting(isPremounting);
-    }, [isPremounting, mediaPlayerReady]);
-    useLayoutEffect(() => {
-        const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady) {
-            return;
-        }
-        mediaPlayer.setIsPostmounting(isPostmounting);
-    }, [isPostmounting, mediaPlayerReady]);
-    useLayoutEffect(() => {
-        const audioPlayer = mediaPlayerRef.current;
-        if (!audioPlayer || !mediaPlayerReady)
-            return;
-        audioPlayer.seekTo(currentTime).catch(() => {
-            // Might be disposed
-        });
-        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[AudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
-    }, [currentTime, logLevel, mediaPlayerReady]);
-    if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
-        return (_jsx(RemotionAudio, { src: src, muted: muted, volume: volume, startFrom: trimBefore, endAt: trimAfter, playbackRate: playbackRate, loopVolumeCurveBehavior: loopVolumeCurveBehavior, name: name, loop: loop, showInTimeline: showInTimeline, stack: stack ?? undefined, toneFrequency: toneFrequency, audioStreamIndex: audioStreamIndex, pauseWhenBuffering: fallbackHtml5AudioProps?.pauseWhenBuffering, crossOrigin: fallbackHtml5AudioProps?.crossOrigin, ...fallbackHtml5AudioProps }));
-    }
-    return null;
-};
-export const AudioForPreview = ({ loop, src, logLevel, muted, name, volume, loopVolumeCurveBehavior, playbackRate, trimAfter, trimBefore, showInTimeline, stack, disallowFallbackToHtml5Audio, toneFrequency, audioStreamIndex, fallbackHtml5AudioProps, }) => {
-    const preloadedSrc = usePreload(src);
-    const frame = useCurrentFrame();
-    const videoConfig = useVideoConfig();
-    const currentTime = frame / videoConfig.fps;
-    const showShow = useMemo(() => {
-        return (getTimeInSeconds({
-            unloopedTimeInSeconds: currentTime,
-            playbackRate: playbackRate ?? 1,
-            loop: loop ?? false,
-            trimBefore,
-            trimAfter,
-            mediaDurationInSeconds: Infinity,
-            fps: videoConfig.fps,
-            ifNoMediaDuration: 'infinity',
-            src,
-        }) !== null);
-    }, [
-        currentTime,
-        loop,
-        playbackRate,
-        src,
-        trimAfter,
-        trimBefore,
-        videoConfig.fps,
-    ]);
-    if (!showShow) {
-        return null;
-    }
-    return (_jsx(AudioForPreviewAssertedShowing, { audioStreamIndex: audioStreamIndex ?? 0, src: preloadedSrc, playbackRate: playbackRate ?? 1, logLevel: logLevel ??
-            (typeof window !== 'undefined'
-                ? (window.remotion_logLevel ?? 'info')
-                : 'info'), muted: muted ?? false, volume: volume ?? 1, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', loop: loop ?? false, trimAfter: trimAfter, trimBefore: trimBefore, name: name, showInTimeline: showInTimeline ?? true, stack: stack, disallowFallbackToHtml5Audio: disallowFallbackToHtml5Audio ?? false, toneFrequency: toneFrequency, fallbackHtml5AudioProps: fallbackHtml5AudioProps }));
-};

package/dist/audio/audio-for-rendering.js

@@ -1,194 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useLayoutEffect, useMemo, useState } from 'react';
-import { cancelRender, Html5Audio, Internals, random, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
-import { useMaxMediaCacheSize } from '../caches';
-import { applyVolume } from '../convert-audiodata/apply-volume';
-import { TARGET_SAMPLE_RATE } from '../convert-audiodata/resample-audiodata';
-import { frameForVolumeProp } from '../looped-frame';
-import { extractFrameViaBroadcastChannel } from '../video-extraction/extract-frame-via-broadcast-channel';
-export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, logLevel = window.remotion_logLevel ?? 'info', loop, fallbackHtml5AudioProps, audioStreamIndex, showInTimeline, style, name, disallowFallbackToHtml5Audio, toneFrequency, trimAfter, trimBefore, }) => {
-    const frame = useCurrentFrame();
-    const absoluteFrame = Internals.useTimelinePosition();
-    const videoConfig = Internals.useUnsafeVideoConfig();
-    const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
-    const startsAt = Internals.useMediaStartsAt();
-    const environment = useRemotionEnvironment();
-    if (!videoConfig) {
-        throw new Error('No video config found');
-    }
-    if (!src) {
-        throw new TypeError('No `src` was passed to <Audio>.');
-    }
-    const { fps } = videoConfig;
-    const { delayRender, continueRender } = useDelayRender();
-    const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState(false);
-    const sequenceContext = useContext(Internals.SequenceContext);
-    // Generate a string that's as unique as possible for this asset
-    // but at the same time the same on all threads
-    const id = useMemo(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
-        src,
-        sequenceContext?.cumulatedFrom,
-        sequenceContext?.relativeFrom,
-        sequenceContext?.durationInFrames,
-    ]);
-    const maxCacheSize = useMaxMediaCacheSize(logLevel ?? window.remotion_logLevel);
-    const audioEnabled = Internals.useAudioEnabled();
-    useLayoutEffect(() => {
-        const timestamp = frame / fps;
-        const durationInSeconds = 1 / fps;
-        const shouldRenderAudio = (() => {
-            if (!audioEnabled) {
-                return false;
-            }
-            if (muted) {
-                return false;
-            }
-            return true;
-        })();
-        if (!shouldRenderAudio) {
-            return;
-        }
-        if (replaceWithHtml5Audio) {
-            return;
-        }
-        const newHandle = delayRender(`Extracting audio for frame ${frame}`, {
-            retries: delayRenderRetries ?? undefined,
-            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
-        });
-        extractFrameViaBroadcastChannel({
-            src,
-            timeInSeconds: timestamp,
-            durationInSeconds,
-            playbackRate: playbackRate ?? 1,
-            logLevel: logLevel ?? window.remotion_logLevel,
-            includeAudio: shouldRenderAudio,
-            includeVideo: false,
-            isClientSideRendering: environment.isClientSideRendering,
-            loop: loop ?? false,
-            audioStreamIndex: audioStreamIndex ?? 0,
-            trimAfter,
-            trimBefore,
-            fps,
-            maxCacheSize,
-        })
-            .then((result) => {
-            if (result.type === 'unknown-container-format') {
-                if (environment.isClientSideRendering) {
-                    cancelRender(new Error(`Cannot render audio "${src}": Unknown container format. See supported formats: https://www.remotion.dev/docs/mediabunny/formats`));
-                    return;
-                }
-                if (disallowFallbackToHtml5Audio) {
-                    cancelRender(new Error(`Unknown container format ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
-                }
-                Internals.Log.warn({
-                    logLevel: logLevel ?? window.remotion_logLevel,
-                    tag: '@remotion/media',
-                }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
-                setReplaceWithHtml5Audio(true);
-                return;
-            }
-            if (result.type === 'cannot-decode') {
-                if (environment.isClientSideRendering) {
-                    cancelRender(new Error(`Cannot render audio "${src}": The audio could not be decoded by the browser.`));
-                    return;
-                }
-                if (disallowFallbackToHtml5Audio) {
-                    cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
-                }
-                Internals.Log.warn({
-                    logLevel: logLevel ?? window.remotion_logLevel,
-                    tag: '@remotion/media',
-                }, `Cannot decode ${src}, falling back to <Html5Audio>`);
-                setReplaceWithHtml5Audio(true);
-                return;
-            }
-            if (result.type === 'cannot-decode-alpha') {
-                throw new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToHtml5Audio' was set. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
-            }
-            if (result.type === 'network-error') {
-                if (environment.isClientSideRendering) {
-                    cancelRender(new Error(`Cannot render audio "${src}": Network error while fetching the audio (possibly CORS).`));
-                    return;
-                }
-                if (disallowFallbackToHtml5Audio) {
-                    cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
-                }
-                Internals.Log.warn({
-                    logLevel: logLevel ?? window.remotion_logLevel,
-                    tag: '@remotion/media',
-                }, `Network error fetching ${src}, falling back to <Html5Audio>`);
-                setReplaceWithHtml5Audio(true);
-                return;
-            }
-            const { audio, durationInSeconds: assetDurationInSeconds } = result;
-            const volumePropsFrame = frameForVolumeProp({
-                behavior: loopVolumeCurveBehavior ?? 'repeat',
-                loop: loop ?? false,
-                assetDurationInSeconds: assetDurationInSeconds ?? 0,
-                fps,
-                frame,
-                startsAt,
-            });
-            const volume = Internals.evaluateVolume({
-                volume: volumeProp,
-                frame: volumePropsFrame,
-                mediaVolume: 1,
-            });
-            Internals.warnAboutTooHighVolume(volume);
-            if (audio && volume > 0) {
-                applyVolume(audio.data, volume);
-                registerRenderAsset({
-                    type: 'inline-audio',
-                    id,
-                    audio: environment.isClientSideRendering
-                        ? audio.data
-                        : Array.from(audio.data),
-                    frame: absoluteFrame,
-                    timestamp: audio.timestamp,
-                    duration: (audio.numberOfFrames / TARGET_SAMPLE_RATE) * 1000000,
-                    toneFrequency: toneFrequency ?? 1,
-                });
-            }
-            continueRender(newHandle);
-        })
-            .catch((error) => {
-            cancelRender(error);
-        });
-        return () => {
-            continueRender(newHandle);
-            unregisterRenderAsset(id);
-        };
-    }, [
-        absoluteFrame,
-        continueRender,
-        delayRender,
-        delayRenderRetries,
-        delayRenderTimeoutInMilliseconds,
-        disallowFallbackToHtml5Audio,
-        environment.isClientSideRendering,
-        fps,
-        frame,
-        id,
-        logLevel,
-        loop,
-        loopVolumeCurveBehavior,
-        muted,
-        playbackRate,
-        registerRenderAsset,
-        src,
-        startsAt,
-        unregisterRenderAsset,
-        volumeProp,
-        audioStreamIndex,
-        toneFrequency,
-        trimAfter,
-        trimBefore,
-        replaceWithHtml5Audio,
-        maxCacheSize,
-        audioEnabled,
-    ]);
-    if (replaceWithHtml5Audio) {
-        return (_jsx(Html5Audio, { src: src, playbackRate: playbackRate, muted: muted, loop: loop, volume: volumeProp, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, style: style, loopVolumeCurveBehavior: loopVolumeCurveBehavior, audioStreamIndex: audioStreamIndex, useWebAudioApi: fallbackHtml5AudioProps?.useWebAudioApi, onError: fallbackHtml5AudioProps?.onError, toneFrequency: toneFrequency, acceptableTimeShiftInSeconds: fallbackHtml5AudioProps?.acceptableTimeShiftInSeconds, name: name, showInTimeline: showInTimeline }));
-    }
-    return null;
-};