MEDIA CONTRACT
One source, three targets
Use an asset path for packaged media or an HTTPS URL for a remote preview.
CONTROL
Audio
Audio creates a portable player surface with an explicit source, optional identity, and the same visual contract on web, Android, and iOS. The control and waveform are functional on every target.
INTERACTION CONTRACT
One control, one waveform, three targets
Audio uses the target's native media player, while Dowe keeps the visual and interaction model aligned. The waveform is a stable 50-bar visualization, so the surface stays deterministic without browser-only audio analysis.
PLAY
Play and pause
The circular control swaps between the bundled play and pause icons and updates its accessible label.
SEEK
Touch the signal
Click, touch, or drag across the 50 bars to seek. On web, Arrow keys move by a short step and Home/End jump to the boundaries.
STATUS
Read remaining time
The active bars, play/pause icon, accessible state, and footer update together. Remaining time uses m:ss while the optional subtitle and avatar keep the same 12/6 spacing contract.
PLAYGROUND
Compare player treatments
Keep the source stable while changing the subtitle, avatar, variant, and scheme to match the surrounding product surface.
Soft player with an author avatar and a descriptive subtitle.
Solid player when media should anchor a dark or high-contrast panel.
Audio src:"https://cdn.pixabay.com/audio/2022/04/25/audio_5d61b5204f.mp3" subtitle:"Product walkthrough · 02:18" avatarSrc:"/assets/team/maya.webp" variant:"soft" scheme:"primary" rounded:"lg"
Audio src:"https://cdn.pixabay.com/audio/2022/04/25/audio_5d61b5204f.mp3" subtitle:"Release notes · 04:42" variant:"solid" scheme:"info" rounded:"lg"COMPOSITION PATTERNS
Use Audio inside a content workflow
Pair the player with metadata and a clear next action. The component owns playback controls; the surrounding Dowe source owns the page composition.
EPISODE
Design review
Subtitle gives users context before they press play.
AUTHOR
Agent briefing
avatarSrc makes the source owner visible without adding a second avatar tree.
STATUS
Ambient update
A solid scheme helps a player read as an active media surface.
API
Props
Audio also accepts the applicable common spacing, sizing, border, visibility, and accessibility props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||