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
secondaryColorstringtransparentA 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,
  },
}
);