Player

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

Listen

Quick Start

Add the script tag to your page and use the component:

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

<fortyfour-player
  recording-id="YOUR_RECORDING_ID"
></fortyfour-player>

Features

  • Waveform visualization — bar or line style progress with seek support
  • Transcription — synchronized karaoke highlighting as audio plays
  • Translation — toggle to show translated text
  • Fully customizable — colors, spacing, and typography via CSS variables
  • Accessible — keyboard navigation and screen reader support
  • Responsive — adapts to any container width

Learn More

Reference

Attributes, styling, and CSS variables

Playground

Experiment with settings interactively

Examples

Common patterns and tips