Skip to content
FrameworkStyle

Default audio skin

Accessible audio controls for playback, seeking, volume, speed, and feedback

Use it for an audio player with a familiar full control set.

Use the packaged preset

<script type="module">
  import '@videojs/html/audio/player';
  import '@videojs/html/audio/skin';
</script>

<audio-player>
  <audio-skin>
    <audio src="audio.mp3"></audio>
  </audio-skin>
</audio-player>

Customize the skin

Packaged skins support --media-accent-color, --media-accent-text-color,--media-border-radius, and --media-scale-unit. Add your own class name and style values to the skin root.

See Customize skins for the complete styling and ownership workflow.

Behavior and API

  • The packaged export is AudioSkin in React and<audio-skin> in HTML.
  • The on-demand preset includes duration and seeking behavior.
  • Default exposes the full primary and secondary control regions.

For player state and feature details, see Presets. For the UI building blocks, see UI components.