Line Waveform

A waveform visualization using a continuous line. It shows playback progress and lets users seek by clicking or using arrow keys.

Basic usage

Link it to a recording element using the for attribute.

<fortyfour-recording
  id="rec"
  recording-id="YOUR_RECORDING_ID"
  preload="metadata"
></fortyfour-recording>

<fortyfour-line-waveform for="rec"></fortyfour-line-waveform>

The waveform renders as a continuous line that follows the recording's audio data. The portion to the left of the playback position uses the progress color. The portion to the right uses the track color.

Sharp vs smooth

The sharp attribute switches from a smooth curve to straight lines between points.

<!-- Smooth curves (default) -->
<fortyfour-line-waveform for="rec"></fortyfour-line-waveform>

<!-- Sharp straight lines -->
<fortyfour-line-waveform for="rec" sharp></fortyfour-line-waveform>

Customizing the line

Control the size and shape of the waveform with attributes.

<fortyfour-line-waveform
  for="rec"
  line-width="3"
  height="80"
></fortyfour-line-waveform>

Colors

Set the progress and track colors with CSS variables.

fortyfour-line-waveform {
  --waveform-progress-color: #c4956a;
  --waveform-track-color: #e5e7eb;
}

The progress color fills the portion that has already played. The track color fills the portion that has not played yet.

Keyboard support

When the waveform has focus, use arrow keys to seek through the recording.

Reference

Attributes

CSS Variables