Dot Waveform
For a clip, a podcast or a recording. The waveform is read from the audio itself, each column as loud as the clip is there, lit in the accent up to the playhead and dim after, with the unlit dots of the panel faintly there. Point along it for the time; click anywhere to play from there, or drag to scrub; focused, the arrow keys skip and space plays. The demo is a made-up podcast that reviews the paperclip, voiced with ElevenLabs.
Needs: None. Web Audio decodes the file once to read its loudness.
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | The audio file. |
| title | string | – | What's playing, shown above the waveform. |
| height | number | 48 | Height of the waveform in px. |
| tone | string | – | The played part's colour. The page's accent by default. |
| pitch | number | 3 | Size of one dot in px. |
| step | number | 5 | Seconds the arrow keys skip. |
| className | string | – | Class on the player. It fills its container's width. |
| style | CSSProperties | – | Style on the player. |