Waveform Scrubber

#Installation & usage

Use a waveform scrubber as the seek bar of a podcast, a voice note, a lecture or a workout recording, anywhere the shape of the sound helps people find their place. The loudness samples you pass become bars: played in ink, the rest dim. Chapter starts are ticks with their titles above, a ruler of minutes runs underneath, and hovering shows the time and chapter under the pointer. Drag anywhere on the wave, or use the keys: a Base UI slider does the work underneath. With clip it becomes a range with two accent handles, zoomed to a window round the clip, for sharing a moment. It decodes no audio: bring the samples from your pipeline, or decode a file once and store them.

import { WaveformScrubber } from '@youj/react'

<WaveformScrubber
  // Loudness from 0 to 1, spread evenly over the recording.
  peaks={peaks}
  duration={audio.duration}
  value={time}
  onValueChange={setTime}
  onValueCommitted={(t) => (audio.currentTime = t)}
  chapters={[
    { start: 0, title: 'Cold open' },
    { start: 192, title: 'The brief' },
  ]}
/>

duration is the recording's length in seconds and value the playhead. onValueChange follows the drag frame by frame; onValueCommitted fires when a drag or a key press ends, the moment to seek a real player. The samples are resampled to the bars that fit (one every 5px, or bars of them), each bar taking the loudest sample in its slice so short peaks survive; there are never more bars than samples.

clip (a [start, end] range in seconds) turns the scrubber into two handles in the accent, with onClipChange reporting each move. While it clips, the wave zooms to a window round the range with at least a minute either side, and the handles step by the second. formatTimecode(seconds, locale) formats times the way the scrubber does (0:42, 12:34, 1:02:10), for the labels around it. The Podcast block puts it together with a player, a speed control and chapter rows.

#Description

#Code