@remotion/media-utils 4.0.266 → 4.0.268

package/dist/create-smooth-svg-path.d.ts

@@ -0,0 +1,7 @@
+export type Point = {
+    x: number;
+    y: number;
+};
+export declare const createSmoothSvgPath: ({ points }: {
+    points: Point[];
+}) => string;

package/dist/create-smooth-svg-path.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSmoothSvgPath = void 0;
+const line = (pointA, pointB) => {
+    const lengthX = pointB.x - pointA.x;
+    const lengthY = pointB.y - pointA.y;
+    return {
+        length: Math.sqrt(lengthX ** 2 + lengthY ** 2),
+        angle: Math.atan2(lengthY, lengthX),
+    };
+};
+const controlPoint = ({ current, previous, next, reverse, }) => {
+    const p = previous || current;
+    const n = next || current;
+    // The smoothing ratio
+    const smoothing = 0.2;
+    // Properties of the opposed-line
+    const o = line(p, n);
+    const angle = o.angle + (reverse ? Math.PI : 0);
+    const length = o.length * smoothing;
+    const x = current.x + Math.cos(angle) * length;
+    const y = current.y + Math.sin(angle) * length;
+    return { x, y };
+};
+const createSmoothSvgPath = ({ points }) => {
+    return points.reduce((acc, current, i, a) => {
+        if (i === 0) {
+            return `M ${current.x},${current.y}`;
+        }
+        const { x, y } = current;
+        const previous = a[i - 1];
+        const twoPrevious = a[i - 2];
+        const next = a[i + 1];
+        const { x: cp1x, y: cp1y } = controlPoint({
+            current: previous,
+            previous: twoPrevious,
+            next: current,
+            reverse: false,
+        });
+        const { x: cp2x, y: cp2y } = controlPoint({
+            current,
+            previous,
+            next,
+            reverse: true,
+        });
+        return `${acc} C ${cp1x},${cp1y} ${cp2x},${cp2y} ${x},${y}`;
+    }, '');
+};
+exports.createSmoothSvgPath = createSmoothSvgPath;

package/dist/get-wave-form-samples.d.ts

@@ -1 +1,6 @@
-export declare const getWaveformSamples: (waveform: Float32Array, sampleAmount: number) => any[];
+export type SampleOutputRange = 'minus-one-to-one' | 'zero-to-one';
+export declare const getWaveformSamples: ({ audioBuffer, numberOfSamples, outputRange, }: {
+    audioBuffer: Float32Array;
+    numberOfSamples: number;
+    outputRange: SampleOutputRange;
+}) => number[];

package/dist/get-wave-form-samples.js

