---
title: "MP3 Sound Player — Free Framer component · Best of Framer"
description: "Free Framer component · by Fred Moon · Players. Customisable and responsive sound player"
canonical: "https://framer.elliotli.dev/component/mp3-sound-player"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/MP3 Sound Player

# MP3 Sound Player

Customisable and responsive sound player

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

![MP3 Sound Player preview image 1](https://framer.elliotli.dev/og/component/mp3-sound-player/cce55781ab9625db/1600x1200.jpg)

## Summary

Customisable and responsive sound player

## Description

### Overview

A polished audio player component built on WaveSurfer.js, designed for podcasters, musicians, and content creators who need a professional playback experience in Framer.

### Audio Source

Load tracks via direct file upload or external URL. Supports MP3, WAV, and M4A formats with automatic waveform generation.

### Visualization Options

Choose between bar-style or continuous wave visualization. The bar style includes contrast controls for dynamic range emphasis, while both styles support amplification adjustment. Configure bar width, gap, and corner radius for precise aesthetic control.

### Playback Features

Standard playback controls with optional autoplay on preview. Time display shows elapsed time or remaining time countdown. Playback cursor with configurable width and color provides visual tracking.

### Customization

Full typography control for track title, artist name, and timer display. Independent color controls for waveform, progress indicator, button, and all text elements. Optional background image or solid color fill.

### Technical Notes

Single instance playback enforced—starting one player automatically pauses others on the page.

_Built with WaveSurfer.js 7.8.10 for reliable cross-browser performance._

### Screenshots

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-km6e0vfx-99r71To2wTHkDG8tjPIskzJaa4oBPU)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-km6e0vfx-9fIymVwJTVgVVXRZwXe3f3GIPVnlVK)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-km6e0vfx-Xa7TOGtwEzhHsrLXOpkMlZfSPrWRGV)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-km6e0vfx-dPCFU10YOyIAdNV5GDgsmrjURSWiC8)

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

-   All · #830

## Details

- **Author**: Fred Moon
- **Published**: 2026-02-11
- **Updated**: 2026-02-11
- **Added**: 2026-02-02
- **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.