LayoutUI
Theme Presets
Browse Components

Audio Player

Accessible audio playback with shared, theme-aware controls.

Basic

Play the bundled 12-second sample. Media controls share the site theme and work with the keyboard.

Audio playback sample

A quiet, 12-second test tone. No speech. Download Audio

View Code
HTML
<figure class="media-player" data-media-player>
  <figcaption>
    Audio playback sample
  </figcaption>
  <audio controls preload="metadata" aria-label="Quiet test tone">
    <source src="/media/layout-tone.mp3" type="audio/mpeg">
    Your browser does not support audio playback.
  </audio>
  <p class="muted">
    A quiet, 12-second test tone. No speech.
    <a href="/media/layout-tone.mp3" download>
      Download Audio
    </a>
  </p>
</figure>

Native controls

Opt into browser controls with data-media-native. Native playback is also the fallback without JavaScript.

Audio playback sample

A quiet, 12-second test tone. No speech. Download Audio

View Code
HTML
<figure class="media-player" data-media-player data-media-native>
  <figcaption>
    Audio playback sample
  </figcaption>
  <audio controls preload="metadata" aria-label="Quiet test tone">
    <source src="/media/layout-tone.mp3" type="audio/mpeg">
    Your browser does not support audio playback.
  </audio>
  <p class="muted">
    A quiet, 12-second test tone. No speech.
    <a href="/media/layout-tone.mp3" download>
      Download Audio
    </a>
  </p>
</figure>

Right-to-left

Controls follow reading direction while the media timeline keeps its conventional direction.

Audio playback sample

A quiet, 12-second test tone. No speech. Download Audio

View Code
HTML
<figure class="media-player" dir="rtl" data-media-player>
  <figcaption>
    Audio playback sample
  </figcaption>
  <audio controls preload="metadata" aria-label="Quiet test tone">
    <source src="/media/layout-tone.mp3" type="audio/mpeg">
    Your browser does not support audio playback.
  </audio>
  <p class="muted">
    A quiet, 12-second test tone. No speech.
    <a href="/media/layout-tone.mp3" download>
      Download Audio
    </a>
  </p>
</figure>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.cssbutton.cssslider.cssselect.cssmedia-player.cssslider.jsselect.jsmedia-player.js
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/button.css">
<link rel="stylesheet" href="/library/assets/slider.css">
<link rel="stylesheet" href="/library/assets/select.css">
<link rel="stylesheet" href="/library/assets/media-player.css">
<script defer src="/library/assets/slider.js"></script>
<script defer src="/library/assets/select.js"></script>
<script defer src="/library/assets/media-player.js"></script>

19,240 bytes CSS including base · 20,132 bytes runtime JavaScript

Usage

Share the playback foundation

Audio and video use the same media-player CSS and runtime, with shared Button, Slider and Select controls.

Supply accessible media

Replace the sample URLs with your own assets. Provide captions for video and a visible transcript for spoken content. Keep the native controls attribute for progressive enhancement.

Respect the viewer

Playback starts only after interaction. Controls wrap on small screens, retain native keyboard interaction, and use the current theme. Fullscreen and volume support depend on the browser.

Manage the lifecycle

Call layoutMedia.refresh(root) for new content and layoutMedia.destroy(figure) before removing it. Native media events remain available to your application.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.