@remotion/media 4.0.390 → 4.0.392

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

@@ -69,6 +69,7 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
         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);
@@ -96,6 +97,7 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
                 isPremounting: initialIsPremounting.current,
                 globalPlaybackRate: initialGlobalPlaybackRate.current,
                 onVideoFrameCallback: null,
+                playing: initialPlaying.current,
             });
             mediaPlayerRef.current = player;
             player

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

@@ -1,4 +1,5 @@
-import type { AudioBufferSink, WrappedAudioBuffer } from 'mediabunny';
+import type { WrappedAudioBuffer } from 'mediabunny';
+import type { PrewarmedAudioIteratorCache } from '../prewarm-iterator-for-looping';
 import { type AllowWait } from './allow-wait';
 export declare const HEALTHY_BUFFER_THRESHOLD_SECONDS = 1;
 export type QueuedNode = {
@@ -6,7 +7,7 @@ export type QueuedNode = {
     timestamp: number;
     buffer: AudioBuffer;
 };
-export declare const makeAudioIterator: (audioSink: AudioBufferSink, startFromSecond: number) => {
+export declare const makeAudioIterator: (startFromSecond: number, cache: PrewarmedAudioIteratorCache) => {
     destroy: () => void;
     getNext: () => Promise<IteratorResult<WrappedAudioBuffer, void>>;
     isDestroyed: () => boolean;

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

@@ -1,9 +1,9 @@
 import { roundTo4Digits } from '../helpers/round-to-4-digits';
 import { allowWaitRoutine } from './allow-wait';
 export const HEALTHY_BUFFER_THRESHOLD_SECONDS = 1;
-export const makeAudioIterator = (audioSink, startFromSecond) => {
+export const makeAudioIterator = (startFromSecond, cache) => {
     let destroyed = false;
-    const iterator = audioSink.buffers(startFromSecond);
+    const iterator = cache.makeIteratorOrUsePrewarmed(startFromSecond);
     const queuedAudioNodes = [];
     const audioChunksForAfterResuming = [];
     let mostRecentTimestamp = -Infinity;

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

@@ -0,0 +1,3 @@
+import type React from 'react';
+import type { AudioProps } from './props';
+export declare const AudioForRendering: React.FC<AudioProps>;

package/dist/audio-for-rendering.js

@@ -0,0 +1,94 @@
+import { useContext, useLayoutEffect, useMemo, useState } from 'react';
+import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+import { extractFrameViaBroadcastChannel } from './extract-frame-via-broadcast-channel';
+export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, logLevel = window.remotion_logLevel, }) => {
+    const absoluteFrame = Internals.useTimelinePosition();
+    const videoConfig = Internals.useUnsafeVideoConfig();
+    const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
+    const frame = useCurrentFrame();
+    const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
+    const environment = useRemotionEnvironment();
+    const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
+    if (!src) {
+        throw new TypeError('No `src` was passed to <Video>.');
+    }
+    const volume = Internals.evaluateVolume({
+        volume: volumeProp,
+        frame: volumePropsFrame,
+        mediaVolume: 1,
+    });
+    Internals.warnAboutTooHighVolume(volume);
+    const shouldRenderAudio = useMemo(() => {
+        if (!window.remotion_audioEnabled) {
+            return false;
+        }
+        if (muted) {
+            return false;
+        }
+        if (volume <= 0) {
+            return false;
+        }
+        return true;
+    }, [muted, volume]);
+    const { fps } = videoConfig;
+    const { delayRender, continueRender } = useDelayRender();
+    useLayoutEffect(() => {
+        const actualFps = playbackRate ? fps / playbackRate : fps;
+        const timestamp = frame / actualFps;
+        const durationInSeconds = 1 / actualFps;
+        const newHandle = delayRender(`Extracting frame number ${frame}`, {
+            retries: delayRenderRetries ?? undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
+        });
+        extractFrameViaBroadcastChannel({
+            src,
+            timeInSeconds: timestamp,
+            durationInSeconds,
+            logLevel: logLevel ?? 'info',
+            shouldRenderAudio,
+            isClientSideRendering: environment.isClientSideRendering,
+        })
+            .then(({ audio }) => {
+            if (audio) {
+                registerRenderAsset({
+                    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,
+                });
+            }
+            continueRender(newHandle);
+        })
+            .catch((error) => {
+            cancelRender(error);
+        });
+        return () => {
+            continueRender(newHandle);
+            unregisterRenderAsset(id);
+        };
+    }, [
+        absoluteFrame,
+        continueRender,
+        delayRender,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        environment.isClientSideRendering,
+        fps,
+        frame,
+        id,
+        logLevel,
+        playbackRate,
+        registerRenderAsset,
+        shouldRenderAudio,
+        src,
+        unregisterRenderAsset,
+    ]);
+    return null;
+};

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

@@ -1,12 +1,16 @@
 import type { InputAudioTrack, WrappedAudioBuffer } from 'mediabunny';
 import type { useBufferState } from 'remotion';
 import type { Nonce } from './nonce-manager';
-export declare const audioIteratorManager: ({ audioTrack, delayPlaybackHandleIfNotPremounting, sharedAudioContext, }: {
+export declare const audioIteratorManager: ({ audioTrack, delayPlaybackHandleIfNotPremounting, sharedAudioContext, getIsLooping, getEndTime, getStartTime, updatePlaybackTime, }: {
     audioTrack: InputAudioTrack;
     delayPlaybackHandleIfNotPremounting: () => {
         unblock: () => void;
     };
     sharedAudioContext: AudioContext;
+    getIsLooping: () => boolean;
+    getEndTime: () => number;
+    getStartTime: () => number;
+    updatePlaybackTime: (time: number) => void;
 }) => {
     startAudioIterator: ({ nonce, playbackRate, startFromSecond, getIsPlaying, scheduleAudioNode, }: {
         startFromSecond: number;

package/dist/audio-iterator-manager.js

@@ -1,13 +1,16 @@
 import { AudioBufferSink, InputDisposedError } from 'mediabunny';
 import { isAlreadyQueued, makeAudioIterator, } from './audio/audio-preview-iterator';
-export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremounting, sharedAudioContext, }) => {
+import { makePrewarmedAudioIteratorCache } from './prewarm-iterator-for-looping';
+export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremounting, sharedAudioContext, getIsLooping, getEndTime, getStartTime, updatePlaybackTime, }) => {
     let muted = false;
     let currentVolume = 1;
     const gainNode = sharedAudioContext.createGain();
     gainNode.connect(sharedAudioContext.destination);
     const audioSink = new AudioBufferSink(audioTrack);
+    const prewarmedAudioIteratorCache = makePrewarmedAudioIteratorCache(audioSink);
     let audioBufferIterator = null;
     let audioIteratorsCreated = 0;
+    let currentDelayHandle = null;
     const scheduleAudioChunk = ({ buffer, mediaTimestamp, playbackRate, scheduleAudioNode, }) => {
         if (!audioBufferIterator) {
             throw new Error('Audio buffer iterator not found');
@@ -43,9 +46,11 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
         }
     };
     const startAudioIterator = async ({ nonce, playbackRate, startFromSecond, getIsPlaying, scheduleAudioNode, }) => {
+        updatePlaybackTime(startFromSecond);
         audioBufferIterator?.destroy();
         const delayHandle = delayPlaybackHandleIfNotPremounting();
-        const iterator = makeAudioIterator(audioSink, startFromSecond);
+        currentDelayHandle = delayHandle;
+        const iterator = makeAudioIterator(startFromSecond, prewarmedAudioIteratorCache);
         audioIteratorsCreated++;
         audioBufferIterator = iterator;
         try {
@@ -53,16 +58,13 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
             for (let i = 0; i < 3; i++) {
                 const result = await iterator.getNext();
                 if (iterator.isDestroyed()) {
-                    delayHandle.unblock();
                     return;
                 }
                 if (nonce.isStale()) {
-                    delayHandle.unblock();
                     return;
                 }
                 if (!result.value) {
                     // media ended
-                    delayHandle.unblock();
                     return;
                 }
                 onAudioChunk({
@@ -83,6 +85,7 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
         }
         finally {
             delayHandle.unblock();
+            currentDelayHandle = null;
         }
     };
     const pausePlayback = () => {
@@ -92,6 +95,14 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
         audioBufferIterator.moveQueuedChunksToPauseQueue();
     };
     const seek = async ({ newTime, nonce, fps, playbackRate, getIsPlaying, scheduleAudioNode, bufferState, }) => {
+        if (getIsLooping()) {
+            // If less than 1 second from the end away, we pre-warm a new iterator
+            if (getEndTime() - newTime < 1) {
+                prewarmedAudioIteratorCache.prewarmIteratorForLooping({
+                    timeToSeek: getStartTime(),
+                });
+            }
+        }
         if (!audioBufferIterator) {
             await startAudioIterator({
                 nonce,
@@ -194,8 +205,13 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
         pausePlayback,
         getAudioBufferIterator: () => audioBufferIterator,
         destroyIterator: () => {
+            prewarmedAudioIteratorCache.destroy();
             audioBufferIterator?.destroy();
             audioBufferIterator = null;
+            if (currentDelayHandle) {
+                currentDelayHandle.unblock();
+                currentDelayHandle = null;
+            }
         },
         seek,
         getAudioIteratorsCreated: () => audioIteratorsCreated,

package/dist/audio.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { AudioProps } from './props';
+export declare const Audio: React.FC<AudioProps>;

package/dist/audio.js

@@ -0,0 +1,60 @@
+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 { AudioForRendering } from './audio-for-rendering';
+const { validateMediaTrimProps, resolveTrimProps, validateMediaProps, AudioForPreview, } = 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, onError: onRemotionError, loop, ...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);
+        }
+    }, [onRemotionError, 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');
+    if (environment.isRendering) {
+        return _jsx(AudioForRendering, { ...otherProps });
+    }
+    const { onAutoPlayError, crossOrigin, 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 }));
+};

package/dist/audiodata-to-array.js

@@ -0,0 +1 @@
+"use strict";

package/dist/convert-audiodata/data-types.d.ts

@@ -0,0 +1 @@
+export declare const getDataTypeForAudioFormat: (format: AudioSampleFormat) => Float32ArrayConstructor | Int16ArrayConstructor | Uint8ArrayConstructor | Int32ArrayConstructor;

package/dist/convert-audiodata/data-types.js

@@ -0,0 +1,22 @@
+export const getDataTypeForAudioFormat = (format) => {
+    switch (format) {
+        case 'f32':
+            return Float32Array;
+        case 'f32-planar':
+            return Float32Array;
+        case 's16':
+            return Int16Array;
+        case 's16-planar':
+            return Int16Array;
+        case 'u8':
+            return Uint8Array;
+        case 'u8-planar':
+            return Uint8Array;
+        case 's32':
+            return Int32Array;
+        case 's32-planar':
+            return Int32Array;
+        default:
+            throw new Error(`Unsupported audio format: ${format}`);
+    }
+};

package/dist/convert-audiodata/is-planar-format.d.ts

@@ -0,0 +1 @@
+export declare const isPlanarFormat: (format: AudioSampleFormat) => boolean;

package/dist/convert-audiodata/is-planar-format.js

@@ -0,0 +1,3 @@
+export const isPlanarFormat = (format) => {
+    return format.includes('-planar');
+};

package/dist/convert-audiodata/log-audiodata.d.ts

@@ -0,0 +1 @@
+export declare const logAudioData: (audioData: AudioData) => string;

package/dist/convert-audiodata/log-audiodata.js

@@ -0,0 +1,8 @@
+export const logAudioData = (audioData) => {
+    const srcChannels = new Int16Array(audioData.numberOfFrames * audioData.numberOfChannels);
+    audioData.copyTo(srcChannels, {
+        planeIndex: 0,
+        format: 's16',
+    });
+    return srcChannels.slice(0, 10).join(',');
+};

package/dist/convert-audiodata/trim-audiodata.js

@@ -0,0 +1 @@
+"use strict";

package/dist/deserialized-audiodata.d.ts

@@ -0,0 +1,15 @@
+import type { DataType } from './convert-audiodata/data-types';
+export type SerializableAudioData = {
+    data: DataType[];
+    format: AudioSampleFormat;
+    numberOfChannels: number;
+    numberOfFrames: number;
+    sampleRate: number;
+};
+export declare const turnAudioDataIntoSerializableData: (audioData: AudioData) => {
+    data: (Float32Array<ArrayBuffer> | Int32Array<ArrayBuffer> | Int16Array<ArrayBuffer> | Uint8Array<ArrayBuffer>)[];
+    format: AudioSampleFormat;
+    numberOfChannels: number;
+    numberOfFrames: number;
+    sampleRate: number;
+};

package/dist/deserialized-audiodata.js

@@ -0,0 +1,26 @@
+import { getDataTypeForAudioFormat } from './convert-audiodata/data-types';
+import { isPlanarFormat } from './convert-audiodata/is-planar-format';
+export const turnAudioDataIntoSerializableData = (audioData) => {
+    if (!audioData.format) {
+        throw new Error('AudioData format is not set');
+    }
+    const DataType = getDataTypeForAudioFormat(audioData.format);
+    const isPlanar = isPlanarFormat(audioData.format);
+    const planes = isPlanar ? audioData.numberOfChannels : 1;
+    const srcChannels = new Array(planes)
+        .fill(true)
+        .map(() => new DataType((isPlanar ? 1 : audioData.numberOfChannels) *
+        audioData.numberOfFrames));
+    for (let i = 0; i < planes; i++) {
+        audioData.copyTo(srcChannels[i], {
+            planeIndex: i,
+        });
+    }
+    return {
+        data: srcChannels,
+        format: audioData.format,
+        numberOfChannels: audioData.numberOfChannels,
+        numberOfFrames: audioData.numberOfFrames,
+        sampleRate: audioData.sampleRate,
+    };
+};