All components (204)

Audio player

More · AudioPlayer

What it is and when to use it

Voice notes, a recorded message, a short audio clip: the audio with its controls. The controls are our own and not the browser's, because those change from one browser to another and in several of them the position bar cannot be reached with the keyboard.

When to use it

The voice note of an order or a ticket, a customer's message, a short voice-over.
src is the file and subtitle is the small line below the title (who is speaking, when).
With duration (in seconds) if it is known in advance: that way it does not show "–:––" or keep the bar disabled until the metadata arrives.

When not to

Video: this is audio only.
A notification sound that plays on its own, without anyone asking for it: it does not need a player.

Keyboard: Tab goes through the play button, the position bar and the speed button. On the bar, the arrow keys move forward and back one second at a time, Page Up and Page Down jump a tenth of the duration, and Home and End go to the start and the end. The speed cycles through: 1×, 1.25×, 1.5× and 2×.

Accessibility: title is required and names the controls: "Play Voice note from Aitor" (or "Pause…"), "Position in Voice note from Aitor". The position is announced in seconds, not as a percentage without a unit. If the audio does not load or the browser does not allow playback, it says so in words (role="alert") instead of leaving a button that does nothing.

Fine-tuning: no variables of its own: adjust it with the classes amset-audio, amset-audio--playing, amset-audio__track, amset-audio__thumb and amset-audio__speed.

What it looks like

Position in Voice note from Aitor

<AudioPlayer
  src="/notas/aitor-1042.mp3"
  title="Voice note from Aitor"
  subtitle="About the delivery of order 1042"
  duration={3}
/>

Props

Import it with import { AudioPlayer } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`src`required	`string`	—
`title`required	`string`	What is being listened to. Required: it names the player and its buttons.
`className`	`string`	Merged with the library classes; it does not replace them.
`duration`	`number`	Duration known in advance, so that 0:00 is not shown until it loads.
`subtitle`	`string`	Who speaks, when: the small line below.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: