A player for spoken audio — episodes, talks, lessons, voice notes. Play, a seek bar with chapter marks, skip back and forward, playback speed, and a chapter list that seeks and follows playback, with optional transcript and download links. It also hooks into the OS media controls.
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { AudioPlayer } from "@vamos-ui/react";
<AudioPlayer
src="/audio/episode-12.mp3"
title="Episode 12: Moving house"
duration={2710}
chapters={[{ start: 0, title: "Welcome" }, { start: 312, title: "Packing" }]}
transcriptHref="/episodes/12/transcript"
download
/>Keyboard anywhere in the player: Space / K play and pause, ← / → 5 s, J / L skip back / forward. The seek bar keeps its own arrow keys.
Times use the locale's digits; the seek bar reads "1:05 of 45:10".
Examples
Voice note
No title or speed button (rates={[1]}), shorter skips, no media session.
Translated labels
Pass labels, or put them under "audioPlayer" in your LocaleProvider messages.
Ders 3: Kesirler
API
AudioPlayer
| Prop | Type | Default |
|---|---|---|
srcFile URL or several sources. | string | { url, type? }[] | — |
titleVisible title; names the player and the media session. | string | — |
descriptionLine under the title. | ReactNode | — |
artworkCover image URL. | string | — |
chaptersSeconds from the start. Marks on the seek bar plus a list that seeks; the current one gets aria-current. | { start: number; title: string }[] | — |
hideChapterListKeep only the marks. | boolean | — |
durationKnown length (s) before metadata loads and on the server. | number | — |
skipBack / skipForwardSeconds for the skip buttons and J / L. | number | 15 / 30 |
ratesSpeeds the speed button cycles. One value hides it. | number[] | [1, 1.25, 1.5, 2] |
transcriptHrefTranscript link. | string | — |
downloadDownload link; true uses the source URL. | string | boolean | — |
mediaSessionLock-screen / headset controls while playing; previous / next jump between chapters. | boolean | true |
onTimeUpdate / onEnded / onChapterChangePlayback events; onChapterChange gets the chapter index. | callbacks | — |
audioRefThe audio element. | Ref<HTMLAudioElement> | — |
labelsDictionary namespace "audioPlayer". | Partial<AudioPlayerLabels> | — |
chapterAt(chapters, time)
| Prop | Type | Default |
|---|---|---|
returnsIndex of the chapter at a time (-1 before the first). | number | — |