@remotion/media 4.0.356 → 4.0.358

package/dist/audio/audio-for-preview.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { LogLevel, LoopVolumeCurveBehavior, VolumeProp } from 'remotion';
+import type { FallbackHtml5AudioProps } from './props';
+type InnerAudioProps = {
+    readonly loop?: boolean;
+    readonly src: string;
+    readonly logLevel?: LogLevel;
+    readonly muted?: boolean;
+    readonly name?: string | undefined;
+    readonly volume?: VolumeProp;
+    readonly loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
+    readonly playbackRate?: number;
+    readonly _remotionInternalNativeLoopPassed?: boolean;
+    readonly _remotionInternalStack?: string | null;
+    readonly shouldPreMountAudioTags?: boolean;
+    readonly onNativeError?: React.ReactEventHandler<HTMLAudioElement>;
+    readonly onDuration?: (src: string, durationInSeconds: number) => void;
+    readonly pauseWhenBuffering?: boolean;
+    readonly _remotionInternalNeedsDurationCalculation?: boolean;
+    readonly showInTimeline?: boolean;
+    readonly trimAfter?: number | undefined;
+    readonly trimBefore?: number | undefined;
+    readonly stack: string | null;
+    readonly disallowFallbackToHtml5Audio?: boolean;
+    readonly toneFrequency?: number;
+    readonly audioStreamIndex?: number;
+    readonly fallbackHtml5AudioProps?: FallbackHtml5AudioProps;
+};
+export declare const AudioForPreview: React.FC<InnerAudioProps>;
+export {};

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

