Audio player
A sound with a waveform you seek on — the peaks given by the server or computed once with Web Audio — play, time and speed, paused when it leaves the screen.
Web only — React, from @krizaka/ui/audio-player. Beta: its API may still change in a minor version.
When to use
- For a voice note, a podcast extract, a generated voice, a music preview.
- When the shape of the sound helps to find a moment (speech and silences).
When not to use
- For a sound with a picture: the video player.Use instead: Video player
- To show a value along a bar without a sound: a progress bar.Use instead: Progress
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { AudioPlayer, resamplePeaks, computeAudioPeaks } from "@krizaka/ui/audio-player";Examples
Voice note
Peaks from the server, a short note.
Podcast extract
More bars and four speeds.
Props
A sound with a seekable waveform: play / pause, time, speed — a voice note, a podcast clip, a track.
| Prop | Type | Default | Description |
|---|---|---|---|
srcrequired | string | — | The address of the sound. |
titlerequired | string | — | What it is ("Voice note — Eric, 0:42"): shown, and the accessible name of the player. |
bars | number | 48 | How many bars. Default 48. |
className | string | — | Classes merged on the root. |
computePeaks | boolean | — | Without peaks: fetches the file and computes them with Web Audio at the first play (same-origin or CORS). |
duration | number | 0 | The length, in seconds, before the metadata is loaded (from the server). |
labels | Partial<AudioPlayerLabels> | — | The words, passed translated; English by default. |
onPlayingChange | ((playing: boolean) => void) | — | Called when playback starts, pauses, ends. |
pauseWhenHidden | boolean | true | Pauses when it leaves the screen. Default true. |
peaks | readonly number[] | — | The peaks, between 0 and 1, as many as you like (they are resampled to bars). |
playbackRates | readonly number[] | [1, 1.5, 2] | The speeds of the speed button. Default [1, 1.5, 2]; [] hides it. |
Accessibility
- A
groupnamed bytitle; the waveform is asliderwhose value is read as a time (“0:42 of 3:10”). - The play button says its state (“Pause” while playing); the speed button its speed.
- The bars are decorative; only the colour of the played part changes, nothing moves.
Keyboard
| Keys | Action |
|---|---|
| Arrow keys | Back or forward 5 seconds on the waveform. |
| Page Up / Page Down | Back or forward 30 seconds. |
| Home / End | The start or the end. |
Best practices
- Compute the peaks on the server once (
peaks);computePeaksdownloads and decodes the whole file in the browser. - Give
durationwhen you know it: the time shows before the metadata arrives. - Name the player by its content (“Voice note from Eric, 0:42”).
Related components
Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub