WaveformAudioPlayer
An audio player with a bar waveform you can click to seek.
0:00 / 0:00
0:00 / 0:00
0:00 / 0:00
In context
0:00 / 0:00
Trailing action, playback state, error
0:00 / 0:00
0:00 / 0:00
0:00 / 0:00
Couldn’t play this recording. Check your connection and tap play to try again.
Narration files are not bundled with this site, so playback itself needs real audio; the bar, state and error handling are live.
0:00 / 0:00
0:00 / 0:00
Props
| Prop | Type | Required | Default |
|---|---|---|---|
src | string | Yes | — |
barCount | number | undefined | No | 48 |
skipSeconds | number | undefined | No | 15 |
trailingAction | ReactNode | No | — |
autoPlay | boolean | undefined | No | false |
onPlayBlocked | (() => void) | undefined | No | — |
playing | boolean | undefined | No | — |
onPlayingChange | ((playing: boolean) => void) | undefined | No | — |
onEnded | (() => void) | undefined | No | — |
onTimeUpdate | ((currentTime: number, duration: number) => void) | undefined | No | — |
error | ReactNode | No | — |
onRetry | (() => void) | undefined | No | — |
loading | boolean | undefined | No | — |
tone | "default" | "onDark" | undefined | No | default |
audioRef | Ref<HTMLAudioElement> | undefined | No | — |
crossOrigin | "" | "anonymous" | "use-credentials" | undefined | No | — |
controls | "text" | "icons" | undefined | No | text |
size | "default" | "compact" | undefined | No | default |
Waveform
Bar heights are seeded from src, so the same audio always shows the same bars; there is no real amplitude analysis.
data-rebar-* attributes
data-rebar-component="waveform-audio-player"; parts include play-button, skip-back, skip-forward, waveform, bar (with data-played once passed), time.
Migrating to Ant Design
Not codemod-covered. AntD has no audio player; use a dedicated library or a native <audio controls> if you do not need the waveform.
Icon controls, compact size, audioRef
controls="icons" draws round glyph buttons (play, pause, replay, skip back/forward with the seconds) instead of the labelled text buttons; each keeps its accessible name. size="compact" tightens the bar for lists and cards. audioRef gives you the underlying <audio> element (object or callback ref) and crossOrigin is forwarded to it. The error message uses a danger tone mixed toward the text colour, at least 6:1 on the page and tints in light and dark, and a lighter one on tone="onDark".
<WaveformAudioPlayer src={url} controls="icons" size="compact" audioRef={audio} crossOrigin="anonymous" />