Display and feedback

AudioPlayer

Compact accessible playback, seek, time, mute, and volume controls.

Live example

0:00 / 0:03

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { AudioPlayer } from "@cofob/design-system-react";

/**
 * Complete AudioPlayer parameter reference.
 * @param src
 *   type: string URL
 *   required
 *   example: {src}
 * @param durationHint
 *   type: number (seconds)
 *   default: 0
 *   example: {durationHint}
 * @param disabled
 *   type: boolean
 *   default: false
 *   example: {disabled}
 * @param labels
 *   type: Partial<Record<string, string>>
 *   default: —
 *   example: {{ system: "System theme", light: "Light theme", dark: "Dark theme" }}
 * @param audioProps
 *   type: native audio element attributes
 *   default: —
 *   example: {audioProps}
 * @param div attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function AudioPlayerExample() {
  return (
    <AudioPlayer src="/audio/note.ogg" durationHint={83} />
  );
}

Svelte

<script lang="ts">
  import { AudioPlayer } from "@cofob/design-system-svelte";

  // Complete AudioPlayer parameter reference.
  // src
  //   type: string URL
  //   required
  //   example: {src}
  // durationHint
  //   type: number (seconds)
  //   default: 0
  //   example: {durationHint}
  // disabled
  //   type: boolean
  //   default: false
  //   example: {disabled}
  // labels
  //   type: Partial<Record<string, string>>
  //   default: —
  //   example: {{ system: "System theme", light: "Light theme", dark: "Dark theme" }}
  // audioProps
  //   type: native audio element attributes
  //   default: —
  //   example: {audioProps}
  // div attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<AudioPlayer src="/audio/note.ogg" durationHint={83} />

HTML

<!--
  Complete AudioPlayer parameter reference.
  src
    type: string URL
    required
    example: {src}
  durationHint
    type: number (seconds)
    default: 0
    example: {durationHint}
  disabled
    type: boolean
    default: false
    example: {disabled}
  labels
    type: Partial<Record<string, string>>
    default: —
    example: {{ system: "System theme", light: "Light theme", dark: "Dark theme" }}
  audioProps
    type: native audio element attributes
    default: —
    example: {audioProps}
  div attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<div class="cf-audio-player" data-cf-audio-player data-duration-hint="83"><audio src="/audio/note.ogg"></audio><button data-cf-audio-play>Play</button><input type="range" data-cf-audio-timeline><span data-cf-audio-time></span><button data-cf-audio-mute>Mute</button><input type="range" data-cf-audio-volume></div>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-audio-player`
Adapters	Native · React · Svelte
Primary props	src · durationHint · disabled · labels · audioProps · div attributes
Documented states	paused · playing · seeking · muted · volume · disabled · play failure
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`src`required	`string URL`	`required`	React · Svelte · HTML	`{src}`	Media URL loaded by the native audio or video element.
`durationHint`	`number (seconds)`	`0`	React · Svelte · HTML	`{durationHint}`	Known duration used before metadata loads or when duration metadata is unavailable.
`disabled`	`boolean`	`false`	React · Svelte · HTML	`{disabled}`	Prevents user interaction while preserving visible context.
`labels`	`Partial<Record<string, string>>`	`—`	React · Svelte · HTML	`{{ system: "System theme", light: "Light theme", dark: "Dark theme" }}`	Localized visible and accessible labels.
`audioProps`	`native audio element attributes`	`—`	React · Svelte · HTML	`{audioProps}`	Forwards preload, cross-origin, event, and other native attributes to the audio element.
`div attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.