Waveform Visualizer

About this Component

The waveform create an organic, reactive looking display that gives the impression of a live visualizer. Controls include play/pause, a seekable progress bar, time display, mute toggle, and a volume slider. It drops straight into your Framer project and every visual property is editable directly from the right panel. No code required after install.

How to Use

1. Audio File: upload a file through Framer's picker (supports .mp3, .wav, .ogg, .aac, .m4a)

2. Audio URL: paste a direct link to a public audio file

3. Title: add track or episode name displayed above the waveform

4. Description: add artist, subtitle, or any secondary text below the title

5. Bar Count: add number of waveform bars (8–128)

6. Bar Radius: add corner rounding on each bar (0–10)

7. Bass / Low-Mid / High-Mid / Treble: add waveform color gradient mapped left to right across the bars

8. Text: add title and description text color

9. Background: add player background color

10. Accent: add play button, seek fill, and volume thumb color

Component Settings

I actively maintain and update this component. If you have a feature request, please reach out.