components

Audio component

The <mave-audio> component plays audio uploads and the audio tracks of a video. It uses the same themes and controls as the player component, in a compact layout.

<script
  type="module"
  src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>

<mave-audio embed="{embed id}"></mave-audio>

The player component automatically uses this audio layout for audio-only uploads. Use <mave-audio> when you also want to play just the audio of a video.

Attributes

Attribute	Description
embed (required)	Points to an audio or video embed with an available audio track.
type	Defaults to `line` for a progress bar. Use `wave` for a waveform based on the audio.
theme	Supports the existing `default`, `dolphin` and `synthwave` themes, with either timeline type.
controls	Defaults to `full`. Also accepts `big`, `none` or a custom list of controls.
color	Sets the background color. Text and icons automatically adjust for contrast.
audio-title	Defaults to the name of the embed.
audio-subtitle	Optional text below the title.
audio-artwork	Image URL, used when `thumbnail` is included in `controls`. Defaults to the embed’s poster.

If waveform data is unavailable for the selected audio track, wave falls back to a progress bar. Older uploads need to be reprocessed to generate waveform data.

Controls

The default controls include play, time, seek, volume, subtitles and audio track selection when available. Add thumbnail to show an image; it stays hidden otherwise, including with full. Playback speed (rate) and AirPlay (airplay) are also optional. Video-only controls such as fullscreen and Cast are ignored.

<mave-audio
  embed="{embed id}"
  type="wave"
  theme="dolphin"
  controls="full thumbnail rate"
></mave-audio>

The subtitles and audiotracks attributes, playback methods and events work the same way as in the player component.