Waveform

Options

Property	Type	Default	Description
`backgroundColor`	`string`	`null`	A string containing any hexadecimal, rgb, or named color
`color`	`string`	`#ffffff`	A string containing any hexadecimal, rgb, or named color
`style`	`string`	`bars`	One 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,
    },
  }
);