@@ -1,33 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getWaveformSamples = void 0;
-const filterData = (audioBuffer, samples) => {
-    const blockSize = Math.floor(audioBuffer.length / samples); // the number of samples in each subdivision
+const getWaveformSamples = ({ audioBuffer, numberOfSamples, outputRange, }) => {
+    const blockSize = Math.floor(audioBuffer.length / numberOfSamples); // the number of samples in each subdivision
     if (blockSize === 0) {
         return [];
     }
     const filteredData = [];
-    for (let i = 0; i < samples; i++) {
+    for (let i = 0; i < numberOfSamples; i++) {
         const blockStart = blockSize * i; // the location of the first sample in the block
         let sum = 0;
         for (let j = 0; j < blockSize; j++) {
             sum += Math.abs(audioBuffer[blockStart + j]); // find the sum of all the samples in the block
         }
-        filteredData.push(sum / blockSize); // divide the sum by the block size to get the average
+        filteredData.push((sum / blockSize) *
+            (i % 2 === 0 && outputRange === 'minus-one-to-one' ? -1 : 1)); // divide the sum by the block size to get the average
     }
     return filteredData;
 };
-const normalizeData = (filteredData) => {
-    const max = Math.max(...filteredData);
-    // If the maximum amplitude is below this threshold, treat it as silence
-    const MINIMUM_AMPLITUDE_THRESHOLD = 0.001;
-    if (max < MINIMUM_AMPLITUDE_THRESHOLD) {
-        return new Array(filteredData.length).fill(0);
-    }
-    const multiplier = max ** -1;
-    return filteredData.map((n) => n * multiplier);
-};
-const getWaveformSamples = (waveform, sampleAmount) => {
-    return normalizeData(filterData(waveform, sampleAmount));
-};
 exports.getWaveformSamples = getWaveformSamples;

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

@@ -1,12 +1,17 @@
+import type { SampleOutputRange } from './get-wave-form-samples';
 import type { AudioData } from './types';
 type Bar = {
     index: number;
     amplitude: number;
 };
-export declare const getWaveformPortion: ({ audioData, startTimeInSeconds, durationInSeconds, numberOfSamples, }: {
+export type GetWaveformPortion = {
     audioData: AudioData;
     startTimeInSeconds: number;
     durationInSeconds: number;
     numberOfSamples: number;
-}) => Bar[];
-export {};
+    channel?: number;
+    outputRange?: SampleOutputRange;
+    dataOffsetInSeconds?: number;
+};
+export declare const getWaveformPortion: ({ audioData, startTimeInSeconds, durationInSeconds, numberOfSamples, channel, outputRange, dataOffsetInSeconds, }: GetWaveformPortion) => Bar[];
+export { Bar };

package/dist/get-waveform-portion.js

@@ -1,17 +1,51 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getWaveformPortion = void 0;
+const no_react_1 = require("remotion/no-react");
 const get_wave_form_samples_1 = require("./get-wave-form-samples");
+const validate_channel_1 = require("./validate-channel");
+const concatArrays = (arrays) => {
+    // sum of individual array lengths
+    const totalLength = arrays.reduce((acc, value) => acc + value.length, 0);
+    const result = new Float32Array(totalLength);
+    // for each array - copy it over result
+    // next array is copied right after the previous one
+    let length = 0;
+    for (const array of arrays) {
+        result.set(array, length);
+        length += array.length;
+    }
+    return result;
+};
 /*
  * @description Takes bulky waveform data (for example fetched by getAudioData()) and returns a trimmed and simplified version of it, for simpler visualization
  * @see [Documentation](https://remotion.dev/docs/get-waveform-portion)
  */
-const getWaveformPortion = ({ audioData, startTimeInSeconds, durationInSeconds, numberOfSamples, }) => {
-    const startSample = Math.floor((startTimeInSeconds / audioData.durationInSeconds) *
-        audioData.channelWaveforms[0].length);
-    const endSample = Math.floor(((startTimeInSeconds + durationInSeconds) / audioData.durationInSeconds) *
-        audioData.channelWaveforms[0].length);
-    return (0, get_wave_form_samples_1.getWaveformSamples)(audioData.channelWaveforms[0].slice(startSample, endSample), numberOfSamples).map((w, i) => {
+const getWaveformPortion = ({ audioData, startTimeInSeconds, durationInSeconds, numberOfSamples, channel = 0, outputRange = 'zero-to-one', dataOffsetInSeconds, }) => {
+    (0, validate_channel_1.validateChannel)(channel, audioData.numberOfChannels);
+    const waveform = audioData.channelWaveforms[channel];
+    const startSample = Math.floor((startTimeInSeconds - (dataOffsetInSeconds !== null && dataOffsetInSeconds !== void 0 ? dataOffsetInSeconds : 0)) * audioData.sampleRate);
+    const endSample = Math.floor((startTimeInSeconds - (dataOffsetInSeconds !== null && dataOffsetInSeconds !== void 0 ? dataOffsetInSeconds : 0) + durationInSeconds) *
+        audioData.sampleRate);
+    const samplesBeforeStart = 0 - startSample;
+    const samplesAfterEnd = endSample - waveform.length;
+    const clampedStart = Math.max(startSample, 0);
+    const clampedEnd = Math.min(waveform.length, endSample);
+    const padStart = samplesBeforeStart > 0
+        ? new Float32Array(samplesBeforeStart).fill(0)
+        : null;
+    const padEnd = samplesAfterEnd > 0 ? new Float32Array(samplesAfterEnd).fill(0) : null;
+    const arrs = [
+        padStart,
+        waveform.slice(clampedStart, clampedEnd),
+        padEnd,
+    ].filter(no_react_1.NoReactInternals.truthy);
+    const audioBuffer = arrs.length === 1 ? arrs[0] : concatArrays(arrs);
+    return (0, get_wave_form_samples_1.getWaveformSamples)({
+        audioBuffer,
+        numberOfSamples,
+        outputRange,
+    }).map((w, i) => {
         return {
             index: i,
             amplitude: w,

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { audioBufferToDataUrl } from './audio-buffer/audio-url-helpers';
+export { createSmoothSvgPath } from './create-smooth-svg-path';
 export { getAudioData } from './get-audio-data';
 export { getAudioDuration, getAudioDurationInSeconds, } from './get-audio-duration-in-seconds';
 export { getImageDimensions } from './get-image-dimensions';
@@ -11,3 +12,4 @@ export type { AudioData, VideoMetadata as VideoData } from './types';
 export { useAudioData } from './use-audio-data';
 export { UseWindowedAudioDataOptions, UseWindowedAudioDataReturnValue, useWindowedAudioData, } from './use-windowed-audio-data';
 export { VisualizeAudioOptions, visualizeAudio } from './visualize-audio';
+export { VisualizeAudioWaveformOptions, visualizeAudioWaveform, } from './visualize-audio-waveform';

package/dist/index.js

@@ -14,9 +14,11 @@ 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.useWindowedAudioData = exports.useAudioData = exports.probeWaveFile = exports.getWaveformPortion = exports.getVideoMetadata = exports.getPartialWaveData = exports.getImageDimensions = exports.getAudioDurationInSeconds = exports.getAudioDuration = exports.getAudioData = exports.audioBufferToDataUrl = void 0;
+exports.visualizeAudioWaveform = exports.visualizeAudio = exports.useWindowedAudioData = exports.useAudioData = exports.probeWaveFile = exports.getWaveformPortion = exports.getVideoMetadata = exports.getPartialWaveData = exports.getImageDimensions = exports.getAudioDurationInSeconds = exports.getAudioDuration = exports.getAudioData = exports.createSmoothSvgPath = 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 create_smooth_svg_path_1 = require("./create-smooth-svg-path");
+Object.defineProperty(exports, "createSmoothSvgPath", { enumerable: true, get: function () { return create_smooth_svg_path_1.createSmoothSvgPath; } });
 var get_audio_data_1 = require("./get-audio-data");
 Object.defineProperty(exports, "getAudioData", { enumerable: true, get: function () { return get_audio_data_1.getAudioData; } });
 var get_audio_duration_in_seconds_1 = require("./get-audio-duration-in-seconds");
@@ -39,3 +41,5 @@ 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; } });
+var visualize_audio_waveform_1 = require("./visualize-audio-waveform");
+Object.defineProperty(exports, "visualizeAudioWaveform", { enumerable: true, get: function () { return visualize_audio_waveform_1.visualizeAudioWaveform; } });

package/dist/validate-channel.d.ts

@@ -0,0 +1 @@
+export declare const validateChannel: (channel: unknown, numberOfChannels: number) => void;

package/dist/validate-channel.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateChannel = void 0;
+const validateChannel = (channel, numberOfChannels) => {
+    if (typeof channel !== 'number') {
+        throw new TypeError(`"channel" must be a number`);
+    }
+    if (channel % 1 !== 0) {
+        throw new TypeError(`"channel" must an integer, got ${channel}`);
+    }
+    if (Number.isNaN(channel)) {
+        throw new TypeError(`The channel parameter is NaN.`);
+    }
+    if (channel < 0) {
+        throw new TypeError('"channel" cannot be negative');
+    }
+    if (channel > numberOfChannels - 1) {
+        throw new TypeError(`"channel" must be ${numberOfChannels - 1} or lower. The audio has ${numberOfChannels} channels`);
+    }
+};
+exports.validateChannel = validateChannel;

package/dist/visualize-audio-waveform.d.ts

@@ -0,0 +1,11 @@
+import type { AudioData } from './types';
+export type VisualizeAudioWaveformOptions = {
+    audioData: AudioData;
+    frame: number;
+    fps: number;
+    windowInSeconds: number;
+    numberOfSamples: number;
+    channel?: number;
+    dataOffsetInSeconds?: number;
+};
+export declare const visualizeAudioWaveform: (parameters: VisualizeAudioWaveformOptions) => number[];

package/dist/visualize-audio-waveform.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.visualizeAudioWaveform = void 0;
+const get_waveform_portion_1 = require("./get-waveform-portion");
+const cache = {};
+const visualizeAudioWaveformFrame = ({ audioData, frame, fps, numberOfSamples, windowInSeconds, channel, dataOffsetInSeconds, }) => {
+    if (windowInSeconds * audioData.sampleRate < numberOfSamples) {
+        throw new TypeError(windowInSeconds +
+            's audiodata does not have ' +
+            numberOfSamples +
+            ' bars. Increase windowInSeconds or decrease numberOfSamples');
+    }
+    const cacheKey = audioData.resultId +
+        frame +
+        fps +
+        numberOfSamples +
+        'waveform' +
+        dataOffsetInSeconds;
+    if (cache[cacheKey]) {
+        return cache[cacheKey];
+    }
+    const time = frame / fps;
+    const startTimeInSeconds = time - windowInSeconds / 2;
+    return (0, get_waveform_portion_1.getWaveformPortion)({
+        audioData,
+        startTimeInSeconds,
+        durationInSeconds: windowInSeconds,
+        numberOfSamples,
+        outputRange: 'minus-one-to-one',
+        channel,
+        dataOffsetInSeconds,
+    });
+};
+const visualizeAudioWaveform = (parameters) => {
+    const data = visualizeAudioWaveformFrame(parameters);
+    return data.map((value) => value.amplitude);
+};
+exports.visualizeAudioWaveform = visualizeAudioWaveform;

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.266",
+  "version": "4.0.268",
   "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.266"
+    "remotion": "4.0.268"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.266"
+    "@remotion/eslint-config-internal": "4.0.268"
   },
   "keywords": [
     "remotion",