---
title: "Waveform Visualizer — Free Framer component · Best of Framer"
description: "Free Framer component · by Victor Ashasha · Players. Audio Player - Free!"
canonical: "https://framer.elliotli.dev/component/waveform-visualizer"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/Waveform Visualizer

# Waveform Visualizer

Audio Player - Free!

[View on Framer](https://framer.com/marketplace/components/waveform-visualizer/?via=elliot-li)

![Waveform Visualizer preview image 1](https://framer.elliotli.dev/og/component/waveform-visualizer/969c40d9680c61d3/1600x1200.jpg)

## Summary

Audio Player - Free!

## Description

## 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

![Component settings](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-gn6gze3k-0ME1X8AlI9AYPLmWngTVdqgAdLpLqL)Component settings![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-gn6gze3k-0nacUqBtySaFbGlkQWCMqxM773WUzZ)

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #6286

## Details

- **Author**: Victor Ashasha
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-17
- **Categories**: Players

## More like this

-   [Cozy Video Card](/component/cozy-video-card) — 日香理 / hikari · $1 — A cozy card for your YouTube video
-   [A/B Audio Player Pro](/component/a-b-audio-player-pro) — Injamul Haque Somrat · $24 — Master Audio Comparison Player
-   [Reelflow](/component/reelflow) — Quaders · Free — An auto video ticker for reels
-   [Mux Video](/component/mux-video) — NorthGarden · $3 — Drop Mux video into any Framer site with full control over playback, UI, and interaction.