How To: Customize Waveform Appearance

Problem: You want to customize the waveform's color, spacing, or line width to match your design.

Solution: Use the class (for color via text-*), bar-spacing, and line-width attributes to control visual appearance.

Color:

Color is inherited from currentColor. Set it via Tailwind text-* classes or an inline CSS color property.

<ef-waveform target="my-audio" class="text-red-400" />
<ef-waveform target="my-audio" style="color: rgb(100, 200, 255);" />
<ef-waveform target="my-audio" style="color: currentColor;" />

Bar spacing:

Adjust bar-spacing to control spacing between bars in bars and roundBars modes. Higher values create more spacing (narrower bars), lower values create less spacing (wider bars). Default is 0.5.

<ef-waveform target="my-audio" mode="bars" bar-spacing="0.2" />
<ef-waveform target="my-audio" mode="bars" bar-spacing="1.0" />

Line width:

Set line-width for line and curve modes to control stroke thickness. Default is 4.

<ef-waveform target="my-audio" mode="line" line-width="2" />
<ef-waveform target="my-audio" mode="curve" line-width="8" />

Note: bar-spacing only affects bars and roundBars modes. line-width only affects line and curve modes. Other modes use their own internal spacing calculations.