Audio Player

Plays a sound with a play button, a seek bar, skip buttons and a speed control, the same on every platform.

Stable

Web

iOS

Android

@advui/core

Source

Audio player

Preview

Code

Radio message: flood safetyCommunity radio · Ayeyarwady

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { AudioPlayer } from '@advui/core'

<AudioPlayer src="https://example.org/radio/flood-safety.mp3" title="Flood safety" subtitle="Community radio" />

// iOS and Android: register an engine once at app start (see Platform notes).
import { setAudioEngine } from '@advui/core'
import { createAudioPlayer } from 'expo-audio'

Examples

Voice message

An icon, and no skip or speed buttons.

Preview

Code

Voice message from Daw Hla

API reference

AudioPlayer

Also takes View props (`maxWidth`…) for the frame.

Prop	Type	Default	Description
`src` required	`string \| number`	—	A URL, or `require()` of a bundled file on native.
`title` required	`string`	—	Shown as the heading and names the player.
`subtitle`	`string`	—	A second line: speaker, date, length.
`artwork`	`ReactNode`	—	An image or icon before the title.
`skip`	`number`	`10`	Seconds moved by the skip buttons; 0 hides them.
`rates`	`number[]`	`[1, 1.25, 1.5, 2]`	Speeds the speed button cycles through. One speed hides the button.
`autoPlay`	`boolean`	`false`	Start at once.
`loop`	`boolean`	`false`	Play again at the end.
`onPlay`	`() => void`	—	Called when playback starts.
`onPause`	`() => void`	—	Called when playback pauses.
`onEnded`	`() => void`	—	Called when playback reaches the end (not while looping).
`labels`	`Partial<AudioPlayerLabels>`	—	Button names, seek text and the error, for translation.

setAudioEngine

Registers the native engine: `(source, onStatus) => AudioEngine`, where the engine has `play`, `pause`, `seek(seconds)`, `setRate`, `setLoop` and `release`, and reports `AudioStatus` changes through `onStatus`. Call it once at app start.

Accessibility

On web the player is a group named by its title, so "Play" and "Seek" are read in context. iOS and Android read no group names, and TalkBack made a named frame one stop that caught touches meant for its buttons, so there the frame is unnamed.
The play button’s name follows the state ("Play" / "Pause"). The seek bar is a slider whose value reads "1:05 of 3:20"; the time labels beside it are hidden to avoid reading them twice.
The speed button says its value ("Playback speed, 1.5×"). Skip buttons say how far they move.
If the sound cannot be played, the controls are disabled and a message replaces the subtitle.
Provide a transcript nearby for speech: people who cannot hear it, or cannot play sound, need one (WCAG 1.2.1).

Keyboard interactions
Key	Action
`Tab`	Play, speed, skip back, seek bar, skip forward.
`Enter / Space`	Press the focused button.
`Arrow keys`	Move the seek bar by one second (Page Up / Down: bigger steps).

Responsive behavior

Fills its container’s width; set maxWidth to limit it.

Platform notes

Web

Uses an Audio element that is not added to the page, with preload="metadata" so the length shows before playing.

iOS

Uses the engine registered with setAudioEngine, e.g. a wrapper around expo-audio (see the Expo playground’s _layout.tsx). Without one the controls are disabled and it warns in development.