Layer types
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
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:
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);