Skip to main content

getWaveformPortion()

Part of the @remotion/media-utils package of helper functions.

Takes bulky waveform data (for example fetched by getAudioData()) and returns a trimmed and simplified version of it, for simpler visualization. This function is suitable if you only need volume data, if you need more detailed data about each frequency range, use visualizeAudio().

Arguments​

An object with the following arguments:

audioData​

AudioData

Information about the audio. Use getAudioData() to fetch it.

startTimeInSeconds​

number

Trim the waveform to exclude all data before startTimeInSeconds.

durationInSeconds​

number

trim the waveform to exclude all data after startTimeInSeconds + durationInSeconds.

numberOfSamples​

number

How big you want the result array to be. The function will compress the waveform to fit in numberOfSamples data points.

Return value​

Bar[] - An array of objects with the following properties:

index​

number

The index of the datapoint, starting at 0. Useful for specifying as React key attribute without getting a warning.

amplitude​

number

A value describing the amplitude / volume / loudness of the audio. Values range between 0 and 1.

Example​

tsx
import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
import { staticFile } from "remotion";
 
const audioData = await getAudioData(staticFile("music.mp3")); /* {
  channelWaveforms: [Float32Array(4410000), Float32Array(4410000)],
  sampleRate: 44100,
  durationInSeconds: 100.0000,
  numberOfChannels: 2,
  resultId: "0.432878981",
  isRemote: false
} */
 
const waveformPortion = await getWaveformPortion({
  audioData,
  // Will select time range of 20-40 seconds
  startTimeInSeconds: 20,
  durationInSeconds: 20,
  numberOfSamples: 10,
}); // [{index: 0, amplitude: 0.14}, ... {index: 9, amplitude: 0.79}]
 
console.log(waveformPortion.length); // 10
tsx
import { getAudioData, getWaveformPortion } from "@remotion/media-utils";
import { staticFile } from "remotion";
 
const audioData = await getAudioData(staticFile("music.mp3")); /* {
  channelWaveforms: [Float32Array(4410000), Float32Array(4410000)],
  sampleRate: 44100,
  durationInSeconds: 100.0000,
  numberOfChannels: 2,
  resultId: "0.432878981",
  isRemote: false
} */
 
const waveformPortion = await getWaveformPortion({
  audioData,
  // Will select time range of 20-40 seconds
  startTimeInSeconds: 20,
  durationInSeconds: 20,
  numberOfSamples: 10,
}); // [{index: 0, amplitude: 0.14}, ... {index: 9, amplitude: 0.79}]
 
console.log(waveformPortion.length); // 10

Alternatives​

The visualizeAudio() function is more suitable for visualizing audio based on frequency properties of the audio (bass, mids, highs, etc).

See also​