@@ -0,0 +1,229 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Internals, Audio as RemotionAudio, useBufferState, useCurrentFrame, } from 'remotion';
+import { useLoopDisplay } from '../show-in-timeline';
+import { useMediaInTimeline } from '../use-media-in-timeline';
+import { MediaPlayer } from '../video/media-player';
+const { useUnsafeVideoConfig, Timeline, SharedAudioContext, useMediaMutedState, useMediaVolumeState, useFrameForVolumeProp, evaluateVolume, warnAboutTooHighVolume, usePreload, SequenceContext, } = Internals;
+const NewAudioForPreview = ({ 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 [mediaPlayerReady, setMediaPlayerReady] = useState(false);
+    const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState(false);
+    const [playing] = Timeline.usePlayingState();
+    const timelineContext = useContext(Timeline.TimelineContext);
+    const globalPlaybackRate = timelineContext.playbackRate;
+    const sharedAudioContext = useContext(SharedAudioContext);
+    const buffer = useBufferState();
+    const delayHandleRef = useRef(null);
+    const [mediaMuted] = useMediaMutedState();
+    const [mediaVolume] = useMediaVolumeState();
+    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 loopDisplay = useLoopDisplay({
+        loop,
+        mediaDurationInSeconds: videoConfig.durationInFrames,
+        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,
+    });
+    useEffect(() => {
+        if (!sharedAudioContext)
+            return;
+        if (!sharedAudioContext.audioContext)
+            return;
+        try {
+            const player = new MediaPlayer({
+                src: preloadedSrc,
+                logLevel,
+                sharedAudioContext: sharedAudioContext.audioContext,
+                loop,
+                trimAfter,
+                trimBefore,
+                fps: videoConfig.fps,
+                canvas: null,
+                playbackRate,
+                audioStreamIndex: audioStreamIndex ?? 0,
+            });
+            mediaPlayerRef.current = player;
+            player
+                .initialize(currentTimeRef.current)
+                .then((result) => {
+                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);
+                    Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewAudioForPreview] MediaPlayer initialized successfully`);
+                }
+            })
+                .catch((error) => {
+                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewAudioForPreview] Failed to initialize MediaPlayer', error);
+                setShouldFallbackToNativeAudio(true);
+            });
+        }
+        catch (error) {
+            Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewAudioForPreview] MediaPlayer initialization failed', error);
+            setShouldFallbackToNativeAudio(true);
+        }
+        return () => {
+            if (delayHandleRef.current) {
+                delayHandleRef.current.unblock();
+                delayHandleRef.current = null;
+            }
+            if (mediaPlayerRef.current) {
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewAudioForPreview] Disposing MediaPlayer`);
+                mediaPlayerRef.current.dispose();
+                mediaPlayerRef.current = null;
+            }
+            setMediaPlayerReady(false);
+            setShouldFallbackToNativeAudio(false);
+        };
+    }, [
+        preloadedSrc,
+        logLevel,
+        sharedAudioContext,
+        currentTimeRef,
+        loop,
+        trimAfter,
+        trimBefore,
+        playbackRate,
+        videoConfig.fps,
+        audioStreamIndex,
+        disallowFallbackToHtml5Audio,
+    ]);
+    useEffect(() => {
+        const audioPlayer = mediaPlayerRef.current;
+        if (!audioPlayer)
+            return;
+        if (playing) {
+            audioPlayer.play().catch((error) => {
+                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewAudioForPreview] Failed to play', error);
+            });
+        }
+        else {
+            audioPlayer.pause();
+        }
+    }, [playing, logLevel, mediaPlayerReady]);
+    useEffect(() => {
+        const audioPlayer = mediaPlayerRef.current;
+        if (!audioPlayer || !mediaPlayerReady)
+            return;
+        audioPlayer.seekTo(currentTime);
+        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewAudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+    }, [currentTime, logLevel, mediaPlayerReady]);
+    useEffect(() => {
+        const audioPlayer = mediaPlayerRef.current;
+        if (!audioPlayer || !mediaPlayerReady)
+            return;
+        audioPlayer.onBufferingChange((newBufferingState) => {
+            if (newBufferingState && !delayHandleRef.current) {
+                delayHandleRef.current = buffer.delayPlayback();
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, '[NewAudioForPreview] MediaPlayer buffering - blocking Remotion playback');
+            }
+            else if (!newBufferingState && delayHandleRef.current) {
+                delayHandleRef.current.unblock();
+                delayHandleRef.current = null;
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, '[NewAudioForPreview] MediaPlayer unbuffering - unblocking Remotion playback');
+            }
+        });
+    }, [mediaPlayerReady, buffer, logLevel]);
+    const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
+    useEffect(() => {
+        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]);
+    const effectivePlaybackRate = useMemo(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
+    useEffect(() => {
+        const audioPlayer = mediaPlayerRef.current;
+        if (!audioPlayer || !mediaPlayerReady) {
+            return;
+        }
+        audioPlayer.setPlaybackRate(effectivePlaybackRate);
+    }, [effectivePlaybackRate, mediaPlayerReady]);
+    useEffect(() => {
+        const audioPlayer = mediaPlayerRef.current;
+        if (!audioPlayer || !mediaPlayerReady) {
+            return;
+        }
+        audioPlayer.setFps(videoConfig.fps);
+    }, [videoConfig.fps, 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, ...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);
+    return (_jsx(NewAudioForPreview, { audioStreamIndex: audioStreamIndex ?? 0, src: preloadedSrc, playbackRate: playbackRate ?? 1, logLevel: logLevel ?? window.remotion_logLevel, 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,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useLayoutEffect, useState } from 'react';
-import { Audio, cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+import { useContext, useLayoutEffect, useMemo, useState } from 'react';
+import { cancelRender, Html5Audio, Internals, random, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
 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, loop, fallbackHtml5AudioProps, audioStreamIndex, showInTimeline, style, name, disallowFallbackToHtml5Audio, }) => {
+export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, logLevel = window.remotion_logLevel, 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();
-    const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
     if (!videoConfig) {
         throw new Error('No video config found');
     }
@@ -21,10 +21,21 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
     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-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+        src,
+        sequenceContext?.cumulatedFrom,
+        sequenceContext?.relativeFrom,
+        sequenceContext?.durationInFrames,
+    ]);
     useLayoutEffect(() => {
-        const actualFps = playbackRate ? fps / playbackRate : fps;
-        const timestamp = frame / actualFps;
-        const durationInSeconds = 1 / actualFps;
+        const timestamp = frame / fps;
+        const durationInSeconds = 1 / fps;
+        if (replaceWithHtml5Audio) {
+            return;
+        }
         const newHandle = delayRender(`Extracting audio for frame ${frame}`, {
             retries: delayRenderRetries ?? undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
@@ -43,35 +54,38 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
             timeInSeconds: timestamp,
             durationInSeconds,
             playbackRate: playbackRate ?? 1,
-            logLevel: logLevel ?? 'info',
+            logLevel,
             includeAudio: shouldRenderAudio,
             includeVideo: false,
             isClientSideRendering: environment.isClientSideRendering,
             loop: loop ?? false,
             audioStreamIndex: audioStreamIndex ?? 0,
+            trimAfter,
+            trimBefore,
+            fps,
         })
             .then((result) => {
-            if (result === 'unknown-container-format') {
+            if (result.type === 'unknown-container-format') {
                 if (disallowFallbackToHtml5Audio) {
                     cancelRender(new Error(`Unknown container format ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
                 }
-                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Audio>`);
+                Internals.Log.warn({ 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 === 'cannot-decode') {
+            if (result.type === 'cannot-decode') {
                 if (disallowFallbackToHtml5Audio) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
                 }
-                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${src}, falling back to <Audio>`);
+                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${src}, falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }
-            if (result === 'network-error') {
+            if (result.type === 'network-error') {
                 if (disallowFallbackToHtml5Audio) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
                 }
-                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${src}, falling back to <Audio>`);
+                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${src}, falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }
@@ -96,11 +110,10 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
                     type: 'inline-audio',
                     id,
                     audio: Array.from(audio.data),
-                    sampleRate: audio.sampleRate,
-                    numberOfChannels: audio.numberOfChannels,
                     frame: absoluteFrame,
                     timestamp: audio.timestamp,
-                    duration: (audio.numberOfFrames / audio.sampleRate) * 1000000,
+                    duration: (audio.numberOfFrames / TARGET_SAMPLE_RATE) * 1000000,
+                    toneFrequency: toneFrequency ?? 1,
                 });
             }
             continueRender(newHandle);
@@ -134,10 +147,13 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
         unregisterRenderAsset,
         volumeProp,
         audioStreamIndex,
+        toneFrequency,
+        trimAfter,
+        trimBefore,
+        replaceWithHtml5Audio,
     ]);
     if (replaceWithHtml5Audio) {
-        // TODO: Loop and other props
-        return (_jsx(Audio, { 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: fallbackHtml5AudioProps?.toneFrequency, acceptableTimeShiftInSeconds: fallbackHtml5AudioProps?.acceptableTimeShiftInSeconds, name: name, showInTimeline: showInTimeline }));
+        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;
 };

package/dist/audio/audio.js

@@ -1,63 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useContext } from 'react';
-import { cancelRender, Internals, Sequence, useRemotionEnvironment, } from 'remotion';
-import { SharedAudioContext } from '../../../core/src/audio/shared-audio-tags';
+import { Internals, useRemotionEnvironment } from 'remotion';
+import { AudioForPreview } from './audio-for-preview';
 import { AudioForRendering } from './audio-for-rendering';
-const { validateMediaTrimProps, resolveTrimProps, validateMediaProps, AudioForPreview, } = Internals;
-// dummy function for now because onError is not supported
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const onRemotionError = (_e) => { };
+const { validateMediaProps } = Internals;
 export const Audio = (props) => {
-    const audioContext = useContext(SharedAudioContext);
     // Should only destruct `trimBefore` and `trimAfter` from props,
     // rest gets drilled down
-    const { trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, loop, ...otherProps } = props;
+    const { name, stack, showInTimeline, ...otherProps } = props;
     const environment = useRemotionEnvironment();
-    const onDuration = useCallback(() => undefined, []);
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
     }
-    validateMediaTrimProps({
-        startFrom: undefined,
-        endAt: undefined,
-        trimBefore,
-        trimAfter,
-    });
-    const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
-        startFrom: undefined,
-        endAt: undefined,
-        trimBefore,
-        trimAfter,
-    });
-    const onError = 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: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
-        if (loop) {
-            if (onRemotionError) {
-                onRemotionError(new Error(errMessage));
-                return;
-            }
-            cancelRender(new Error(errMessage));
-        }
-        else {
-            onRemotionError?.(new Error(errMessage));
-            // eslint-disable-next-line no-console
-            console.warn(errMessage);
-        }
-    }, [loop]);
-    if (typeof trimBeforeValue !== 'undefined' ||
-        typeof trimAfterValue !== 'undefined') {
-        return (_jsx(Sequence, { layout: "none", from: 0 - (trimBeforeValue ?? 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: _jsx(Audio, { pauseWhenBuffering: pauseWhenBuffering ?? false, ...otherProps }) }));
-    }
     validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, 'Audio');
     if (environment.isRendering) {
         return _jsx(AudioForRendering, { ...otherProps });
     }
-    const { delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
-    return (_jsx(AudioForPreview, { _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false, _remotionInternalStack: stack ?? null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...propsForPreview, onNativeError: onError, onDuration: onDuration, 
-        // Proposal: Make this default to true in v5
-        pauseWhenBuffering: pauseWhenBuffering ?? false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline ?? true }));
+    return _jsx(AudioForPreview, { name: name, ...otherProps, stack: stack ?? null });
 };
+// TODO: Doesn't work
+Internals.addSequenceStackTraces(Audio);

package/dist/audio/props.d.ts

@@ -1,10 +1,9 @@
 import type { LogLevel, LoopVolumeCurveBehavior, VolumeProp } from 'remotion';
 export type FallbackHtml5AudioProps = {
-    offthreadAudioProps: {
-        playbackRate?: number;
-        muted?: boolean;
-        loop?: boolean;
-    };
+    onError?: (err: Error) => void;
+    useWebAudioApi?: boolean;
+    acceptableTimeShiftInSeconds?: number;
+    pauseWhenBuffering?: boolean;
 };
 export type AudioProps = {
     src: string;
@@ -13,12 +12,9 @@ export type AudioProps = {
     volume?: VolumeProp;
     loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
     name?: string;
-    pauseWhenBuffering?: boolean;
     showInTimeline?: boolean;
     playbackRate?: number;
     muted?: boolean;
-    delayRenderRetries?: number;
-    delayRenderTimeoutInMilliseconds?: number;
     style?: React.CSSProperties;
     /**
      * @deprecated For internal use only
@@ -28,11 +24,9 @@ export type AudioProps = {
     loop?: boolean;
     audioStreamIndex?: number;
     _remotionInternalNativeLoopPassed?: boolean;
-    fallbackHtml5AudioProps?: {
-        onError?: (err: Error) => void;
-        useWebAudioApi?: boolean;
-        toneFrequency?: number;
-        acceptableTimeShiftInSeconds?: number;
-    };
+    fallbackHtml5AudioProps?: FallbackHtml5AudioProps;
     disallowFallbackToHtml5Audio?: boolean;
+    toneFrequency?: number;
+    delayRenderRetries?: number;
+    delayRenderTimeoutInMilliseconds?: number;
 };

package/dist/audio-extraction/audio-cache.d.ts

@@ -5,7 +5,7 @@ export declare const makeAudioCache: () => {
     deleteAll: () => void;
     getSamples: (timestamp: number, durationInSeconds: number) => AudioSample[];
     getOldestTimestamp: () => number;
-    getNewestTimestamp: () => number;
+    getNewestTimestamp: () => number | null;
     getOpenTimestamps: () => number[];
 };
 export type AudioCache = ReturnType<typeof makeAudioCache>;

package/dist/audio-extraction/audio-cache.js

@@ -6,7 +6,7 @@ export const makeAudioCache = () => {
         samples[sample.timestamp] = sample;
     };
     const clearBeforeThreshold = (threshold) => {
-        for (const timestamp of timestamps) {
+        for (const timestamp of timestamps.slice()) {
             const endTimestamp = timestamp + samples[timestamp].duration;
             if (endTimestamp < threshold) {
                 const isLast = timestamp === timestamps[timestamps.length - 1];
@@ -21,6 +21,7 @@ export const makeAudioCache = () => {
     };
     const deleteAll = () => {
         for (const timestamp of timestamps) {
+            samples[timestamp].close();
             delete samples[timestamp];
         }
         timestamps.length = 0;
@@ -47,6 +48,9 @@ export const makeAudioCache = () => {
         return timestamps[0];
     };
     const getNewestTimestamp = () => {
+        if (timestamps.length === 0) {
+            return null;
+        }
         const sample = samples[timestamps[timestamps.length - 1]];
         return sample.timestamp + sample.duration;
     };

package/dist/audio-extraction/audio-iterator.d.ts

@@ -19,7 +19,10 @@ export declare const makeAudioIterator: ({ audioSampleSink, isMatroska, startTim
         size: number;
     };
     getLastUsed: () => number;
-    prepareForDeletion: () => Promise<void>;
+    prepareForDeletion: () => void;
     startTimestamp: number;
+    clearBeforeThreshold: (threshold: number) => void;
+    getOldestTimestamp: () => number;
+    getNewestTimestamp: () => number | null;
 };
 export type AudioSampleIterator = ReturnType<typeof makeAudioIterator>;

package/dist/audio-extraction/audio-iterator.js

@@ -30,7 +30,7 @@ export const makeAudioIterator = ({ audioSampleSink, isMatroska, startTimestamp,
         lastUsed = Date.now();
         const { value: sample, done } = await sampleIterator.next();
         if (done) {
-            fullDuration = cache.getNewestTimestamp() ?? null;
+            fullDuration = cache.getNewestTimestamp();
             return null;
         }
         const realTimestamp = actualMatroskaTimestamps.getRealTimestamp(sample.timestamp);
@@ -51,6 +51,12 @@ export const makeAudioIterator = ({ audioSampleSink, isMatroska, startTimestamp,
             return [];
         }
         const samples = cache.getSamples(timestamp, durationInSeconds);
+        const newestTimestamp = cache.getNewestTimestamp();
+        if (newestTimestamp !== null) {
+            if (newestTimestamp >= timestamp + durationInSeconds - 0.0000000001) {
+                return samples;
+            }
+        }
         while (true) {
             const sample = await getNextSample();
             // Clear all samples before the timestamp
@@ -73,10 +79,12 @@ export const makeAudioIterator = ({ audioSampleSink, isMatroska, startTimestamp,
         return samples;
     };
     const logOpenFrames = () => {
-        Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, 'Open audio samples for src', src, cache
-            .getOpenTimestamps()
-            .map((t) => t.toFixed(3))
-            .join(', '));
+        const openTimestamps = cache.getOpenTimestamps();
+        if (openTimestamps.length > 0) {
+            const first = openTimestamps[0];
+            const last = openTimestamps[openTimestamps.length - 1];
+            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, 'Open audio samples for src', src, `${first.toFixed(3)}...${last.toFixed(3)}`);
+        }
     };
     const getCacheStats = () => {
         return {
@@ -91,12 +99,13 @@ export const makeAudioIterator = ({ audioSampleSink, isMatroska, startTimestamp,
         }
         return (oldestTimestamp < timestamp && Math.abs(oldestTimestamp - timestamp) < 10);
     };
-    const prepareForDeletion = async () => {
+    const prepareForDeletion = () => {
         cache.deleteAll();
-        const { value } = await sampleIterator.return();
-        if (value) {
-            value.close();
-        }
+        sampleIterator.return().then((value) => {
+            if (value.value) {
+                value.value.close();
+            }
+        });
         fullDuration = null;
     };
     let op = Promise.resolve([]);
@@ -116,5 +125,8 @@ export const makeAudioIterator = ({ audioSampleSink, isMatroska, startTimestamp,
         getLastUsed: () => lastUsed,
         prepareForDeletion,
         startTimestamp,
+        clearBeforeThreshold: cache.clearBeforeThreshold,
+        getOldestTimestamp: cache.getOldestTimestamp,
+        getNewestTimestamp: cache.getNewestTimestamp,
     };
 };