Waveform
The <ef-waveform> is a custom HTML element that extends the functionality of the standard HTML audio element. It's designed to work seamlessly with <ef-audio> and <ef-video> elements.
Demonstrations
Basic Usage
Sandbox
Play with the different modes and properties to see how they affect the waveform's visual appearance.
Custom waveform drawing
🤔 If you would like complete control over the waveform drawing, let us know. We haven't comitted to an API yet, but providing the raw frequency data and access to a canvas in a frame-by-frame callback is something we're considering.
Attributes
target
stringtargettargetThe ID of an <ef-audio> or <ef-video> element to use as the source for the waveform.
The waveform will be synchronized to the audio or video element.
mode
stringmodemodeThe mode of the waveform.
See the sandbox example to see what the different modes look like.
The modes are:
roundBarsbarsbrickslinecurvepixelwavespikes
lineWidth
numberline-widthlineWidthThe width of the line in line mode.
This property is only applicable in line mode.
color
stringcolorcolorThe color of the waveform.
This can be set to any valid CSS color value.
The default color is currentColor, which will use the computed text color according to the cascade.
barSpacing
numberbar-spacingbarSpacingThe spacing between bars in bars and roundBars mode.
More spacing generally results in narrower bars. But this may vary depending on the selected fft-size of the audio or video element.
Default value is 0.5.