@remotion/media 4.0.353 → 4.0.355

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

@@ -1,12 +1,14 @@
-import { useContext, useLayoutEffect, useMemo, useState } from 'react';
+import { useContext, useLayoutEffect, useState } from 'react';
 import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+import { applyVolume } from '../convert-audiodata/apply-volume';
+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, }) => {
+    const frame = useCurrentFrame();
     const absoluteFrame = Internals.useTimelinePosition();
     const videoConfig = Internals.useUnsafeVideoConfig();
     const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
-    const frame = useCurrentFrame();
-    const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
+    const startsAt = Internals.useMediaStartsAt();
     const environment = useRemotionEnvironment();
     const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
     if (!videoConfig) {
@@ -15,24 +17,6 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
     if (!src) {
         throw new TypeError('No `src` was passed to <Audio>.');
     }
-    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(() => {
@@ -43,19 +27,43 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
             retries: delayRenderRetries ?? undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
         });
+        const shouldRenderAudio = (() => {
+            if (!window.remotion_audioEnabled) {
+                return false;
+            }
+            if (muted) {
+                return false;
+            }
+            return true;
+        })();
         extractFrameViaBroadcastChannel({
             src,
             timeInSeconds: timestamp,
             durationInSeconds,
+            playbackRate: playbackRate ?? 1,
             logLevel: logLevel ?? 'info',
             includeAudio: shouldRenderAudio,
             includeVideo: false,
             isClientSideRendering: environment.isClientSideRendering,
-            volume,
             loop: loop ?? false,
         })
-            .then(({ audio }) => {
-            if (audio) {
+            .then(({ audio, durationInSeconds: assetDurationInSeconds }) => {
+            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,
@@ -87,13 +95,15 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
         frame,
         id,
         logLevel,
+        loop,
+        loopVolumeCurveBehavior,
+        muted,
         playbackRate,
         registerRenderAsset,
-        shouldRenderAudio,
         src,
+        startsAt,
         unregisterRenderAsset,
-        volume,
-        loop,
+        volumeProp,
     ]);
     return null;
 };

package/dist/audio/audio.js

@@ -4,11 +4,14 @@ import { cancelRender, Internals, Sequence, useRemotionEnvironment, } from 'remo
 import { SharedAudioContext } from '../../../core/src/audio/shared-audio-tags';
 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) => { };
 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 { trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, loop, ...otherProps } = props;
     const environment = useRemotionEnvironment();
     const onDuration = useCallback(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -44,7 +47,7 @@ export const Audio = (props) => {
             // eslint-disable-next-line no-console
             console.warn(errMessage);
         }
-    }, [onRemotionError, loop]);
+    }, [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 }) }));
@@ -53,7 +56,7 @@ export const Audio = (props) => {
     if (environment.isRendering) {
         return _jsx(AudioForRendering, { ...otherProps });
     }
-    const { onAutoPlayError, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = 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 }));

package/dist/audio/props.d.ts

