#252
Voice messages
Two voice message players: one with a waveform from peaks, one with flat placeholder bars.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Voice messages" pattern (@codeatlasdev/ui demo #252, display/audio-player) in my app.
Call get_demo({ ids: ["#252"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Voice notes in chat where the audio loads only on the first play and can be scrubbed.
Keep these library parts, with the props and tokens the demo uses:
- AudioPlayer from "@codeatlasdev/ui"
Behaviour to keep:
- `<AudioPlayer {src} {peaks} duration={2} />`
- `<AudioPlayer {src} duration={2} label="Without waveform data" />`
- `const peaks = Array.from({ length: 48 }` builds the waveform amplitudes
- `tone(2)` builds a 2 second WAV blob as the source
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- AudioPlayer
@codeatlasdev/ui
How it is built
- `<AudioPlayer {src} {peaks} duration={2} />`
- `<AudioPlayer {src} duration={2} label="Without waveform data" />`
- `const peaks = Array.from({ length: 48 }` builds the waveform amplitudes
- `tone(2)` builds a 2 second WAV blob as the source
Related
Loading source.