Player

Full-featured audio player with waveform, transcription, and translation support.

Contents

Installation

HTML
<script type="module" src="https://cdn.jsdelivr.net/npm/@44-audio/[email protected]/dist/player.es.js"></script>

Usage

HTML
<fortyfour-player
  recording-id="YOUR_RECORDING_ID"
  shape="rounded"
  preload="none"
  spacing="default"
  progress="bar-waveform"
  hide-transcript
  hide-translation
  hide-branding
></fortyfour-player>

Attributes

Attribute Type Default Description
recording-id string required Recording ID to play
shape string rounded Player shape: rounded or square
preload string none Preload strategy: none, metadata, or auto
spacing string default Internal spacing: default, compact, or comfortable
progress string bar-waveform Progress style: bar-waveform, line-waveform, or progress-bar
hide-transcript boolean false Hide the transcript section
hide-translation boolean false Hide the translation toggle
hide-branding boolean false Hide the "powered by 44" link

Preload Strategies

Value Behavior Use When
none Loads nothing until play is clicked Multiple players on a page (lazy loading)
metadata Loads waveform, duration, transcription upfront Single player where you want to show duration before play
auto Loads metadata AND audio file immediately You need instant playback with no delay

Styling

CSS Custom Properties

CSS
fortyfour-player {
  /* Typography */
  --fortyfour-player-font-family: system-ui, sans-serif;
  --fortyfour-player-font-size: 14px;

  /* Colors */
  --fortyfour-player-accent: #c4956a;
  --fortyfour-player-background: #faf8f5;
  --fortyfour-player-surface: #f0ede8;
  --fortyfour-player-text: #2c2620;
  --fortyfour-player-muted: #8c8279;
  --fortyfour-player-border: #d9d4cc;
}
Property Description Default
--fortyfour-player-font-family Font family system-ui, sans-serif
--fortyfour-player-font-size Base font size 14px
--fortyfour-player-accent Accent color (buttons, progress) #c4956a
--fortyfour-player-background Background color #faf8f5
--fortyfour-player-surface Surface color for transcript area #f0ede8
--fortyfour-player-text Text color #2c2620
--fortyfour-player-muted Muted text color #8c8279
--fortyfour-player-border Border color #d9d4cc

JavaScript API

The player emits standard DOM events that bubble up through the document, allowing you to listen for playback state changes and control multiple players.

Events

Event Description Detail
loading Recording metadata is being fetched —
loadedmetadata Metadata (waveform, transcription, duration) loaded —
play Playback has started —
pause Playback has been paused —
ended Playback reached the end —
timeupdate Current playback position changed —
error An error occurred loading or playing —

Listening for Events

Events bubble up from the player, so you can listen at the document level or directly on the element:

JavaScript
// Listen on a specific player
const player = document.querySelector('fortyfour-player');
player.addEventListener('play', () => {
  console.log('Playback started');
});

// Listen for all players at the document level
document.addEventListener('play', (event) => {
  if (event.target.tagName === 'FORTYFOUR-PLAYER') {
    console.log('A player started:', event.target);
  }
}, true);

Methods

Control playback programmatically:

JavaScript
const player = document.querySelector('fortyfour-player');

player.togglePlay(); // Toggle between play and pause
player.pause();      // Pause playback
player.seek(5000);   // Seek to 5 seconds (time in milliseconds)
Method Description
togglePlay() Toggle between playing and paused states
pause() Pause playback
seek(timeMs) Seek to a position in milliseconds

State Attribute

The player element has a data-state attribute that reflects the current playback state, useful for CSS styling:

CSS
/* Style based on playback state */
fortyfour-player[data-state="playing"] {
  /* Player is currently playing */
}

fortyfour-player[data-state="error"] {
  /* Player encountered an error */
}

Learn More

Overview

Quick start and feature highlights

Playground

Experiment with settings interactively

Examples

Common patterns and tips