Waveform Styling
Customize the visual appearance of waveforms using barWidth and barGap props, combined with theme colors. These props are passed to WaveformPlaylistProvider.
Loading...
Configuration
<WaveformPlaylistProvider
tracks={tracks}
barWidth={3} // Width of each bar in pixels
barGap={1} // Gap between bars in pixels
theme={{
// Solid color (string)
waveOutlineColor: '#E0EFF1',
waveFillColor: '#4a9eff',
// Or use a gradient for waveOutlineColor / waveFillColor:
waveOutlineColor: {
type: 'linear',
direction: 'vertical', // or 'horizontal'
stops: [
{ offset: 0, color: '#00ffcc' },
{ offset: 0.5, color: '#ff00aa' },
{ offset: 1, color: '#00ffcc' },
],
},
waveProgressColor: 'rgba(0, 0, 0, 0.15)', // Overlay on played portion
playheadColor: '#ff4444', // Vertical playhead line
// Selected track colors (when track is clicked)
selectedWaveOutlineColor: '#E0EFF1', // Also supports gradients
selectedWaveFillColor: '#4a9eff',
}}
>
<Waveform />
</WaveformPlaylistProvider>Style Guide
| Style | barWidth | barGap | Best For |
|---|---|---|---|
| Continuous | 1 | 0 | Classic waveform look, detailed editing |
| Thin bars | 1 | 1-2 | Modern, minimalist UI |
| SoundCloud | 3 | 1 | Social media players, overview displays |
| Bold | 4-5 | 2 | Mobile displays, high-contrast needs |
Audio Credits: "Whiptails" by Albert Kader — Minimal Techno stems from the Cambridge Music Technology multitrack library. Licensed under CC BY 4.0.
