Audio Player
An audio player with a lit play key, seeded waveform scrubbing, speed menu and volume, driving a real audio element or a simulated clock.
Preview
Low Tide, Late Light
Marisol Ade · Harbour Sessions
1:12-2:36
Ep. 41 — Designing for slow networks
Pebble notes podcast
0:00-42:14
Voice notes · #launch-week
IV
Voice note, Ines Varga0:42
Voice note, Malik Osei0:11
MOInstall
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Track title; names the group and the play key. |
| artist | string | — | Second line: artist, sender or source. |
| src | string | — | Audio file for a real <audio> element. Omit to run a simulated clock over duration. |
| duration | number | 0 | Length in seconds. Required without src; replaced by metadata with src. |
| artwork | ReactNode | — | Cover art for the card layout. |
| layout | "card" | "compact" | "card" | card adds cover, volume and a display well; compact is a one-row voice note. |
| defaultTime | number | 0 | Start position in seconds. |
| bars / seed / peaks | number / string | number / number[] | 72 (36 compact) / title / — | Waveform bar count, generator seed, or your own 0–1 peaks. |
| decode | boolean | false | Decode src with Web Audio to draw its real peaks. |
| rates | number[] | [0.75, 1, 1.25, 1.5, 2] | Speeds in the speed menu. |
| defaultVolume | number | 0.8 | Initial volume, 0 to 1. |
| onTimeChange / onPlayingChange | (seconds: number) => void / (playing: boolean) => void | — | Playback callbacks. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.