@@ -8,16 +8,11 @@ export type AudioProps = {
     name?: string;
     pauseWhenBuffering?: boolean;
     showInTimeline?: boolean;
-    onAutoPlayError?: null | (() => void);
     playbackRate?: number;
     muted?: boolean;
     delayRenderRetries?: number;
     delayRenderTimeoutInMilliseconds?: number;
-    crossOrigin?: '' | 'anonymous' | 'use-credentials';
     style?: React.CSSProperties;
-    onError?: (err: Error) => void;
-    useWebAudioApi?: boolean;
-    acceptableTimeShiftInSeconds?: number;
     /**
      * @deprecated For internal use only
      */

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

@@ -1,10 +1,13 @@
 import { type LogLevel } from 'remotion';
 import type { PcmS16AudioData } from '../convert-audiodata/convert-audiodata';
-export declare const extractAudio: ({ src, timeInSeconds: unloopedTimeInSeconds, durationInSeconds, volume, logLevel, loop, }: {
+export declare const extractAudio: ({ src, timeInSeconds: unloopedTimeInSeconds, durationInSeconds, logLevel, loop, playbackRate, }: {
     src: string;
     timeInSeconds: number;
     durationInSeconds: number;
-    volume: number;
     logLevel: LogLevel;
     loop: boolean;
-}) => Promise<PcmS16AudioData | null>;
+    playbackRate: number;
+}) => Promise<{
+    data: PcmS16AudioData | null;
+    durationInSeconds: number | null;
+}>;

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

@@ -2,18 +2,18 @@ import { audioManager } from '../caches';
 import { combineAudioDataAndClosePrevious } from '../convert-audiodata/combine-audiodata';
 import { convertAudioData } from '../convert-audiodata/convert-audiodata';
 import { TARGET_NUMBER_OF_CHANNELS, TARGET_SAMPLE_RATE, } from '../convert-audiodata/resample-audiodata';
-import { sinkPromises } from '../video-extraction/extract-frame';
-import { getSinks } from '../video-extraction/get-frames-since-keyframe';
-export const extractAudio = async ({ src, timeInSeconds: unloopedTimeInSeconds, durationInSeconds, volume, logLevel, loop, }) => {
-    if (!sinkPromises[src]) {
-        sinkPromises[src] = getSinks(src);
+import { getSinkWeak } from '../get-sink-weak';
+export const extractAudio = async ({ src, timeInSeconds: unloopedTimeInSeconds, durationInSeconds, logLevel, loop, playbackRate, }) => {
+    const { audio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSinkWeak(src, logLevel);
+    let duration = null;
+    if (loop) {
+        duration = await getDuration();
     }
-    const { audio, actualMatroskaTimestamps, isMatroska, getDuration } = await sinkPromises[src];
     if (audio === null) {
-        return null;
+        return { data: null, durationInSeconds: null };
     }
     const timeInSeconds = loop
-        ? unloopedTimeInSeconds % (await getDuration())
+        ? unloopedTimeInSeconds % duration
         : unloopedTimeInSeconds;
     const sampleIterator = await audioManager.getIterator({
         src,
@@ -44,10 +44,15 @@ export const extractAudio = async ({ src, timeInSeconds: unloopedTimeInSeconds,
         // amount of samples to shave from start and end
         let trimStartInSeconds = 0;
         let trimEndInSeconds = 0;
-        // TODO: Apply playback rate
         // TODO: Apply tone frequency
         if (isFirstSample) {
             trimStartInSeconds = timeInSeconds - sample.timestamp;
+            if (trimStartInSeconds < 0 && trimStartInSeconds > -1e-10) {
+                trimStartInSeconds = 0;
+            }
+            if (trimStartInSeconds < 0) {
+                throw new Error(`trimStartInSeconds is negative: ${trimStartInSeconds}`);
+            }
         }
         if (isLastSample) {
             trimEndInSeconds =
@@ -62,7 +67,7 @@ export const extractAudio = async ({ src, timeInSeconds: unloopedTimeInSeconds,
             trimStartInSeconds,
             trimEndInSeconds,
             targetNumberOfChannels: TARGET_NUMBER_OF_CHANNELS,
-            volume,
+            playbackRate,
         });
         audioDataRaw.close();
         if (audioData.numberOfFrames === 0) {
@@ -71,8 +76,8 @@ export const extractAudio = async ({ src, timeInSeconds: unloopedTimeInSeconds,
         audioDataArray.push(audioData);
     }
     if (audioDataArray.length === 0) {
-        return null;
+        return { data: null, durationInSeconds: duration };
     }
     const combined = combineAudioDataAndClosePrevious(audioDataArray);
-    return combined;
+    return { data: combined, durationInSeconds: duration };
 };

package/dist/convert-audiodata/apply-volume.d.ts

@@ -0,0 +1 @@
+export declare const applyVolume: (array: Int16Array, volume: number) => void;

package/dist/convert-audiodata/apply-volume.js

@@ -0,0 +1,17 @@
+export const applyVolume = (array, volume) => {
+    if (volume === 1) {
+        return;
+    }
+    for (let i = 0; i < array.length; i++) {
+        const newValue = array[i] * volume;
+        if (newValue < -32768) {
+            array[i] = -32768;
+        }
+        else if (newValue > 32767) {
+            array[i] = 32767;
+        }
+        else {
+            array[i] = newValue;
+        }
+    }
+};

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

@@ -4,7 +4,7 @@ export type ConvertAudioDataOptions = {
     trimStartInSeconds: number;
     trimEndInSeconds: number;
     targetNumberOfChannels: number;
-    volume: number;
+    playbackRate: number;
 };
 export type PcmS16AudioData = {
     data: Int16Array;
@@ -13,4 +13,4 @@ export type PcmS16AudioData = {
     numberOfFrames: number;
     timestamp: number;
 };
-export declare const convertAudioData: ({ audioData, newSampleRate, trimStartInSeconds, trimEndInSeconds, targetNumberOfChannels, volume, }: ConvertAudioDataOptions) => PcmS16AudioData;
+export declare const convertAudioData: ({ audioData, newSampleRate, trimStartInSeconds, trimEndInSeconds, targetNumberOfChannels, playbackRate, }: ConvertAudioDataOptions) => PcmS16AudioData;

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

@@ -1,12 +1,19 @@
 import { resampleAudioData } from './resample-audiodata';
 const FORMAT = 's16';
-export const convertAudioData = ({ audioData, newSampleRate, trimStartInSeconds, trimEndInSeconds, targetNumberOfChannels, volume, }) => {
+const roundButRoundDownZeroPointFive = (value) => {
+    if (value % 1 <= 0.5) {
+        return Math.floor(value);
+    }
+    return Math.ceil(value);
+};
+export const convertAudioData = ({ audioData, newSampleRate, trimStartInSeconds, trimEndInSeconds, targetNumberOfChannels, playbackRate, }) => {
     const { numberOfChannels: srcNumberOfChannels, sampleRate: currentSampleRate, numberOfFrames, } = audioData;
     const ratio = currentSampleRate / newSampleRate;
-    const frameOffset = Math.round(trimStartInSeconds * audioData.sampleRate);
-    const frameCount = numberOfFrames -
-        Math.round((trimEndInSeconds + trimStartInSeconds) * audioData.sampleRate);
-    const newNumberOfFrames = Math.round(frameCount / ratio);
+    const frameOffset = roundButRoundDownZeroPointFive(trimStartInSeconds * audioData.sampleRate);
+    const unroundedFrameCount = numberOfFrames -
+        (trimEndInSeconds + trimStartInSeconds) * audioData.sampleRate;
+    const frameCount = Math.round(unroundedFrameCount);
+    const newNumberOfFrames = Math.round(unroundedFrameCount / ratio / playbackRate);
     if (newNumberOfFrames === 0) {
         throw new Error('Cannot resample - the given sample rate would result in less than 1 sample');
     }
@@ -24,7 +31,7 @@ export const convertAudioData = ({ audioData, newSampleRate, trimStartInSeconds,
     const chunkSize = frameCount / newNumberOfFrames;
     if (newNumberOfFrames === frameCount &&
         targetNumberOfChannels === srcNumberOfChannels &&
-        volume === 1) {
+        playbackRate === 1) {
         return {
             data: srcChannels,
             numberOfChannels: targetNumberOfChannels,
@@ -39,7 +46,6 @@ export const convertAudioData = ({ audioData, newSampleRate, trimStartInSeconds,
         destination: data,
         targetFrames: newNumberOfFrames,
         chunkSize,
-        volume,
     });
     const newAudioData = {
         data,

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

@@ -1,10 +1,9 @@
 export declare const TARGET_NUMBER_OF_CHANNELS = 2;
 export declare const TARGET_SAMPLE_RATE = 48000;
-export declare const resampleAudioData: ({ srcNumberOfChannels, sourceChannels, destination, targetFrames, chunkSize, volume, }: {
+export declare const resampleAudioData: ({ srcNumberOfChannels, sourceChannels, destination, targetFrames, chunkSize, }: {
     srcNumberOfChannels: number;
     sourceChannels: Int16Array;
     destination: Int16Array;
     targetFrames: number;
     chunkSize: number;
-    volume: number;
 }) => void;

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

@@ -2,29 +2,50 @@
 export const TARGET_NUMBER_OF_CHANNELS = 2;
 // Remotion exports all videos with 48kHz sample rate.
 export const TARGET_SAMPLE_RATE = 48000;
-export const resampleAudioData = ({ srcNumberOfChannels, sourceChannels, destination, targetFrames, chunkSize, volume, }) => {
-    const getSourceValues = (start, end, channelIndex) => {
-        const sampleCountAvg = end - start;
-        let itemSum = 0;
-        let itemCount = 0;
-        for (let k = 0; k < sampleCountAvg; k++) {
-            const num = sourceChannels[(start + k) * srcNumberOfChannels + channelIndex];
-            itemSum += num;
-            itemCount++;
+const fixFloatingPoint = (value) => {
+    if (value % 1 < 0.0000001) {
+        return Math.floor(value);
+    }
+    if (value % 1 > 0.9999999) {
+        return Math.ceil(value);
+    }
+    return value;
+};
+export const resampleAudioData = ({ srcNumberOfChannels, sourceChannels, destination, targetFrames, chunkSize, }) => {
+    const getSourceValues = (startUnfixed, endUnfixed, channelIndex) => {
+        const start = fixFloatingPoint(startUnfixed);
+        const end = fixFloatingPoint(endUnfixed);
+        const startFloor = Math.floor(start);
+        const startCeil = Math.ceil(start);
+        const startFraction = start - startFloor;
+        const endFraction = end - Math.floor(end);
+        const endFloor = Math.floor(end);
+        let weightedSum = 0;
+        let totalWeight = 0;
+        // Handle first fractional sample
+        if (startFraction > 0) {
+            const firstSample = sourceChannels[startFloor * srcNumberOfChannels + channelIndex];
+            weightedSum += firstSample * (1 - startFraction);
+            totalWeight += 1 - startFraction;
         }
-        const average = itemSum / itemCount;
-        const averageVolume = average * volume;
-        if (averageVolume < -32768) {
-            return -32768;
+        // Handle full samples
+        for (let k = startCeil; k < endFloor; k++) {
+            const num = sourceChannels[k * srcNumberOfChannels + channelIndex];
+            weightedSum += num;
+            totalWeight += 1;
         }
-        if (averageVolume > 32767) {
-            return 32767;
+        // Handle last fractional sample
+        if (endFraction > 0) {
+            const lastSample = sourceChannels[endFloor * srcNumberOfChannels + channelIndex];
+            weightedSum += lastSample * endFraction;
+            totalWeight += endFraction;
         }
-        return averageVolume;
+        const average = weightedSum / totalWeight;
+        return average;
     };
     for (let newFrameIndex = 0; newFrameIndex < targetFrames; newFrameIndex++) {
-        const start = Math.floor(newFrameIndex * chunkSize);
-        const end = Math.max(Math.floor(start + chunkSize), start + 1);
+        const start = newFrameIndex * chunkSize;
+        const end = start + chunkSize;
         if (TARGET_NUMBER_OF_CHANNELS === srcNumberOfChannels) {
             for (let i = 0; i < srcNumberOfChannels; i++) {
                 destination[newFrameIndex * srcNumberOfChannels + i] = getSourceValues(start, end, i);