Primitives

Primitives are the building blocks for custom audio UIs. Instead of using the pre-built Player or Recorder, you can combine primitives to build exactly what you need.

How they work

Every primitive connects to a <fortyfour-recording> element using the for attribute. This is the same pattern as HTML <label> and <input>.

The <fortyfour-recording> element is a hidden element that manages audio state and playback. It loads the recording data, handles play/pause, and tracks the current time. All the visual primitives read from it.

<!-- The hidden state manager -->
<fortyfour-recording
  id="my-recording"
  recording-id="YOUR_RECORDING_ID"
  preload="metadata"
></fortyfour-recording>

<!-- Visual primitives link to it with "for" -->
<fortyfour-play-button for="my-recording"></fortyfour-play-button>
<fortyfour-bar-waveform for="my-recording"></fortyfour-bar-waveform>
<fortyfour-duration for="my-recording"></fortyfour-duration>

You can mix and match any combination of primitives. Use one, use all of them, or use the same primitive multiple times with different settings. They all stay in sync because they share the same recording element.

Why use primitives?

The Player component is great when you want a full-featured player out of the box. But sometimes you need more control.

• Custom layouts. Put the play button on the left, the waveform on the right, the duration below. Whatever you want.
• Mix visualizations. Use a bar waveform in one spot and a progress bar in another.
• Style each piece independently. Each primitive has its own CSS variables so you can style them separately.
• Build something new. Create a player that looks nothing like the default.

Full example

Here is a custom player built entirely from primitives.

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

<div style="display: flex; align-items: center; gap: 12px;">
  <fortyfour-play-button
    for="demo"
    shape="circle"
    visualization="ring"
  ></fortyfour-play-button>

  <div style="flex: 1;">
    <fortyfour-bar-waveform for="demo"></fortyfour-bar-waveform>
  </div>

  <fortyfour-duration
    for="demo"
    format="remaining"
  ></fortyfour-duration>
</div>

<fortyfour-transcription
  for="demo"
  mode="karaoke"
  max-height="120"
></fortyfour-transcription>

All primitives

Primitive	What it does
Recording	Hidden element that manages audio state and playback. Every other primitive connects to this.
Play Button	Play/pause button with multiple shapes, visualizations, and hover effects.
Bar Waveform	Waveform visualization using vertical bars. Click or use arrow keys to seek.
Line Waveform	Waveform visualization using a continuous line. Smooth or sharp mode.
Progress Bar	Simple horizontal progress bar. The most minimal visualization option.
Duration	Displays the recording time in various formats (elapsed, remaining, total, percentage, and more).
Transcription	Synced transcript with word-level highlighting. Supports karaoke, subtitle, and progressive modes.
Translation	Displays the translated text for a recording.
Recording Session	Manages the recording lifecycle: microphone access, capture, upload, and processing.

Learn More