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 uniquement — React, depuis @krizaka/ui/audio-player. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- 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).
Quand ne pas l’utiliser
- For a sound with a picture: the video player.À la place : Video player
- To show a value along a bar without a sound: a progress bar.À la place : Progress
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { AudioPlayer, resamplePeaks, computeAudioPeaks } from "@krizaka/ui/audio-player";Exemples
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 | Défaut | Description |
|---|---|---|---|
srcrequis | string | — | The address of the sound. |
titlerequis | 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. |
Accessibilité
- 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.
Clavier
| Touches | 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. |
Bonnes pratiques
- 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”).
Composants liés
Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub