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`
`secondaryColor`	`string`	`transparent`	A string containing any hexadecimal, rgb, or named color for the equalizer waveform style

Waveform Styles

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

`bars`

Bars

await composition.addWaveform(
// options
"https://editframe.com/docs/composition/layers/audio/audio-example.mp3",
{
  color: "#ffffff",
  style: "bars",
},

// config
{
  position: {
    x: "center",
    y: "bottom",
  },
  size: {
    height: 1080
  },
  timeline: {
    start: 0,
  },
}
);

`roundBars`

roundBars

 await composition.addWaveform(
// options
"https://editframe.com/docs/composition/layers/audio/audio-example.mp3",
{
  color: "#ffffff",
  style: "roundBars",
},

// config
{
  position: {
    x: "center",
    y: "bottom",
  },
  size: {
    height: 1080
  },
  timeline: {
    start: 0,
  },
}
);

`bricks`

Bricks

await composition.addWaveform(
// options
"https://editframe.com/docs/composition/layers/audio/audio-example.mp3",
{
  color: "#ffffff",
  style: "bricks",
},

// config
{
  position: {
    x: "center",
    y: "bottom",
  },
  size: {
    height: 1080
  },
  timeline: {
    start: 0,
  },
}
);

`equalizer`

Equalizer

 await composition.addWaveform(
// options
"https://editframe.com/docs/composition/layers/audio/audio-example.mp3",
{
  color: "#ffffff",
  style: "equalizer",
  secondaryColor: "rgb(116, 169, 227)",
},

// config
{
  position: {
    x: "center",
    y: "bottom",
  },
  size: {
    height: 1080
  },
  timeline: {
    start: 0,
  },
}
);

`curve`

Curve

await composition.addWaveform(
// options
"https://editframe.com/docs/composition/layers/audio/audio-example.mp3",
{
  color: "#ffffff",
  style: "curve",
},

// config
{
  position: {
    x: "center",
    y: "bottom",
  },
  size: {
    height: 1080
  },
  timeline: {
    start: 0,
  },
}
);

`line`

Line

await composition.addWaveform(
// options
"https://editframe.com/docs/composition/layers/audio/audio-example.mp3",
{
  color: "#ffffff",
  style: "line",
},

// config
{
  position: {
    x: "center",
    y: "bottom",
  },
  size: {
    height: 1080
  },
  timeline: {
    start: 0,
  },
}
);

`pixel`

Pixel

await composition.addWaveform(
// options
"https://editframe.com/docs/composition/layers/audio/audio-example.mp3",
{
  color: "#ffffff",
  style: "pixel",
},

// config
{
  position: {
    x: "center",
    y: "bottom",
  },
  size: {
    height: 1080
  },
  timeline: {
    start: 0,
  },
}
);

`wave`

Wave

await composition.addWaveform(
// options
"https://editframe.com/docs/composition/layers/audio/audio-example.mp3",
{
  color: "#ffffff",
  style: "wave",
},

// config
{
  position: {
    x: "center",
    y: "bottom",
  },
  size: {
    height: 1080
  },
  timeline: {
    start: 0,
  },
}
);