Add Waveform

Use composition.addWaveform() to add a Waveform layer to a composition.

If you provide an audio file, it will use that audio file to generate a waveform. If left undefined it will use the final processed composition audio to generate the waveform.

composition.addWaveform() signature

addWaveform(
  file:CompositionFile,
  options:WaveformOptions,
  config?:WaveformLayerConfig
): Promise<Waveform>

Options

Waveform Styles

We have a wide variety of waveform styles to chooose from, and more to come!

bars

roundBars

bricks

equalizer

curve

line

pixel

wave

Waveform layer configuration

The config argument supports the following layer configuration properties:

• Position
• Size
• Timeline
• Transitions
• Trim

Waveform class

Calling composition.addWaveform() returns an instance of the Waveform class, which allows you to read/update its layer options and read/update its layer configuration through getters/setters.

Reading and updating layer options

waveform.type; // "waveform"


waveform.setBackgroundColor("#ffffff");
waveform.backgroundColor; // "#ffffff"


waveform.setColor("#000000");
waveform.color; // "#000000"


waveform.setStyle("equalizer");
waveform.style; // "equalizer"

Examples

Minimal

Add Waveform from an audio file

await composition.addWaveform(
  "https://editframe.com/docs/layer-types/add-waveform/audio-example.mp3"
);

Output

Add Waveform using final processed composition audio

await composition.addAudio(
  "https://editframe.com/docs/layer-types/add-waveform/audio-example.mp3"
);
await composition.addWaveform();

Output

All layer configuration

await composition.addWaveform(
  // file
  "https://editframe.com/docs/layer-types/add-waveform/audio-example.mp3",
  // options
  { backgroundColor: "#00775b", color: "#2f2649", style: "equalizer" },
  
  // config
  {
    position: {
      x: 50,
      y: 50,
    },
    size: {
      height: 980,
      width: 1930,
    },
    timeline: {
      start: 1,
    },
    trim: {
      start: 0,
      end: 4,
    },
  }
);

Output

Method Chaining Approach

const waveform = await composition.addWaveform(
  // file
  "https://editframe.com/docs/layer-types/add-waveform/audio-example.mp3",
  // options
  { backgroundColor: "#00775b", color: '#2f2649', style: 'equalizer' },
);


waveform


  // Position
  .setIsRelative(true)
  .setX(0.5)
  .setY(0.5)


  // Size
  .setHeight(980)
  .setWidth(1830)


  // Timeline
  .setStart(1)


  // Trim
  .setTrim(0, 4);

Output