@remotion/media 4.0.355 → 4.0.357

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,213 @@
+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 { MediaPlayer } from '../video/media-player';
+const { useUnsafeVideoConfig, Timeline, SharedAudioContext, useMediaMutedState, useMediaVolumeState, useFrameForVolumeProp, evaluateVolume, warnAboutTooHighVolume, usePreload, useMediaInTimeline, 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 [timelineId] = useState(() => String(Math.random()));
+    const parentSequence = useContext(SequenceContext);
+    useMediaInTimeline({
+        volume,
+        mediaVolume,
+        mediaType: 'audio',
+        src,
+        playbackRate,
+        displayName: name ?? null,
+        id: timelineId,
+        stack,
+        showInTimeline,
+        premountDisplay: parentSequence?.premountDisplay ?? null,
+        postmountDisplay: parentSequence?.postmountDisplay ?? null,
+    });
+    useEffect(() => {
+        if (!sharedAudioContext)
+            return;
+        if (!sharedAudioContext.audioContext)
+            return;
+        try {
+            const player = new MediaPlayer({
+                src: preloadedSrc,
+                logLevel,
+                sharedAudioContext: sharedAudioContext.audioContext,
+                loop,
+                trimAfterSeconds: trimAfter ? trimAfter / videoConfig.fps : undefined,
+                trimBeforeSeconds: trimBefore
+                    ? trimBefore / videoConfig.fps
+                    : undefined,
+                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 <Audio>`);
+                    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 <Audio>`);
+                    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 <Audio>`);
+                    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 <Audio>`);
+                    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, logLevel]);
+    const effectivePlaybackRate = useMemo(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
+    useEffect(() => {
+        const audioPlayer = mediaPlayerRef.current;
+        if (!audioPlayer || !mediaPlayerReady) {
+            return;
+        }
+        audioPlayer.setPlaybackRate(effectivePlaybackRate);
+    }, [effectivePlaybackRate, mediaPlayerReady, logLevel]);
+    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,16 +1,17 @@
-import { useContext, useLayoutEffect, useState } from 'react';
-import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useLayoutEffect, useMemo, useState } from 'react';
+import { Audio, cancelRender, 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, }) => {
+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');
     }
@@ -19,10 +20,22 @@ 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,
@@ -41,13 +54,42 @@ 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(({ audio, durationInSeconds: assetDurationInSeconds }) => {
+            .then((result) => {
+            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>`);
+                setReplaceWithHtml5Audio(true);
+                return;
+            }
+            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>`);
+                setReplaceWithHtml5Audio(true);
+                return;
+            }
+            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>`);
+                setReplaceWithHtml5Audio(true);
+                return;
+            }
+            const { audio, durationInSeconds: assetDurationInSeconds } = result;
             const volumePropsFrame = frameForVolumeProp({
                 behavior: loopVolumeCurveBehavior ?? 'repeat',
                 loop: loop ?? false,
@@ -68,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);
@@ -90,6 +131,7 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
         delayRender,
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,
+        disallowFallbackToHtml5Audio,
         environment.isClientSideRendering,
         fps,
         frame,
@@ -104,6 +146,15 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
         startsAt,
         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: 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(props, 'Video');
+    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,4 +1,10 @@
 import type { LogLevel, LoopVolumeCurveBehavior, VolumeProp } from 'remotion';
+export type FallbackHtml5AudioProps = {
+    onError?: (err: Error) => void;
+    useWebAudioApi?: boolean;
+    acceptableTimeShiftInSeconds?: number;
+    pauseWhenBuffering?: boolean;
+};
 export type AudioProps = {
     src: string;
     trimBefore?: number;
@@ -6,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
@@ -19,5 +22,11 @@ export type AudioProps = {
     stack?: string;
     logLevel?: LogLevel;
     loop?: boolean;
+    audioStreamIndex?: number;
     _remotionInternalNativeLoopPassed?: boolean;
+    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

@@ -1,24 +1,28 @@
 import type { AudioSample, AudioSampleSink } from 'mediabunny';
 import { type LogLevel } from 'remotion';
 import type { RememberActualMatroskaTimestamps } from '../video-extraction/remember-actual-matroska-timestamps';
-export declare const makeAudioIterator: ({ audioSampleSink, isMatroska, startTimestamp, src, actualMatroskaTimestamps, }: {
+export declare const makeAudioIterator: ({ audioSampleSink, isMatroska, startTimestamp, src, actualMatroskaTimestamps, logLevel, }: {
     audioSampleSink: AudioSampleSink;
     isMatroska: boolean;
     startTimestamp: number;
     src: string;
     actualMatroskaTimestamps: RememberActualMatroskaTimestamps;
+    logLevel: LogLevel;
 }) => {
     src: string;
     getSamples: (ts: number, dur: number) => Promise<AudioSample[]>;
     waitForCompletion: () => Promise<boolean>;
     canSatisfyRequestedTime: (timestamp: number) => boolean;
-    logOpenFrames: (logLevel: LogLevel) => void;
+    logOpenFrames: () => void;
     getCacheStats: () => {
         count: number;
         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

@@ -7,11 +7,22 @@ import { makeAudioCache } from './audio-cache';
 // The worst case seems to be FLAC files with a 65'535 sample window, which would be 1486.0ms at 44.1Khz.
 // So let's set a threshold of 1.5 seconds.
 const extraThreshold = 1.5;
-export const makeAudioIterator = ({ audioSampleSink, isMatroska, startTimestamp, src, actualMatroskaTimestamps, }) => {
+const warned = {};
+const warnAboutMatroskaOnce = (src, logLevel) => {
+    if (warned[src]) {
+        return;
+    }
+    warned[src] = true;
+    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Audio from ${src} will need to be read from the beginning. https://www.remotion.dev/docs/media/support#matroska-limitation`);
+};
+export const makeAudioIterator = ({ audioSampleSink, isMatroska, startTimestamp, src, actualMatroskaTimestamps, logLevel, }) => {
     // Matroska timestamps are not accurate unless we start from the beginning
     // So for matroska, we need to decode all samples :(
     // https://github.com/Vanilagy/mediabunny/issues/105
     const sampleIterator = audioSampleSink.samples(isMatroska ? 0 : Math.max(0, startTimestamp - extraThreshold));
+    if (isMatroska) {
+        warnAboutMatroskaOnce(src, logLevel);
+    }
     let fullDuration = null;
     const cache = makeAudioCache();
     let lastUsed = Date.now();
@@ -19,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);
@@ -40,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
@@ -61,11 +78,13 @@ export const makeAudioIterator = ({ audioSampleSink, isMatroska, startTimestamp,
         }
         return samples;
     };
-    const logOpenFrames = (logLevel) => {
-        Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, 'Open audio samples for src', src, cache
-            .getOpenTimestamps()
-            .map((t) => t.toFixed(3))
-            .join(', '));
+    const logOpenFrames = () => {
+        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 {
@@ -80,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([]);
@@ -105,5 +125,8 @@ export const makeAudioIterator = ({ audioSampleSink, isMatroska, startTimestamp,
         getLastUsed: () => lastUsed,
         prepareForDeletion,
         startTimestamp,
+        clearBeforeThreshold: cache.clearBeforeThreshold,
+        getOldestTimestamp: cache.getOldestTimestamp,
+        getNewestTimestamp: cache.getNewestTimestamp,
     };
 };