Bar Waveform

A waveform visualization using vertical bars. 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.

HTML

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

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

The waveform renders as a series of vertical bars based on the recording's audio data. Bars to the left of the playback position use the progress color. Bars to the right use the track color.

Before metadata is loaded, the component shows a placeholder. You can target this state with the data-placeholder attribute.

Customizing bars

Control the size and shape of individual bars with attributes.

HTML

<fortyfour-bar-waveform
  for="rec"
  bar-width="4"
  bar-gap="2"
  bar-radius="2"
  min-bar-height="4"
  height="80"
></fortyfour-bar-waveform>

Attribute	Type	Default	Description
`bar-width`	number	`3`	Width of each bar in pixels
`bar-gap`	number	`1`	Gap between bars in pixels
`bar-radius`	number	`1`	Border radius of bars
`min-bar-height`	number	`3`	Minimum bar height in pixels
`height`	number	`56`	Total component height

Colors

Set the progress and track colors with CSS variables.

CSS

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

The progress color fills bars that have already played. The track color fills bars that have not played yet.

Keyboard support

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

Key	Action
Left arrow	Seek backward
Right arrow	Seek forward

Reference

Attributes

Attribute	Type	Default	Description
`for`	string	required	ID of the `<fortyfour-recording>` to link to
`bar-width`	number	`3`	Width of each bar in pixels
`bar-gap`	number	`1`	Gap between bars in pixels
`bar-radius`	number	`1`	Border radius of bars in pixels
`min-bar-height`	number	`3`	Minimum bar height in pixels
`height`	number	`56`	Total component height in pixels

CSS Variables

Variable	Default	Description
`--waveform-progress-color`	`#3b82f6`	Color of played bars
`--waveform-track-color`	`#e5e7eb`	Color of unplayed bars
`--waveform-focus-color`	`#3b82f6`	Focus ring color
`--waveform-focus-width`	`2px`	Focus ring width
`--waveform-focus-offset`	`2px`	Focus ring offset
`--waveform-focus-radius`	`4px`	Focus ring border radius