AudioPlayer

import { AudioPlayer } from '@yarcl/react';

0:00 / 0:00

Pass a URL or a blob URL from a local recording. The player loads metadata, displays elapsed and total time, and lets the listener seek with a slider. It uses an IconButton, Slider and native audio playback. The audio element remains available through ref, and native audio attributes and event handlers pass through to it.

<AudioPlayer src={recordingUrl} onEnded={() => setFinished(true)} />

For a recorder interface, pass a normalized level from 0 to 1 to show an input meter. Its levelLabel names the meter for screen readers.

<AudioPlayer src={recordingUrl} level={inputLevel} levelLabel="Microphone level" />

The play and pause buttons have accessible labels, and the seek slider announces the current time. Use playLabel, pauseLabel and seekLabel to change their labels.

Props

Prop	Type	Default	Description
src required	string		Audio URL, including a blob URL for a local recording.
className	string		Class applied to the visible player container.
level	number		Optional normalized input level from 0 to 1, shown as a meter for recording interfaces.
levelLabel	string		Accessible and visible label for the input level meter.
pauseLabel	string		Accessible label for the pause button.
playLabel	string		Accessible label for the play button.
seekLabel	string		Accessible label for the seek slider.
style	CSSProperties		Styles applied to the visible player container.