Audio Player

Native <audio> element. Browser provides controls — zero JavaScript, fully accessible.

Basic

Sample Track — Axiomatic (Demo)

<figure>
  <figcaption>Track title</figcaption>
  <audio controls preload="none">
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support audio.
  </audio>
</figure>

Multiple Tracks

Track 1 — Intro
Track 2 — Main Theme

<ul>
  <li>
    <strong>Track 1</strong>
    <audio controls preload="none">
      <source src="track1.mp3" type="audio/mpeg">
    </audio>
  </li>
</ul>

Attributes

Attribute	Effect
`controls`	Show browser playback UI (always include)
`preload="none"`	Don't preload — saves bandwidth
`autoplay muted`	Autoplay only allowed when muted
`loop`	Repeat playback

Accessibility

Always include controls — hidden audio controls fail WCAG SC 1.4.2
Wrap in <figure> with <figcaption> for title context
Provide a transcript link for speech or music with lyrics
Never use autoplay without muted

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Audio Player component is designed for versatile implementation across modern web applications. Ideal scenarios include:

Dashboards & Admin Panels - Structured data presentation and interface control.
Content Management Systems - Organizing complex information hierarchies and media.
E-Commerce Platforms - Enhancing product discovery and user workflows.
Marketing Sites - Highlighting key product offerings cleanly and effectively.
SaaS Applications - Delivering native-feeling, responsive app experiences.