Waveform

Options

PropertyTypeDefaultDescription
backgroundColorstringnullA string containing any hexadecimal, rgb, or named color
colorstring#ffffffA string containing any hexadecimal, rgb, or named color
stylestringbarsOne of bars, bricks, curve, equalizer, line, pixel, roundBars, wave

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:

Reading and updating layer options

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

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

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

Examples

Add waveform linked to audio file

await composition.addWaveform(
  "https://editframe.com/docs/"
);

Full layer configuration

await composition.addWaveform(
  "https://editframe.com/docs/",
  { backgroundColor: "#00775b", color: "#2f2649", style: "equalizer" },\n
  {
    position: {
      x: 50,
      y: 50,
    },
    size: {
      height: 980,
      width: 1930,
    },
    timeline: {
      start: 1,
    },
    trim: {
      start: 0,
      end: 4,
    },
  }
);