Skip to main content

visualizeAudioWaveform()

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

This function takes in AudioData (for example fetched by useAudioData()) and processes it for displaying as a waveform.

This function is suitable for visualizing voice. For visualizing music, use visualizeAudio()

Usage
const waveform = visualizeAudioWaveform({
  fps,
  frame,
  audioData,
  numberOfSamples: 16,
  windowInSeconds: 1 / fps,
});

See Examples below.

Arguments​

The only argument for this function is an object containing the following values:

audioData​

AudioData

An object containing audio data. You can fetch this object using useAudioData() or getAudioData().

frame​

number

The time of the track that you want to get the audio information for. The frame always refers to the position in the audio track - if you have shifted or trimmed the audio in your timeline, the frame returned by useCurrentFrame must also be tweaked before you pass it into this function.

fps​

number

The frame rate of the composition. This helps the function understand the meaning of the frame input.

numberOfSamples​

number

Must be a power of two, such as 32, 64, 128, etc. This parameter controls the length of the output array. A lower number will simplify the spectrum and is useful if you want to animate elements roughly based on the level of lows, mids and highs. A higher number will give the spectrum in more detail, which is useful for displaying a bar chart or waveform-style visualization of the audio.

windowInSeconds​

number

Time in seconds (can be float) which represents the duration for which you want to see the audio waveform.
Example: Your video has an fps of 30, and you pass 15 as the frame on visualizeAudioWaveform and 0.25 as windowInSeconds then output will have audio waveform data from (15/30) - .125 = 0.375 sec to (15/30) +0.125 = 0.625 sec.

dataOffsetInSecondsv4.0.268​

The amount of seconds the audio is offset, pass this parameter if you are using useWindowedAudioData().

normalize?v4.0.280​

boolean

Default false. If set to true, then the wave data gets scaled so that the biggest value is 1.

Return value​

number[]

An array of values describing the amplitude of each frequency range.
Each value is between -1 and 1.
The array is of length defined by the numberOfSamples parameter.

Examples​

Basic example​

import {Audio} from '@remotion/media';
import {createSmoothSvgPath, useAudioData, visualizeAudioWaveform} from '@remotion/media-utils';
import React from 'react';
import {AbsoluteFill, useCurrentFrame, useVideoConfig, staticFile} from 'remotion';

const height = 300;

const BaseExample: React.FC = () => {
  const frame = useCurrentFrame();
  const audioDataVoice = useAudioData(staticFile('podcast.wav'));
  const {width, fps} = useVideoConfig();

  if (!audioDataVoice) {
    return null;
  }

  const waveform = visualizeAudioWaveform({
    fps,
    frame,
    audioData: audioDataVoice,
    numberOfSamples: 32,
    windowInSeconds: 1 / fps,
  });

  const p = createSmoothSvgPath({
    points: waveform.map((x, i) => {
      return {
        x: (i / (waveform.length - 1)) * width,
        y: (x - 0.5) * height + height / 2,
      };
    }),
  });

  return (
    <div style={{flex: 1}}>
      <Audio src={staticFile('podcast.wav')} />
      <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
        <svg style={{backgroundColor: ' #0B84F3'}} viewBox={`0 0 ${width} ${height}`} width={width} height={height}>
          <path stroke="white" fill="none" strokeWidth={10} d={p as string} />
        </svg>
      </AbsoluteFill>
    </div>
  );
};

Sliding effect​

By increasing the windowInSeconds by tenfold, the audiogram starts moving to the right:

const waveform = visualizeAudioWaveform({
  fps,
  frame,
  audioData: audioDataVoice,
  numberOfSamples: 32,
  windowInSeconds: 10 / fps,
});

Posterizing​

By only calculating the waveform every third frame, we make the waveform calmer and generate a cool effect:

const waveform = visualizeAudioWaveform({
  fps,
  frame: Math.round(frame / 3) * 3,
  audioData: audioDataVoice,
  numberOfSamples: 32,
  windowInSeconds: 10 / fps,
});

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

See also​