Skip to content

Rounded waveform bars

Choose a tag to compare

View all tags
@naomiaro naomiaro released this 03 Jul 05:37
rounded-bars
9163ade

Rounded waveform bars

SoundCloud-style pill-shaped waveform bars, opt-in across both rendering stacks (#552).

Packages

Package Version
@waveform-playlist/ui-components 13.1.0
@waveform-playlist/browser 15.2.0
@dawcore/components 0.0.30

New API

React — boolean prop on both providers (default false):

<WaveformPlaylistProvider barWidth={4} barGap={2} roundedBars>
<MediaElementPlaylistProvider barWidth={4} barGap={2} roundedBars>

Web components — boolean attribute on <daw-editor> and <daw-player>:

<daw-player src="song.mp3" bar-width="4" bar-gap="2" rounded-bars></daw-player>

Radius is derived from barWidth / 2 (full pill caps, clamped on short bars). Most visible with barWidth ≥ 3 and a non-zero barGap.

Rendering notes

  • All bars of a canvas chunk batch into one path with a single fill; browsers without ctx.roundRect (Safari < 16.4, Firefox < 112) gracefully degrade to square corners.
  • In the default inverted draw mode the canvas paints the complement around the bars with an evenodd fill — progress overlays keep working unchanged, and semi-transparent outline colors render correctly. Gap columns and regions without peak data are covered by the complement (square inverted mode leaves them transparent).

Demo

Two new sections on the styling example, plus a style-guide table entry.

Assets 2
Loading