Editframe logoEditframe

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.

Waveform Mode
Round BarsBarsBricksLineCurvePixelWaveSpikes
FFT Size256
Decay Steps8
FFT Gain3

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

DOM: read / write
HTML: target
JSX: target
Type: string

The 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

DOM: read / write
HTML: mode
JSX: mode
Type: string

The mode of the waveform.

See the sandbox example to see what the different modes look like.

The modes are:

  • roundBars
  • bars
  • bricks
  • line
  • curve
  • pixel
  • wave
  • spikes

lineWidth

DOM: read / write
HTML: line-width
JSX: lineWidth
Type: number

The width of the line in line mode.

This property is only applicable in line mode.

color

DOM: read / write
HTML: color
JSX: color
Type: string

The 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

DOM: read / write
HTML: bar-spacing
JSX: barSpacing
Type: number

The 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.