Duration

Displays the recording time. You can show elapsed time, remaining time, total duration, or a combination. Multiple format options give you control over exactly what is displayed.

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-duration for="rec"></fortyfour-duration>

By default it shows the elapsed time in m:ss format (e.g. 1:23).

Formats

The format attribute controls what time is displayed.

HTML

<fortyfour-duration for="rec" format="elapsed"></fortyfour-duration>
<fortyfour-duration for="rec" format="remaining"></fortyfour-duration>
<fortyfour-duration for="rec" format="total"></fortyfour-duration>
<fortyfour-duration for="rec" format="elapsed/total"></fortyfour-duration>

Format	Example	Description
`elapsed`	`1:23`	Time played (default)
`remaining`	`0:37`	Time left
`-remaining`	`-0:37`	Time left with minus sign
`total`	`2:00`	Total duration
`elapsed/total`	`1:23 / 2:00`	Elapsed and total combined
`elapsed-text`	`1 minute 23 seconds`	Elapsed in human-readable text
`remaining-text`	`37 seconds`	Remaining in human-readable text
`%`	`69%`	Percentage played

Styling

The component renders as an inline element. Style it with regular CSS.

CSS

fortyfour-duration {
  font-size: 14px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

Using tabular-nums keeps the width stable as the numbers change. This prevents the text from jumping around during playback.

Placeholder slot

Before metadata is loaded, the component shows a placeholder. You can customize it with a slot.

HTML

<fortyfour-duration for="rec">
  <span slot="placeholder">--:--</span>
</fortyfour-duration>

Reference

Attributes

Attribute	Type	Default	Description
`for`	string	required	ID of the `<fortyfour-recording>` to link to
`format`	string	`elapsed`	Display format (see formats table above)

Slots

Slot	Description
`placeholder`	Content shown before metadata is loaded