@remotion/media-utils 4.0.239 → 4.0.240

package/dist/combine-float32-arrays.d.ts

@@ -0,0 +1 @@
+export declare const combineFloat32Arrays: (arrays: Float32Array[]) => Float32Array;

package/dist/combine-float32-arrays.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.combineFloat32Arrays = void 0;
+const combineFloat32Arrays = (arrays) => {
+    if (arrays.length === 0) {
+        return new Float32Array([]);
+    }
+    if (arrays.length === 1) {
+        return arrays[0];
+    }
+    let totalLength = 0;
+    for (const array of arrays) {
+        totalLength += array.length;
+    }
+    const result = new Float32Array(totalLength);
+    let offset = 0;
+    for (const array of arrays) {
+        result.set(array, offset);
+        offset += array.length;
+    }
+    return result;
+};
+exports.combineFloat32Arrays = combineFloat32Arrays;

package/dist/fetch-with-cors-catch.d.ts

@@ -0,0 +1 @@
+export declare const fetchWithCorsCatch: (src: string, init?: RequestInit) => Promise<Response>;

package/dist/fetch-with-cors-catch.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchWithCorsCatch = void 0;
+const fetchWithCorsCatch = async (src, init) => {
+    try {
+        const response = await fetch(src, {
+            mode: 'cors',
+            referrerPolicy: 'no-referrer-when-downgrade',
+            ...init,
+        });
+        return response;
+    }
+    catch (err) {
+        const error = err;
+        if (
+        // Chrome
+        error.message.includes('Failed to fetch') ||
+            // Safari
+            error.message.includes('Load failed') ||
+            // Firefox
+            error.message.includes('NetworkError when attempting to fetch resource')) {
+            throw new TypeError(`Failed to read from ${src}: ${error.message}. Does the resource support CORS?`);
+        }
+        throw err;
+    }
+};
+exports.fetchWithCorsCatch = fetchWithCorsCatch;

package/dist/fft/get-visualization.d.ts

@@ -1,5 +1,5 @@
 export type OptimizeFor = 'accuracy' | 'speed';
