ef-waveform

Attributes

targetRequired

string

ID of ef-audio or ef-video element

mode

string

Display mode

Default:bars

Values:barsroundBarslinecurvewavespikesbrickspixel

bar-spacing

number

Spacing between bars

Default:0.5

line-width

number

Line width for line/curve modes

Default:4

Audio waveform visualization.

Basic Usage

<ef-audio id="audio" fft-size="256" src="music.mp3"></ef-audio>
<ef-waveform target="audio" mode="bars" class="text-green-400 w-3/4 h-32"></ef-waveform>

Full Scene

Live

Audio Waveform

Visualization Modes

Each mode produces a different visual style. Color is inherited from currentColor (set via Tailwind text-* classes).

Bars

Live

Round Bars

Live

Line

Live

Curve

Live

Wave

Live

Spikes

Live

Bricks

Live

Pixel

Live

Customization

Bar Spacing and Line Width

Live