-export declare const getVisualization: ({ sampleSize, data, sampleRate, frame, fps, maxInt, optimizeFor, }: {
+export declare const getVisualization: ({ sampleSize, data, sampleRate, frame, fps, maxInt, optimizeFor, dataOffsetInSeconds, }: {
     sampleSize: number;
     data: Float32Array;
     frame: number;
@@ -7,4 +7,5 @@ export declare const getVisualization: ({ sampleSize, data, sampleRate, frame, f
     fps: number;
     maxInt: number;
     optimizeFor: OptimizeFor;
+    dataOffsetInSeconds: number;
 }) => number[];

package/dist/fft/get-visualization.js

@@ -8,7 +8,7 @@ const fft_fast_1 = require("./fft-fast");
 const mag_1 = require("./mag");
 const smoothing_1 = require("./smoothing");
 const to_int_16_1 = require("./to-int-16");
-const getVisualization = ({ sampleSize, data, sampleRate, frame, fps, maxInt, optimizeFor = 'accuracy', }) => {
+const getVisualization = ({ sampleSize, data, sampleRate, frame, fps, maxInt, optimizeFor, dataOffsetInSeconds, }) => {
     const isPowerOfTwo = sampleSize > 0 && (sampleSize & (sampleSize - 1)) === 0;
     if (!isPowerOfTwo) {
         throw new TypeError(`The argument "bars" must be a power of two. For example: 64, 128. Got instead: ${sampleSize}`);
@@ -19,7 +19,7 @@ const getVisualization = ({ sampleSize, data, sampleRate, frame, fps, maxInt, op
     if (data.length < sampleSize) {
         throw new TypeError('Audio data is not big enough to provide ' + sampleSize + ' bars.');
     }
-    const start = Math.floor((frame / fps) * sampleRate);
+    const start = Math.floor((frame / fps - dataOffsetInSeconds) * sampleRate);
     const actualStart = Math.max(0, start - sampleSize / 2);
     const ints = new Int16Array({
         length: sampleSize,

package/dist/get-audio-data.js

@@ -1,32 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAudioData = void 0;
+const fetch_with_cors_catch_1 = require("./fetch-with-cors-catch");
 const is_remote_asset_1 = require("./is-remote-asset");
 const p_limit_1 = require("./p-limit");
 const metadataCache = {};
 const limit = (0, p_limit_1.pLimit)(3);
-const fetchWithCorsCatch = async (src) => {
-    try {
-        const response = await fetch(src, {
-            mode: 'cors',
-            referrerPolicy: 'no-referrer-when-downgrade',
-        });
-        return response;
-    }
-    catch (err) {
-        const error = err;
-        if (
-        // Chrome
-        error.message.includes('Failed to fetch') ||
-            // Safari
-            error.message.includes('Load failed') ||
-            // Firefox
-            error.message.includes('NetworkError when attempting to fetch resource')) {
-            throw new TypeError(`Failed to read from ${src}: ${error.message}. Does the resource support CORS?`);
-        }
-        throw err;
-    }
-};
 const fn = async (src, options) => {
     var _a;
     if (metadataCache[src]) {
@@ -38,7 +17,7 @@ const fn = async (src, options) => {
     const audioContext = new AudioContext({
         sampleRate: (_a = options === null || options === void 0 ? void 0 : options.sampleRate) !== null && _a !== void 0 ? _a : 48000,
     });
-    const response = await fetchWithCorsCatch(src);
+    const response = await (0, fetch_with_cors_catch_1.fetchWithCorsCatch)(src);
     const arrayBuffer = await response.arrayBuffer();
     const wave = await audioContext.decodeAudioData(arrayBuffer);
     const channelWaveforms = new Array(wave.numberOfChannels)

package/dist/get-partial-wave-data.d.ts

@@ -0,0 +1,12 @@
+export declare const getPartialWaveData: ({ dataOffset, src, bitsPerSample, channelIndex, sampleRate, fromSeconds, toSeconds, blockAlign, fileSize, signal, }: {
+    dataOffset: number;
+    src: string;
+    bitsPerSample: number;
+    channelIndex: number;
+    sampleRate: number;
+    fromSeconds: number;
+    toSeconds: number;
+    blockAlign: number;
+    fileSize: number;
+    signal: AbortSignal;
+}) => Promise<Float32Array>;

package/dist/get-partial-wave-data.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPartialWaveData = void 0;
+const fetch_with_cors_catch_1 = require("./fetch-with-cors-catch");
+const probe_wave_file_1 = require("./probe-wave-file");
+const getPartialWaveData = async ({ dataOffset, src, bitsPerSample, channelIndex, sampleRate, fromSeconds, toSeconds, blockAlign, fileSize, signal, }) => {
+    const startByte = dataOffset + Math.floor(fromSeconds * sampleRate) * blockAlign;
+    const endByte = Math.min(fileSize - 1, dataOffset + Math.floor(toSeconds * sampleRate - 1) * blockAlign);
+    const response = await (0, fetch_with_cors_catch_1.fetchWithCorsCatch)(src, {
+        headers: {
+            range: `bytes=${startByte}-${endByte}`,
+        },
+        signal,
+    });
+    if (response.status !== 206) {
+        throw new Error(`Tried to read bytes ${startByte}-${endByte} from ${src}, but the response status code was not 206. This means the server might not support returning a partial response.`);
+    }
+    const arrayBuffer = await response.arrayBuffer();
+    const uintArray = new Uint8Array(arrayBuffer);
+    const samples = new Float32Array(uintArray.length / blockAlign);
+    for (let i = 0; i < uintArray.length; i += blockAlign) {
+        const sampleStart = i + channelIndex * (bitsPerSample / 8);
+        let sample;
+        if (bitsPerSample === 16) {
+            sample = (0, probe_wave_file_1.getInt16AsFloat)(uintArray, sampleStart);
+        }
+        else if (bitsPerSample === 8) {
+            sample = (0, probe_wave_file_1.getInt8AsFloat)(uintArray, sampleStart);
+        }
+        else {
+            throw new Error(`Unsupported bits per sample: ${bitsPerSample}`);
+        }
+        samples[i / blockAlign] = sample;
+    }
+    return samples;
+};
+exports.getPartialWaveData = getPartialWaveData;

package/dist/get-partial-waveform.d.ts

@@ -0,0 +1 @@
+export declare const getPartialAudioData: (src: string) => Promise<void>;

package/dist/get-partial-waveform.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPartialAudioData = void 0;
+const fetch_with_cors_catch_1 = require("./fetch-with-cors-catch");
+const toUint32 = (bytes) => {
+    if (bytes.length !== 4) {
+        throw new Error('toUint32() requires exactly 4 bytes');
+    }
+    const val1 = bytes[3];
+    const val2 = bytes[2];
+    const val3 = bytes[1];
+    const val4 = bytes[0];
+    return (val1 << 24) | (val2 << 16) | (val3 << 8) | val4;
+};
+const toUint16 = (bytes) => {
+    if (bytes.length !== 2) {
+        throw new Error('toUint16() requires exactly 2 bytes');
+    }
+    const val1 = bytes[1];
+    const val2 = bytes[0];
+    return (val1 << 8) | val2;
+};
+const getPartialAudioData = async (src) => {
+    const response = await (0, fetch_with_cors_catch_1.fetchWithCorsCatch)(src, {
+        headers: {
+            range: 'bytes=0-256',
+        },
+    });
+    if (response.status !== 206) {
+        throw new Error(`Tried to read bytes 0-256 from ${src}, but the response status code was not 206. This means the server might not support returning a partial response.`);
+    }
+    const buffer = await response.arrayBuffer();
+    const uintArray = new Uint8Array(buffer);
+    const header = uintArray.slice(0, 44);
+    const shouldBeRiff = new TextDecoder().decode(uintArray.slice(0, 4));
+    if (shouldBeRiff !== 'RIFF') {
+        throw new Error('getPartialAudioData() requires a WAVE file, but the first bytes are not RIFF. ');
+    }
+    const size = toUint32(uintArray.slice(4, 8));
+    const shouldBeWAVE = new TextDecoder().decode(uintArray.slice(8, 12));
+    if (shouldBeWAVE !== 'WAVE') {
+        throw new Error('getPartialAudioData() requires a WAVE file, but the bytes 8-11 are not "WAVE". ');
+    }
+    const shouldBeFmt = new TextDecoder().decode(uintArray.slice(12, 16));
+    if (shouldBeFmt !== 'fmt ') {
+        throw new Error('getPartialAudioData() requires a WAVE file, but the bytes 12-15 are not "fmt ". ');
+    }
+    const chunkSize = toUint32(uintArray.slice(16, 20));
+    const audioFormat = toUint16(uintArray.slice(20, 22));
+    if (audioFormat !== 1) {
+        throw new Error('getPartialAudioData() supports only a WAVE file with PCM audio format, but the audio format is not PCM. ');
+    }
+    const numberOfChannels = toUint16(uintArray.slice(22, 24));
+    const sampleRate = toUint32(uintArray.slice(24, 28));
+    const byteRate = toUint32(uintArray.slice(28, 32));
+    const blockAlign = toUint16(uintArray.slice(32, 34));
+    const bitsPerSample = toUint16(uintArray.slice(34, 36));
+    let offset = 36;
+    const shouldBeDataOrList = new TextDecoder().decode(uintArray.slice(offset, offset + 4));
+    if (shouldBeDataOrList === 'LIST') {
+        const listSize = toUint32(uintArray.slice(40, 44));
+        offset += listSize;
+        offset += 8;
+    }
+    const shouldBeData = new TextDecoder().decode(uintArray.slice(offset, offset + 4));
+    if (shouldBeData !== 'data') {
+        throw new Error('getPartialAudioData() requires a WAVE file, but the bytes 36-39 are not "data". ');
+    }
+    const dataSize = toUint32(uintArray.slice(offset + 4, offset + 8));
+    const numSamples = parseInt((chunkSize / blockAlign), 10);
+    console.log({
+        response,
+        buffer,
+        header,
+        size,
+        chunkSize,
+        audioFormat,
+        numberOfChannels,
+        sampleRate,
+        byteRate,
+        blockAlign,
+        bitsPerSample,
+        dataSize,
+        numSamples,
+    });
+};
+exports.getPartialAudioData = getPartialAudioData;

package/dist/index.d.ts

@@ -2,9 +2,12 @@ export { audioBufferToDataUrl } from './audio-buffer/audio-url-helpers';
 export { getAudioData } from './get-audio-data';
 export { getAudioDuration, getAudioDurationInSeconds, } from './get-audio-duration-in-seconds';
 export { getImageDimensions } from './get-image-dimensions';
+export { getPartialWaveData } from './get-partial-wave-data';
 export { getVideoMetadata } from './get-video-metadata';
 export { getWaveformPortion } from './get-waveform-portion';
+export { WaveProbe, probeWaveFile } from './probe-wave-file';
 export * from './types';
 export type { AudioData, VideoMetadata as VideoData } from './types';
 export { useAudioData } from './use-audio-data';
-export { visualizeAudio } from './visualize-audio';
+export { UseWindowedAudioDataOptions, UseWindowedAudioDataReturnValue, useWindowedAudioData, } from './use-windowed-audio-data';
+export { VisualizeAudioOptions, visualizeAudio } from './visualize-audio';

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.visualizeAudio = exports.useAudioData = exports.getWaveformPortion = exports.getVideoMetadata = exports.getImageDimensions = exports.getAudioDurationInSeconds = exports.getAudioDuration = exports.getAudioData = exports.audioBufferToDataUrl = void 0;
+exports.visualizeAudio = exports.useWindowedAudioData = exports.useAudioData = exports.probeWaveFile = exports.getWaveformPortion = exports.getVideoMetadata = exports.getPartialWaveData = exports.getImageDimensions = exports.getAudioDurationInSeconds = exports.getAudioDuration = exports.getAudioData = exports.audioBufferToDataUrl = void 0;
 var audio_url_helpers_1 = require("./audio-buffer/audio-url-helpers");
 Object.defineProperty(exports, "audioBufferToDataUrl", { enumerable: true, get: function () { return audio_url_helpers_1.audioBufferToDataUrl; } });
 var get_audio_data_1 = require("./get-audio-data");
@@ -24,12 +24,18 @@ Object.defineProperty(exports, "getAudioDuration", { enumerable: true, get: func
 Object.defineProperty(exports, "getAudioDurationInSeconds", { enumerable: true, get: function () { return get_audio_duration_in_seconds_1.getAudioDurationInSeconds; } });
 var get_image_dimensions_1 = require("./get-image-dimensions");
 Object.defineProperty(exports, "getImageDimensions", { enumerable: true, get: function () { return get_image_dimensions_1.getImageDimensions; } });
+var get_partial_wave_data_1 = require("./get-partial-wave-data");
+Object.defineProperty(exports, "getPartialWaveData", { enumerable: true, get: function () { return get_partial_wave_data_1.getPartialWaveData; } });
 var get_video_metadata_1 = require("./get-video-metadata");
 Object.defineProperty(exports, "getVideoMetadata", { enumerable: true, get: function () { return get_video_metadata_1.getVideoMetadata; } });
 var get_waveform_portion_1 = require("./get-waveform-portion");
 Object.defineProperty(exports, "getWaveformPortion", { enumerable: true, get: function () { return get_waveform_portion_1.getWaveformPortion; } });
+var probe_wave_file_1 = require("./probe-wave-file");
+Object.defineProperty(exports, "probeWaveFile", { enumerable: true, get: function () { return probe_wave_file_1.probeWaveFile; } });
 __exportStar(require("./types"), exports);
 var use_audio_data_1 = require("./use-audio-data");
 Object.defineProperty(exports, "useAudioData", { enumerable: true, get: function () { return use_audio_data_1.useAudioData; } });
+var use_windowed_audio_data_1 = require("./use-windowed-audio-data");
+Object.defineProperty(exports, "useWindowedAudioData", { enumerable: true, get: function () { return use_windowed_audio_data_1.useWindowedAudioData; } });
 var visualize_audio_1 = require("./visualize-audio");
 Object.defineProperty(exports, "visualizeAudio", { enumerable: true, get: function () { return visualize_audio_1.visualizeAudio; } });

package/dist/probe-wave-file.d.ts

@@ -0,0 +1,12 @@
+export declare const getInt16AsFloat: (bytes: Uint8Array, offset: number) => number;
+export declare const getInt8AsFloat: (bytes: Uint8Array, offset: number) => number;
+export type WaveProbe = {
+    dataOffset: number;
+    bitsPerSample: number;
+    numberOfChannels: number;
+    sampleRate: number;
+    blockAlign: number;
+    fileSize: number;
+    durationInSeconds: number;
+};
+export declare const probeWaveFile: (src: string) => Promise<WaveProbe>;

package/dist/probe-wave-file.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.probeWaveFile = exports.getInt8AsFloat = exports.getInt16AsFloat = void 0;
+const fetch_with_cors_catch_1 = require("./fetch-with-cors-catch");
+const getUint32 = (bytes, offset) => {
+    const val1 = bytes[offset + 3];
+    const val2 = bytes[offset + 2];
+    const val3 = bytes[offset + 1];
+    const val4 = bytes[offset];
+    return (val1 << 24) | (val2 << 16) | (val3 << 8) | val4;
+};
+const getUint16 = (bytes, offset) => {
+    const val1 = bytes[offset + 1];
+    const val2 = bytes[offset];
+    return (val1 << 8) | val2;
+};
+const getInt16AsFloat = (bytes, offset) => {
+    if (offset >= bytes.length) {
+        throw new Error(`Tried to read a 16-bit integer from offset ${offset} but the array length is ${bytes.length}`);
+    }
+    const val1 = bytes[offset + 1];
+    const val2 = bytes[offset];
+    return ((val1 << 8) | val2) / 32768;
+};
+exports.getInt16AsFloat = getInt16AsFloat;
+const getInt8AsFloat = (bytes, offset) => {
+    if (offset >= bytes.length) {
+        throw new Error(`Tried to read an 8-bit integer from offset ${offset} but the array length is ${bytes.length}`);
+    }
+    return (bytes[offset] - 128) / 128;
+};
+exports.getInt8AsFloat = getInt8AsFloat;
+const probeWaveFile = async (src) => {
+    const response = await (0, fetch_with_cors_catch_1.fetchWithCorsCatch)(src, {
+        headers: {
+            range: 'bytes=0-256',
+        },
+    });
+    if (response.status !== 206) {
+        throw new Error(`Tried to read bytes 0-256 from ${src}, but the response status code was not 206. This means the server might not support returning a partial response.`);
+    }
+    const buffer = await response.arrayBuffer();
+    const uintArray = new Uint8Array(buffer);
+    const shouldBeRiff = new TextDecoder().decode(uintArray.slice(0, 4));
+    if (shouldBeRiff !== 'RIFF') {
+        throw new Error('getPartialAudioData() requires a WAVE file, but the first bytes are not RIFF. ');
+    }
+    const size = getUint32(uintArray, 4);
+    const shouldBeWAVE = new TextDecoder().decode(uintArray.slice(8, 12));
+    if (shouldBeWAVE !== 'WAVE') {
+        throw new Error('getPartialAudioData() requires a WAVE file, but the bytes 8-11 are not "WAVE". ');
+    }
+    const shouldBeFmt = new TextDecoder().decode(uintArray.slice(12, 16));
+    if (shouldBeFmt !== 'fmt ') {
+        throw new Error('getPartialAudioData() requires a WAVE file, but the bytes 12-15 are not "fmt ". ');
+    }
+    // const chunkSize = toUint32(uintArray.slice(16, 20));
+    const audioFormat = getUint16(uintArray, 20);
+    if (audioFormat !== 1) {
+        throw new Error('getPartialAudioData() supports only a WAVE file with PCM audio format, but the audio format is not PCM. ');
+    }
+    const numberOfChannels = getUint16(uintArray, 22);
+    const sampleRate = getUint32(uintArray, 24);
+    // const byteRate = toUint32(uintArray.slice(28, 32));
+    const blockAlign = getUint16(uintArray, 32);
+    const bitsPerSample = getUint16(uintArray, 34);
+    let offset = 36;
+    const shouldBeDataOrList = new TextDecoder().decode(uintArray.slice(offset, offset + 4));
+    if (shouldBeDataOrList === 'LIST') {
+        const listSize = getUint32(uintArray, 40);
+        offset += listSize;
+        offset += 8;
+    }
+    const shouldBeData = new TextDecoder().decode(uintArray.slice(offset, offset + 4));
+    if (shouldBeData !== 'data') {
+        throw new Error('getPartialAudioData() requires a WAVE file, but the bytes 36-39 are not "data". ');
+    }
+    const dataSize = getUint32(uintArray, offset + 4);
+    if (dataSize + offset !== size) {
+        throw new Error(`getPartialAudioData() requires a WAVE file, but: Expected ${dataSize + offset}, got ${size}. `);
+    }
+    return {
+        dataOffset: offset + 8,
+        bitsPerSample,
+        numberOfChannels,
+        sampleRate,
+        blockAlign,
+        fileSize: size,
+        durationInSeconds: dataSize / (sampleRate * blockAlign),
+    };
+};
+exports.probeWaveFile = probeWaveFile;

package/dist/use-windowed-audio-data.d.ts

@@ -0,0 +1,13 @@
+import type { AudioData } from './types';
+export type UseWindowedAudioDataOptions = {
+    src: string;
+    frame: number;
+    fps: number;
+    windowInSeconds: number;
+    channelIndex?: number;
+};
+export type UseWindowedAudioDataReturnValue = {
+    audioData: AudioData | null;
+    dataOffsetInSeconds: number;
+};
+export declare const useWindowedAudioData: ({ src, frame, fps, windowInSeconds, channelIndex, }: UseWindowedAudioDataOptions) => UseWindowedAudioDataReturnValue;

package/dist/use-windowed-audio-data.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowedAudioData = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const combine_float32_arrays_1 = require("./combine-float32-arrays");
+const get_partial_wave_data_1 = require("./get-partial-wave-data");
+const is_remote_asset_1 = require("./is-remote-asset");
+const probe_wave_file_1 = require("./probe-wave-file");
+const useWindowedAudioData = ({ src, frame, fps, windowInSeconds, channelIndex = 0, }) => {
+    const isMounted = (0, react_1.useRef)(true);
+    const [waveProbe, setWaveProbe] = (0, react_1.useState)(null);
+    const [waveFormMap, setWaveformMap] = (0, react_1.useState)({});
+    const requests = (0, react_1.useRef)({});
+    const [initialWindowInSeconds] = (0, react_1.useState)(windowInSeconds);
+    if (windowInSeconds !== initialWindowInSeconds) {
+        throw new Error('windowInSeconds cannot be changed dynamically');
+    }
+    (0, react_1.useEffect)(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const fetchMetadata = (0, react_1.useCallback)(async () => {
+        const handle = (0, remotion_1.delayRender)(`Waiting for audio metadata with src="${src}" to be loaded`);
+        try {
+            const data = await (0, probe_wave_file_1.probeWaveFile)(src);
+            if (isMounted.current) {
+                setWaveProbe(data);
+            }
+            (0, remotion_1.continueRender)(handle);
+        }
+        catch (err) {
+            (0, remotion_1.cancelRender)(err);
+        }
+    }, [src]);
+    (0, react_1.useLayoutEffect)(() => {
+        fetchMetadata();
+    }, [fetchMetadata]);
+    const currentTime = frame / fps;
+    const currentWindowIndex = Math.floor(currentTime / windowInSeconds);
+    const windowsToFetch = (0, react_1.useMemo)(() => {
+        if (!waveProbe) {
+            return [];
+        }
+        const maxWindowIndex = Math.floor(waveProbe.durationInSeconds / windowInSeconds);
+        // needs to be in order because we rely on the concatenation below
+        return [
+            currentWindowIndex === 0 ? null : currentWindowIndex - 1,
+            currentWindowIndex,
+            currentWindowIndex + 1 > maxWindowIndex ? null : currentWindowIndex + 1,
+        ]
+            .filter((i) => i !== null)
+            .filter((i) => i >= 0);
+    }, [currentWindowIndex, waveProbe, windowInSeconds]);
+    const fetchAndSetWaveformData = (0, react_1.useCallback)(async (windowIndex) => {
+        if (!waveProbe) {
+            throw new Error('Wave probe is not loaded yet');
+        }
+        const controller = new AbortController();
+        requests.current[windowIndex] = controller;
+        const partialWaveData = await (0, get_partial_wave_data_1.getPartialWaveData)({
+            bitsPerSample: waveProbe.bitsPerSample,
+            blockAlign: waveProbe.blockAlign,
+            channelIndex,
+            dataOffset: waveProbe.dataOffset,
+            fileSize: waveProbe.fileSize,
+            fromSeconds: windowIndex * windowInSeconds,
+            sampleRate: waveProbe.sampleRate,
+            src,
+            toSeconds: (windowIndex + 1) * windowInSeconds,
+            signal: controller.signal,
+        });
+        requests.current[windowIndex] = null;
+        setWaveformMap((prev) => {
+            const entries = Object.keys(prev);
+            const windowsToClear = entries.filter((entry) => !windowsToFetch.includes(Number(entry)));
+            return {
+                ...prev,
+                // Delete windows that are not needed anymore
+                ...windowsToClear.reduce((acc, key) => {
+                    acc[key] = null;
+                    return acc;
+                }, {}),
+                // Add the new window
+                [windowIndex]: partialWaveData,
+            };
+        });
+    }, [channelIndex, src, waveProbe, windowInSeconds, windowsToFetch]);
+    (0, react_1.useEffect)(() => {
+        if (!waveProbe) {
+            return;
+        }
+        const windowsToClear = Object.keys(requests.current).filter((entry) => !windowsToFetch.includes(Number(entry)));
+        for (const windowIndex of windowsToClear) {
+            const controller = requests.current[windowIndex];
+            if (controller) {
+                controller.abort();
+                requests.current[windowIndex] = null;
+            }
+        }
+        Promise.all(windowsToFetch.map((windowIndex) => {
+            return fetchAndSetWaveformData(windowIndex);
+        })).catch((err) => {
+            var _a, _b, _c, _d, _e;
+            if ((_a = err.stack) === null || _a === void 0 ? void 0 : _a.includes('Cancelled')) {
+                return;
+            }
+            if ((_c = (_b = err.stack) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === null || _c === void 0 ? void 0 : _c.includes('aborted')) {
+                return;
+            }
+            // firefox
+            if ((_e = (_d = err.message) === null || _d === void 0 ? void 0 : _d.toLowerCase()) === null || _e === void 0 ? void 0 : _e.includes('aborted')) {
+                return;
+            }
+            (0, remotion_1.cancelRender)(err);
+        });
+    }, [fetchAndSetWaveformData, waveProbe, windowsToFetch]);
+    const currentAudioData = (0, react_1.useMemo)(() => {
+        if (!waveProbe) {
+            return null;
+        }
+        if (windowsToFetch.some((i) => !waveFormMap[i])) {
+            return null;
+        }
+        const windows = windowsToFetch.map((i) => waveFormMap[i]);
+        const data = (0, combine_float32_arrays_1.combineFloat32Arrays)(windows);
+        return {
+            channelWaveforms: [data],
+            durationInSeconds: waveProbe.durationInSeconds,
+            isRemote: (0, is_remote_asset_1.isRemoteAsset)(src),
+            numberOfChannels: 1,
+            resultId: String(Math.random()),
+            sampleRate: waveProbe.sampleRate,
+        };
+    }, [src, waveFormMap, waveProbe, windowsToFetch]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (currentAudioData) {
+            return;
+        }
+        const handle = (0, remotion_1.delayRender)(`Waiting for audio data with src="${src}" to be loaded`);
+        return () => {
+            (0, remotion_1.continueRender)(handle);
+        };
+    }, [currentAudioData, src]);
+    return {
+        audioData: currentAudioData,
+        dataOffsetInSeconds: windowsToFetch[0] * windowInSeconds,
+    };
+};
+exports.useWindowedAudioData = useWindowedAudioData;

package/dist/visualize-audio.d.ts

@@ -1,12 +1,16 @@
+import type { OptimizeFor } from './fft/get-visualization';
 import type { AudioData } from './types';
-type FnParameters = {
+type MandatoryVisualizeAudioOptions = {
     audioData: AudioData;
     frame: number;
     fps: number;
     numberOfSamples: number;
-    optimizeFor?: 'accuracy' | 'speed';
 };
-export declare const visualizeAudio: ({ smoothing, ...parameters }: FnParameters & {
-    smoothing?: boolean;
-}) => number[];
+type OptionalVisualizeAudioOptions = {
+    optimizeFor: OptimizeFor;
+    dataOffsetInSeconds: number;
+    smoothing: boolean;
+};
+export type VisualizeAudioOptions = MandatoryVisualizeAudioOptions & Partial<OptionalVisualizeAudioOptions>;
+export declare const visualizeAudio: ({ smoothing, optimizeFor, dataOffsetInSeconds, ...parameters }: MandatoryVisualizeAudioOptions & Partial<OptionalVisualizeAudioOptions> & {}) => number[];
 export {};

package/dist/visualize-audio.js

@@ -10,25 +10,33 @@ const cache = {};
  * @description part of @remotion/media-utils
  * @see [Documentation](https://www.remotion.dev/docs/visualize-audio)
  */
-const visualizeAudioFrame = ({ audioData: metadata, frame, fps, numberOfSamples, optimizeFor, }) => {
-    const cacheKey = metadata.resultId + frame + fps + numberOfSamples;
+const visualizeAudioFrame = ({ audioData, frame, fps, numberOfSamples, optimizeFor, dataOffsetInSeconds, }) => {
+    const cacheKey = audioData.resultId + frame + fps + numberOfSamples;
     if (cache[cacheKey]) {
         return cache[cacheKey];
     }
-    const maxInt = (0, max_value_cached_1.getMaxPossibleMagnitude)(metadata);
+    const maxInt = (0, max_value_cached_1.getMaxPossibleMagnitude)(audioData);
     return (0, get_visualization_1.getVisualization)({
         sampleSize: numberOfSamples * 2,
-        data: metadata.channelWaveforms[0],
+        data: audioData.channelWaveforms[0],
         frame,
         fps,
-        sampleRate: metadata.sampleRate,
+        sampleRate: audioData.sampleRate,
         maxInt,
-        optimizeFor: optimizeFor !== null && optimizeFor !== void 0 ? optimizeFor : (no_react_1.NoReactInternals.ENABLE_V5_BREAKING_CHANGES ? 'speed' : 'accuracy'),
+        optimizeFor,
+        dataOffsetInSeconds,
     });
 };
-const visualizeAudio = ({ smoothing = true, ...parameters }) => {
+const visualizeAudio = ({ smoothing = true, optimizeFor = no_react_1.NoReactInternals.ENABLE_V5_BREAKING_CHANGES
+    ? 'speed'
+    : 'accuracy', dataOffsetInSeconds = 0, ...parameters }) => {
     if (!smoothing) {
-        return visualizeAudioFrame(parameters);
+        return visualizeAudioFrame({
+            ...parameters,
+            optimizeFor,
+            dataOffsetInSeconds,
+            smoothing,
+        });
     }
     const toSmooth = [
         parameters.frame - 1,
@@ -36,7 +44,13 @@ const visualizeAudio = ({ smoothing = true, ...parameters }) => {
         parameters.frame + 1,
     ];
     const all = toSmooth.map((s) => {
-        return visualizeAudioFrame({ ...parameters, frame: s });
+        return visualizeAudioFrame({
+            ...parameters,
+            frame: s,
+            dataOffsetInSeconds,
+            optimizeFor,
+            smoothing,
+        });
     });
     return new Array(parameters.numberOfSamples).fill(true).map((_x, i) => {
         return (new Array(toSmooth.length)

package/eslint.config.mjs

@@ -1,6 +1,6 @@
 import {remotionFlatConfig} from '@remotion/eslint-config-internal';
 
-const config = remotionFlatConfig({react: false});
+const config = remotionFlatConfig({react: true});
 
 export default {
 	...config,

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/media-utils"
   },
   "name": "@remotion/media-utils",
-  "version": "4.0.239",
+  "version": "4.0.240",
   "description": "Utilities for working with media files",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -13,7 +13,7 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.239"
+    "remotion": "4.0.240"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.239"
+    "@remotion/eslint-config-internal": "4.0.240"
   },
   "keywords": [
     "remotion",